createPatch always show second file at the end instead of the beginning with html2diff

[ghiscoding]

hello, I am using jsdiff with createPatch() so that I can use it with html2diff for a documentation project, but the resulted patch always seem to append the 2nd file diff (right side) to the end of the patch. This makes the viewing not exactly great for the end user since we have to scroll to either the middle or the end of the file to see the diff. If I use { newlineIsToken: true, ignoreWhitespace: true, } then it works as I expected and compare from the first character but I lose all the new lines, so it's even worst on the UI perspective. This is slightly similar to issue #254 , so I thought it might be because of newline but it doesn't change anything if I had or remove newline (unless I make it all 1 line then yes of course it works but it's not very useable)

Here's a codepen of this https://codepen.io/ghiscoding/pen/wvLpRQd?editors=1000

and below is an animated of the extra scroll that is unwanted, I really wish it could compare the diff against the first line instead of in the middle (or the end sometime) of the file. Is there a better way to make it compare from the beginning and have a better unified patch?

the # symbol is the same on the first line of both files, so why doesn't it compare from the top but rather in the middle?

[ExplodingCabbage]

The behaviour you take issue with here isn't actually anything to do with jsdiff. If you log the patch that jsdiff outputs in your Codepen example, you'll see it looks like this:

Index: abc
===================================================================
--- abc 
+++ abc 
@@ -1,9 +1,1 @@
-# System
-The voltage selection is used in conjunction with the SCCR rating to determine the available main circuit breakers and branch circuit breakers to meet the required application.
-208Y/120 VOLTS AC 3 Phase 4 Wire 60 Hertz
-240/120 VOLTS AC 3 Phase 4 Wire Delta 60 Hertz
-480Y/277 VOLTS AC 3 Phase 4 Wire 60 Hertz
-600Y/347 VOLTS AC 3 Phase 4 Wire 60 Hertz
-240 VOLTS AC 3 Phase 3 Wire 60 Hertz
-480 VOLTS AC 3 Phase 3 Wire 60 Hertz
-600 VOLTS AC 3 Phase 3 Wire 60 Hertz
\ No newline at end of file
+# General Requirements
\ No newline at end of file

Nothing in the patch itself hints at which particular lines to position side by side when rendering the deletions and insertions alongside each other. The decision to pair up the +# General Requirements insertion with the -240 VOLTS AC 3 Phase 3 Wire 60 Hertz deletion is being made entirely by html2diff, not by jsdiff.