could generate something like git diff unified format by diff-match-patch? #114

Activity

1. Lo-pez commented on May 17, 2022

   

   Lo-pez

   on May 17, 2022

   More actions

   Hey were you able to solve this?
2. christiankyte commented on Mar 29, 2023

   

   christiankyte

   on Mar 29, 2023

   More actions

   Was this solved?
3. liudonghua123 commented on May 29, 2023

   

   liudonghua123

   on May 29, 2023

   More actions

   any updates?
4. ghiscoding commented on Jun 13, 2024

   

   ghiscoding

   on Jun 13, 2024

   Last edited by ghiscoding

   More actions

   hey everyone, so I wanted to see if it's doable and after a little bit of research here and on the diff2html GitHub, I found this comment

       var dmp = new diff_match_patch();
       var a = dmp.diff_linesToChars_(firstDescribe, secondDescribe);
       var lineText1 = a.chars1;
       var lineText2 = a.chars2;
       var lineArray = a.lineArray;
       var diffs = dmp.diff_main(lineText1, lineText2, false);
       dmp.diff_charsToLines_(diffs, lineArray);
       console.info(diffs);
       let patchMake = dmp.patch_make(firstDescribe,diffs);
       let patchToText = dmp.patch_toText(patchMake);
   

   Then patchToText can be used for diff2html

   However, that is only solving only a portion of the problem, diff2html requires a Git diff format and that requires file a and b to be part of the git diff, if I simply add it as prefix then it works. It's a bit hacky but hey it works, so... :)

   import DiffMatchPatch from 'diff-match-patch';
   import { html, parse } from 'diff2html';
   
   function showTextDiff(cleanType?: string) {
     cleanType ||= cleanupType.value;
     const dmp = new DiffMatchPatch();
     const a = dmp.diff_linesToChars_(text1Ref.value, text2Ref.value);
     const lineText1 = a.chars1;
     const lineText2 = a.chars2;
     const lineArray = a.lineArray;
     const diffs = dmp.diff_main(lineText1, lineText2, false);
     dmp.diff_charsToLines_(diffs, lineArray);
     let patchToText = `diff --git a/file.txt b/file.txt
   --- a/file.txt
   +++ b/file.txt
   `;
   
     patchToText += dmp.patch_make(text1Ref.value, diffs);
   
     const diffHtml = html(patchToText, { drawFileList: true, matching: 'lines', outputFormat: 'side-by-side' });
   
     if (cleanType === 'semantic') {
       dmp.diff_cleanupSemantic(diffs);
     } else if (cleanType === 'efficiency') {
       dmp.diff_cleanupEfficiency(diffs);
     } else {
       // no cleanup
     }
   
     diff2HtmlText = diffHtml; // diff2html result
   }

   HTML Preview

   

   Conclusion

   So it works even if it's a bit hacky, if someone else find a better and more elegant way of doing it then please post your answer. Also another thing to note is that the text might need some escaping or decoding since we can see in the print screen that carriage return were convert to %0A, I would prefer to have diff2html detect this as a new line really, so it needs a bit of adjustment but at least it kinda work.