Leading whitespace when selecting / copying code in Chrome

[campersau]

Step 0: Describe your environment

• OS: Windows 10
• diff2html version: 3.1.14
• Using diff2html directly or using diff2html-ui helper: the one the website is using
• Extra flags: default settings used by website

Step 1: Describe the problem:

When selecting and copying code from diffs there is always an additional leading whitespace.
I have tracked down the issue to the template files which contain whitespace between the different HTML tags.

For example when I remove all the spaces and linebreaks from generic-line.mustache then it works correctly.

<tr><td class="{{lineClass}} {{type}}">{{{lineNumber}}}</td><td class="{{type}}"><div class="{{contentClass}} {{type}}">{{#prefix}}<span class="d2h-code-line-prefix">{{{prefix}}}</span>{{/prefix}}{{^prefix}}<span class="d2h-code-line-prefix">&nbsp;</span>{{/prefix}}{{#content}}<span class="d2h-code-line-ctn">{{{content}}}</span>{{/content}}{{^content}}<span class="d2h-code-line-ctn"><br></span>{{/content}}</div></td></tr>

(Maybe the d2h-code-line-prefix needs some more padding then e.g. padding-right: 7px;)

Handlebar.js has a special syntax specifically for that: https://handlebarsjs.com/guide/expressions.html#whitespace-control
But it does not work with hogan.js...

The issue came up in FredrikNoren/ungit#1430 by @simonwiles which contains a CSS only solution for this problem.

Another way to fix this is using :before and content: attr(data-prefix) CSS styles for the prefix instead of a separate HTML element like GitHub does.

Steps to reproduce:

1. Go to https://diff2html.xyz/demo.html?matching=none&matchWordsThreshold=0.25&maxLineLengthHighlight=10000&diffStyle=word&renderNothingWhenEmpty=0&matchingMaxComparisons=2500&maxLineSizeInBlockForComparison=200&outputFormat=line-by-line&drawFileList=1&synchronisedScroll=1&highlight=1&fileListToggle=1&fileListStartVisible=0&smartSelection=1&diff=https://github.com/rtfpessoa/diff2html/pull/106
2. Select and copy (multiple) lines (e.g. line 105 from the README.md file)
3. Paste them in a text editor

diff example:

see URL above

Observed Results:

• What happened? This could be a description, log output, etc.

Additional leading whitespace:

 ## Diff2HtmlUI Helper

Expected Results:

• What did you expect to happen?

No, leading whitespace:

## Diff2HtmlUI Helper

Relevant Code:

Code used by the website (see URL above).

[rtfpessoa]

Wow, this is such a weird issue.
I do not understand why HTML indentation would influence what you select 🤯

After thinking a bit about this, the CSS option seems better since that way people can use customised templates and all works fine, even if they do not put them all in the same line.

What is your opinion?

[campersau]

For browsers there is no concept of "indention" spaces. E.g. these are all visually the same

<span>Hello</span> <span>World</span>

<span>Hello</span>
 <span>World</span>

Which of the two CSS options are you referring to? I mentioned two :)

• Prevent selection of leading space in diffs when copying and pasting FredrikNoren/ungit#1430
• :before and content: attr(data-prefix) like GitHub diffs

[rtfpessoa]

While reading I mixed both thinking they were the same 🙃

After doing a quick implementation seems like both are not amazing.

The first one solves the problem with only CSS changes but it makes selection much harder since you can only start on lines where there is content.

The second only seems to work if the span with class d2h-code-line-ctn is in one line like your first suggestion.

Seems like a decision between tool ux or end user ux.
I maybe would go with your initial suggestion for a better end user ux.

What do you think? Is there something I am missing?

Both options here:

• https://github.com/rtfpessoa/diff2html/compare/github-style-prefixes-and-fix-selection?expand=1
• https://github.com/rtfpessoa/diff2html/compare/only-allow-selection-line-content?expand=1

[campersau]

Yes, the first option also requires changes to the template. Not sure how other dependencies are using this lib but that might break them.

For the second option I thought with the two width: 100% the selection felt the same as before. Will recheck that tomorrow.

[simonwiles]

The first one solves the problem with only CSS changes but it makes selection much harder since you can only start on lines where there is content.

I think this shouldn't be a problem because of the rules applied to .d2h-code-line-ctn (see https://github.com/FredrikNoren/ungit/pull/1430/files#r502941174).

[campersau]

@simonwiles yes, see #348 (comment)

[rtfpessoa]

Released in version 3.1.15