React Tiptap Collaboration plugin and connecting to an existing room error

Show
1

I’ve been able to get things to work when I first run my code.

After I make the first change, while using hot reloads in VSC or Code Sandbox, it break because it tries to create a new connection to the same room. I’ve seen some other comments about this, and the need to “destroy” the provider, but all of my attempts have been unsuccessful. I’ve tried storing the ydoc and provider in state, declaring them in useEffect, or useMemo but none of it works.

To make the code sandbox throw the error, make a small code change and it’ll break. Then I have to change the room name to get it to work again.

Any suggestions how to do the following would be most welcome

  1. Get it to reconnect to the room, or how to successfully destroy and create the room
  2. Understand what from the ydoc I should be sending to the server to save and how
  3. Should I be storing the JSON instead of the HTML I’ve been storing?

Background: I want an author to be able to write a chapter, and I want any reader or the author to see new comments when they come in, in real time. Readers and authors can comment. Only the author can add text. I’m using react js and firebase firestore. Any suggestions or gotchas to watch out for in my attempts to do this would be much appreciated.

2

Personally, I would disable hot-reload of components for these kinds of projects.

You might also solve the problem by destroying the editor binding and the provider whenever the component is destroyed. Alternatively, you could use global variables to check whether an editor bindings or provider already exists.

  • Understand what from the ydoc I should be sending to the server to save and how

You should persist the Yjs document as a document update: Document Updates | Yjs Docs
Ideally, you store incremental updates. However, you can also just sync the whole document whenever something changes. This is part of the beauty of a CRDT.

  • Should I be storing the JSON instead of the HTML I’ve been storing?

Maybe I don’t understand the question. You can store the JSON / HTML alongside the Yjs document (update format). However, the Yjs document should always be the source of truth. If you store the JSON/HTML instead of the Yjs document, the clients won’t be able to sync - they will just overwrite each other.

1 Like
3

Thank you for taking the time to respond @dmonad . I appreciate your kindness in doing so. I was trying to manage connections as the user swapped between chapters (each with its own room) and keep trying to store the provider and doc in state. Sticking it in a global variable array and checking that as they moved around chapters worked. It also got rid of most of the hot reload issues.

1 Like