Add handling of big texts

[giovanni-bellini-argo]

rn the component is really slow or even crashes when handling large texts.

i use it to compare network devices configurations and one of them is over 11.000 lines but i can't seem bo be able to render it nicely.

would be a nice enhancement adding the handling of such texts

[TatyanaVl]

We have the same request

[Aeolun]

Do you have examples of the text you would like to compare?

[Aeolun]

I've tested this with text up to 10MB recently, and I didn't have any significant issues rendering that. Until I get more information on what exactly constitutes too 'big' I'm going to say that's an acceptable size.

If you want me to look at this again, please provide an example of what causes you issues.

[Aeolun]

I'm also happy to accept a PR with the changes that make it faster for your use case (as long as it doesn't break anything for others)

[yairEO]

We at my company also have a terrible experience with this package when rendering big diffs.

I've tested this with text up to 10MB recently

The size is not the issue but the length of each line of code is. some lines can get very very long and react-diff-viewer-continued does not have a separate scrollbar for each side of the diff, which is a must-have for such cases, since we want to fit both compared code (diffs) side-by-side within a rendered area and the way react-diff-viewer-continued currently renders the output HTML makes it impossible.

I'm afraid a complete re-write of the output DOM is a must for this component to be useful for long texts...

Here is a video I've made (blurred the code on purpose). In the video you can see long text cannot be compared side-by-side because there is only one horizontal scrollbar and not 2 scrollbars, one per side.

This makes side-by-side comparison impossible because ~80% of the code is out-of-view.

https://github.com/user-attachments/assets/b744c675-dbed-40fb-a6c7-12fe8c9e6823

[Aeolun]

@yairEO I see, yeah, that's a use case that's not really covered by the way it renders. I tried to split the rendering into two separate divs before, but it caused more issues with alignment that the current table based layout doesn't have. However, it doesn't really work when you have those massive lines.

I'm curious why the code doesn't reflow there though. Might need to add a new example to test.

[yairEO]

I will replace this library with a much better one I've found:

https://github.com/MrWangJustToDo/git-diff-view

[Aeolun]

@yairEO Go for it. If that works better for you I'm not stopping you.