Diff shows too much when the change was just whitespace

[cellio]

meta:295155

A post was edited to add a newline to the last paragraph and then add another paragraph. Both paragraphs are highlighted in the diff, but only the newlines and the new text are actually different. Our diffs are hard to scan already; can we do anything to shrink the splash zone for cases like this?

[MoshiKoi]

IMO highlighting the entire paragraph isn't great in general. For instance, this happens even if you add a single word.

We underline the actual changes within the paragraph - would it be better to simply restrict highlighting to only the actual change?

[cellio]

I agree -- highlighting all and only the actual diffs would be far superior.

[MoshiKoi]

Doing a bit of digging, we don't actually currently control the generation of the HTML. We just rely on Diffy's default.

qpixel/app/views/post_history/_diff.html.erb

Lines 6 to 14 in cf8d845

	<% diff = Diffy::SplitDiff.new(before, after, format: :html) %>
	<div class="diff-section">
	<div class="diff-old is-changed raw-markdown">
	<%= raw(diff.left) %>
	</div>
	<div class="diff-new is-changed raw-markdown">
	<%= raw(diff.right) %>
	</div>
	</div>

In theory, if we want to just get rid of the highlighting, we could simply unset the background color of the ins and del elements here, but it's a bit of a hack since the elements are still there. A more complete solution might be to implement HTML generation ourselves, but that's more of a pain and maintenance burden.

qpixel/app/assets/stylesheets/utilities.scss

Lines 253 to 265 in cf8d845

	del,
	ins {
	text-decoration: none;
	overflow-wrap: break-word;
	}
	del > strong {
	text-decoration: line-through;
	}
	ins > strong {
	text-decoration: underline;
	}