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

[leoswing]

I was wonder how could diff-match-patch generate a unified formate, so that we could use this unified formate to generate a beautiful diff side-by-side using [diff2html]https://github.com/rtfpessoa/diff2html

For now, the text string generated by method patch_toText, could not be parsed because it's not a standard formate like what git diff and linux diff command diff -u -N file1 file2.

Could anyone be helpful and tell me how to solve this issue? Much appriciated if anyone could help~

[Lo-pez]

Hey were you able to solve this?

[christiankyte]

Was this solved?

[liudonghua123]

any updates?

[ghiscoding]

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.