appview/repo/fragments: improve diff copy behavior #924

Replace block-level divs with inline spans and use flex-col for visual line stacking. Move whitespace-pre to content spans only. This allows text content copied out of diffs to match the UI, and not copy hidden newlines.

Signed-off-by: Evan Jarrett evan@evanjarrett.com

+3 -3

2 changed files

Interdiff #0 → #1

expand all

appview

pages

templates

repo

fragments

splitDiff.html

unifiedDiff.html

+2 -2

appview/pages/templates/repo/fragments/splitDiff.html

··· 10 10 {{- $ctxStyle := "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400" -}} 11 11 {{- $opStyle := "w-5 flex-shrink-0 select-none text-center" -}} 12 12 <div class="grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-700"> 13 - <div class="overflow-x-auto col-span-1 font-mono leading-normal"><div class="overflow-x-auto"><div class="flex flex-col min-w-full">{{- range .TextFragments -}}<span class="block bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</span> 13 + <div class="overflow-x-auto col-span-1 font-mono leading-normal"><div class="overflow-x-auto"><div class="inline-flex flex-col min-w-full">{{- range .TextFragments -}}<span class="block bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</span> 14 14 {{- range .LeftLines -}} 15 15 {{- if .IsEmpty -}} 16 16 <span class="{{ $emptyStyle }} {{ $containerStyle }}"> ··· 34 34 {{- end -}} 35 35 {{- end -}}</div></div></div> 36 36 37 - <div class="overflow-x-auto col-span-1 font-mono leading-normal"><div class="overflow-x-auto"><div class="flex flex-col min-w-full">{{- range .TextFragments -}}<span class="block bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</span> 37 + <div class="overflow-x-auto col-span-1 font-mono leading-normal"><div class="overflow-x-auto"><div class="inline-flex flex-col min-w-full">{{- range .TextFragments -}}<span class="block bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</span> 38 38 {{- range .RightLines -}} 39 39 {{- if .IsEmpty -}} 40 40 <span class="{{ $emptyStyle }} {{ $containerStyle }}">

+1 -1

appview/pages/templates/repo/fragments/unifiedDiff.html

··· 1 1 {{ define "repo/fragments/unifiedDiff" }} 2 2 {{ $name := .Id }} 3 - <div class="overflow-x-auto font-mono leading-normal"><div class="overflow-x-auto"><div class="flex flex-col min-w-full">{{- range .TextFragments -}}<span class="block bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</span> 3 + <div class="overflow-x-auto font-mono leading-normal"><div class="overflow-x-auto"><div class="inline-flex flex-col min-w-full">{{- range .TextFragments -}}<span class="block bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</span> 4 4 {{- $oldStart := .OldPosition -}} 5 5 {{- $newStart := .NewPosition -}} 6 6 {{- $lineNrStyle := "min-w-[3.5rem] flex-shrink-0 select-none text-right bg-white dark:bg-gray-800 target:bg-yellow-200 target:dark:bg-yellow-600" -}}

History

2 rounds 3 comments

evan.jarrett.net submitted #1 2mo

diff

1 commit

expand

b522352a

appview/repo/fragments: improve diff copy behavior

expand 1 comment

oppi.li 2mo

wonderful, lgtm!

pull request successfully merged

evan.jarrett.net submitted #0 2mo

diff

1 commit

expand

edb91f4a

appview/repo/fragments: improve diff copy behavior

expand 2 comments

oppi.li 2mo

thanks for this PR!, the only issue with spans is that the background does not stretch all the way when content overflows:

evan.jarrett.net 2mo

this can be fixed with inline-flex on the outer div