Collaboration Editor do not work

[jeremieamstutz]

Description

I followed the guide to create a collaborative text editor, but the content is always empty and it's impossible to type. If the file do a hot reload (I don't reload the page manually), it works perfectly.

Plate version

49.1.13

Slate React version

1.1.0

[dosubot[bot]]

This is a known timing issue with collaborative editors using Plate and Yjs. If the editor initializes before Yjs content is loaded, Plate's normalization logic inserts an empty paragraph, making the editor appear empty and unresponsive until a hot reload resets the state.

To fix this, set skipInitialization: true in your Plate editor config and only call editor.getApi(YjsPlugin).yjs.init after the editor is mounted and Yjs has synced. This ensures Plate doesn't insert a default value before Yjs content arrives and avoids double-initialization or extra paragraphs. Make sure your Yjs provider isn't briefly presenting an empty doc on load. See more details and examples in this discussion: Plate collaborative editor initialization with Yjs.

If you still see issues, double-check that Plate isn't initializing with a default value before Yjs syncs. If you can share your provider setup or initialization code, I can help spot any other problems.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[dosubot[bot]]

This is a known timing issue with Plate collaborative editing and Yjs. Plate's normalization can run before Yjs finishes syncing, which leaves the editor empty and uneditable until a hot reload resets the state. To fix this, set skipInitialization: true when creating your editor, and only call editor.getApi(YjsPlugin).yjs.init after your Yjs provider signals it's ready (like after onConnect or onSync). This ensures Plate doesn't insert an empty paragraph before Yjs loads the real content. You should also make sure your editor and provider are memoized (e.g., with useMemo or useRef) so they're not recreated on every render.

Example pattern:

const editor = useMemo(() => createPlateEditor({ /* ... */, skipInitialization: true }), []);
useEffect(() => {
  if (yjsProviderIsReady) {
    editor.getApi(YjsPlugin).yjs.init({ id: docId, value: initialValue });
  }
  return () => editor.getApi(YjsPlugin).yjs.destroy();
}, [editor, yjsProviderIsReady, docId, initialValue]);

See more details and discussion here and the Yjs plugin docs.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}