Tiptap (prosemirror) + Y.js state binding issues?

Show
1

I’m mostly working off of code examples and trying to understand the various libraries. If I am asking this question in the wrong place, I would appreciate being redirected. I have a codesandbox demo here.

My end goal is to develop a collaborative editor with annotations working off of the demo by Hans Pagel.
Generally, it works. However, you’ll see a few errors.

  1. “Cannot read properties of null (reading ‘matchesNode’)” error that happens on load - I’m struggling to debug this issue and I’m hoping someone might have some insight.
  2. In the codesandbox console, you’ll see a “binding error” message. This is coming from the createDecorations function in the extension file AnnotationState file. When I tried to use Hans’ code, without changes, it would sometimes break because the ySyncPluginKey binding value is undefined or null which led to no decorations being loaded at start… somehow I added something that is now making the annotations load at start, but I have no idea how. Previously, I had to add one new annotation then the old ones would start showing up. I’m currently using localStorage to simulate saving and loading yjs data.

Any help would be greatly appreciated.

2

Hi @jedgrant,

This seems like an issue with TipTap or with the code in general. Sorry, I can’t debug that much code for you. My recommendation is to start small with a working demo and then add more features (e.g. the comment feature, or the persistence to localStorage) until you find a concrete issue that you need help with.

Something immediately popped into my eyes:

const { content } = JSON.parse(existingData);
const binaryEncoded = toUint8Array(content);
Y.applyUpdate(ydoc, binaryEncoded);

You can’t JSON-encode/parse a Uint8array. The Uint8Array will be transformed to a normal Array, and then you can’t decode the document anymore with Y.applyUpdate. When you store the document in localStorage, you should encode it to base64 first. There is a section about it in the Yjs documentation: Document Updates - Yjs Docs