Prosemirror-versions but for TipTap

1

I am using TipTap rather than pure ProseMirror to utilise their hocuspocus server, comments extensions… and I’ve hit a wall for weeks trying to implement the diff view between two snapshots which is provided in prosemirror-versions.

I believe that my implementation is exactly the same as what is provided in the source code, however for some reason, any node with ychange active simply gets its content emptied. The node gets highlighted correctly if it’s been added or removed, but the content is gone.

I’ve recreated my code into this Sandbox: https://codesandbox.io/p/devbox/tiptap-versions-x3t2xg?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A20%2C18

Things to note:

  • I am using a modified collaboration extension rather than the one provided by TipTap, as it seems that injecting PermanentUserData is required for the diff view.
  • I am using a modified paragraph extension as well, to include the rendering of ychange.
  • In my real implementation, snapshots would be provided by the server-side, collaboration cursors would be on… and much more.

What is currently happening

Let’s test by typing

hello, this is the first line.
Second line

Click Snapshot. Then add a third line.

This is the third line.

Click Snapshot. Now choose snapshot 1. This would show:

image

The actual contents of the editor would be:

{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "attrs": {
        "ychange": null
      },
      "content": [
        {
          "type": "text",
          "text": "hello, this is the first line."
        }
      ]
    },
    {
      "type": "paragraph",
      "attrs": {
        "ychange": null
      },
      "content": [
        {
          "type": "text",
          "text": "Second line"
        }
      ]
    },
    {
      "type": "paragraph",
      "attrs": {
        "ychange": {
          "user": "You",
          "type": "added",
          "color": {
            "light": "#ecd44433",
            "dark": "#ecd444"
          }
        }
      }
    }
  ]
}

Where you can see that for the third paragraph, the contents are undefined. The same behaviour would be seen regardless of input, whether addition or deletion, the contents are always undefined.

What I expect to see

The contents to exist on nodes that had their content changed.

What I investigated

I checked all the holes (0) in renderHTML functions and I couldn’t find a problem. Checked attrs on the nodes, but they don’t really have much to do with it.

Is there an underlying problem with TipTap? Is my code missing?

I’d appreciate all help that can be provided.

P.S: Apologise for posting this on Prosemirror community - but TipTap’s community does not seem to go into advanced Prosemirror topics.