Allow line breaks in side-by-side view

[jung-kim]

Allow line breaks in side-by-side view to see the code without the need to scroll horizontally.

Check https://github.com/mohanapreeya/diff2html for an example.

---

Thank for a quick response on #97 and we do have word wrap working in default view but not in side by side view. Wordwrap view has always been challenging in side by side view but I figure I would use this time to describe the problem.

Side by side view with wordwrap is challenging because when word is wrapped in one table, that height needs to be applied to another table. For example, in below right table's words are wrapped and caused increase in row height but it cannot be easily be applied to left table as they are separate table.

Will it be easy to place them in a same table so we can easily do this without JS? I feel like this will not be a trivial change and I think this maybe not be a critical issue.

[rtfpessoa]

That is probably the biggest layout problem. Even for the line-by-line view it is hard to get the breaks correctly.

For the side-by-side, having only one table, I am not sure if you can make the widths and the overflows work, and even harder to have horizontal scroll working.

If you have any suggestions. I can take a look, but this is quite difficult.

[rtfpessoa]

Related to #86

[thinkpozzitive]

@codingtwinky what changes did you make in order to get "word wrap working in default view"? Can you show me an example?

[mohanapreeya]

I have solved this issue in my worspace with some new template files and code changes. I would like to contribute my changes.

[rtfpessoa]

@mohanapreeya that would be nice. Can I check the working version somewhere?

[mohanapreeya]

I have a temporary output in this fork https://github.com/mohanapreeya/diff2html.git. You can view the output in demo page. Source code changes are in the same repository.

[hungdev]

@jung-kim could you tell me how to break word like your image? i don't need make it side by side. please tell me.

[jung-kim]

You mean wordwrap?

[hungdev]

@jung-kim yes, which class should i override overflow-wrap: break-word;? or how do i do to make like your image?

[jung-kim]

I'm bit confused on what you mean by "like your image". I presume you mean the green text on the right side and if that is correct break-word is the correct one.

[hungdev]

@jung-kim no, my mean break the work if the sentence too long. look at the online example: https://stackblitz.com/edit/react-em2guv i dont want to horizontal scroll, i want to break line.

[jung-kim]

Green text on the right side is the one with line break isn't it? Either way, pick whatever settings within wordwrap that can help you

[zabbixfan]

I really need this feature,please

[robertwalsh0]

Not sure if this works in side-by-side but in line-by-line you can get the lines to wrap by changing the following css

    .d2h-code-line, .d2h-code-line-ctn {
      white-space: normal;
    }

[ccadek]

@robertwalsh0 This CSS does work in side-by-side view as well.

[rtfpessoa]

I cannot replicate this, can you provide a working example?

[NL33]

New to diff2html. It seems awesome. Thanks for the great work putting it together over the years.

Is there currently a working way to have text wrap with any of diff2html's formats?

I note that if I use diff2html on a diff, without including the mandatory html resource inputs:

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />

<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>

Then the resulting display from this code:

const Diff2html = require('diff2html');
const diffJson = Diff2html.parse([DIFF STRING TO BE DISPLAYED];
const diffHtml = Diff2html.html(diffJson, { drawFileList: true  });
document.getElementById('showTheDiff').innerHTML = diffHtml

Shows the changes with the text word-wrapped in my app. Of course, it doesn't have the color highlighting that the mandatory html resource inputs have, but I wonder if I can just add that with some css manually.

[rtfpessoa]

Is there currently a working way to have text wrap with any of diff2html's formats?

No, I could not find a way that does not break something else.

[mensfeld]

@rtfpessoa could you point out what were the problems, I did really bad POC but this looks sooo good (not side by side):

[rtfpessoa]

@mensfeld the problem is in the side-by-side diff. Can you make that work for side-by-side too?

[mensfeld]

@rtfpessoa I can give it a shot in 1-2 weeks but I'm not an expert and my solution is rather clumsy.

[donaldpipowitch]

Not sure if this works in side-by-side but in line-by-line you can get the lines to wrap by changing the following css

    .d2h-code-line, .d2h-code-line-ctn {
      white-space: normal;
    }

Thanks for the hint. I got even better results with this as leading whitespace in a line will be preserved:

     .d2h-code-line, .d2h-code-line-ctn {
       white-space: pre-wrap;
     }

[skivol]

Taking ideas from this thread (thanks for those :) ) and also overriding original "width: 100%" in some classes (which probably doesn't work well inside table cells, in combination with padding):

.d2h-code-line-ctn {
    white-space: normal;
}
.d2h-code-line, .d2h-code-side-line, .d2h-code-line-ctn {
    width: revert;
}

to avoid overflow problems like on the image below:

And things seem to look quite good 👍

[rtfpessoa]

@skivol do you think you could send a full spec with all the changes required to get this to work in both side-by-side and line-by-line?

[skivol]

@rtfpessoa you mean the full source code of the html template which I used for the purpose (with css styles which were mentioned in the comment above) ? Can do that, but not sure if the quality of the results is sufficient for general usage (specifically in regards to the alignment of the lines to the left and right which is a bit worse when wrapping the lines, but the benefit is that everything is visible without the need to scroll horizontally).

I guess one could try to display both sides in one table (possibly with rowspan for changesets which differ in number of rows) in an attempt to be able to do the wrapping and keep the alignment 🤔

[rtfpessoa]

Ahh, ok. That not needed

[abelpz]

@rtfpessoa is there an open PR on this? I got it working with some CSS changes.

[rtfpessoa]

👋 @abelpz no, I could never get it working properly.

If you got it working in both ways, would be good if we could offer both options (with and without line breaks) maybe by applying a different css classes.

[abelpz]

@rtfpessoa it does work for both side-by-side and line-by-line, I could try to add that if you want, this is what I propose:

• Add one config option to set the default mode: wordWrap: true
• Add a button somewhere in the UI to toggle this feature.

If you point me to the files I should look at to add this, I can make a PR. Or I could just share the CSS, and someone else can give it a try.

[rtfpessoa]

I am not sure this can be done with a single file change.

The code starts in diff2html.ts. You need to add the css in diff2html.css and then somehow apply the class change when rendering maybe by passing the boolean to the templates.

You can test if it works by running yarn validate and then opening the docs/demo.html file generated which will use the code you changed.

[jsonmorris]

Or I could just share the CSS, and someone else can give it a try.

@abelpz any way you could provide the CSS for defining the table width and word-wrap correctly for Side-by-side diffs?

[jsonmorris]

I achieved the wrap I needed for side-by-side diffs using the following CSS. Not sure if this breaks line-by-line, but looks like there are solutions for that above.

.d2h-code-line-ctn {
    white-space: pre-wrap;
    word-break: break-all;
}