Visualize changes between 2 tiptap jsons

1

Hi, I want to diff 2 rendered versions of tiptap jsons,like green highlight for inserted and red for deleted contents like (snapshot-compare)extension in tiptap pro.This has to work with custom nodes also.Sharing my ideas to approach this:

  • Traverse both documents - The obvious way is to use some diffing library like diff-match-patch , json-diff or something to obtain text differences,but handling structural differences like complete node deletions/insertions are very tricky and difficult especially for documents with custom nodes and to make highlights,we need to wrap insertions/deletions with marks,which should be accurate and shouldnt break the json structure(making invalid tiptap json)
  • Comparing rendered HTML - This is kinda unreliable way ,but it works for some cases. The approach is to get rendered HTML for 2 versions and use a npm package for diffing it. But the issues are dynamic content not rendered,different screensize issues,etc..
  • Wrap insertions/deletions with Marks - This approach is to intercept transactions and wrap them with marks(green for insertions and red for deletions) ,we can capture deletions by invertStep() but the tricky part is with cursor misalignment and ghost nodes.lets assume that we can calculate cursor positions by getting deletedNode size and some offsets,but the main problem is during editing i dont wanna show deleted content with red background as it would be a bad user experience so lets use Display:none for parsing marks with delete tag,but for some cases like listItems,the content is acutally there (since marks is just kinda styling),so even though nothing is in the editor visually through css,the editor sees the content as present through json and wont let me delete the bullet,hence im getting empty bullet,and also some text nodes

@marijn and any other experts in here,How shall i approach this problem.another idea is get mappings and content through prosemirror-changeset and map them at end,but the offsets may differ as the document content is changed.Please share your solutions.

2

We create a custom text representation from the prosemirror document, use git to find the differences and then visualize this as another prosemirror document. Works quite well.

image
image1439×1179 60.8 KB

1 Like
3

Thanks for the response, it is possible through normalization and diffing, even i’ve tried normalizing my document into markdown, create html of 2 verisons and diff them using a npm package, it went well.But the goal is to maintain the structure as it is,for simple documents,these approaches will be fine,but i have custom nodes and re-structuring plain text back to custom nodes seems not practical! Thanks though!