Collaborative plugin

[Machine-sjtu]

Does plate support online collaborative editing?

[dylans]

Yes, though it very much depends which collab system you use. We use slate-yjs with slate and plate in our app.

[Machine-sjtu]

Thanks for your advice. We will consider using it.

[oskar-szwajkowski]

@dylans could you provide info about how you're injecting editor field into Plate component?

I mean how you are creating plate editor with slate-yjs plugins. I am struggling with getting it working with withYHistory , but with pure Slate it just works

[sbavoma]

I am also facing issue with injecting editor field in plate
How can we use the withYjs api similar in yjs in plate?
@dylans

[zbeyens]

@sbavoma See the existing plugin

[sbavoma]

I see there is support for hocuspocus server but not for yjs websocket https://github.com/yjs/y-websocket
@zbeyens

[zbeyens]

PR: #2487

[Sammaiah-Guguloth]

Hi @dylans , @zbeyens , @oskar-szwajkowski , @sbavoma , and others,

We're currently integrating collaboration into a Plate.js editor using the built-in Yjs plugin and a Hocuspocus server, following the Plate documentation.

Our setup is roughly:

// Hocuspocus Server
new Server({
  extensions: [
    new Database({
      fetch: async ({ documentName }) => {
        const doc = await DocumentModel.findById(documentName);
        return doc?.yjsState
          ? new Uint8Array(doc.yjsState.buffer)
          : null;
      },

      store: async ({ documentName, state }) => {
        await DocumentModel.findByIdAndUpdate(documentName, {
          yjsState: Buffer.from(state),
        });
      },
    }),
  ],
});

// Plate Editor
const editor = usePlateEditor({
  plugins: [
    YjsPlugin.configure({
      options: {
        providers: [
          {
            type: 'hocuspocus',
            options: {
              name: documentId,
              url: WEBSOCKET_URL,
              token: authToken,
            },
          },
        ],
      },
    }),
  ],
});

useEffect(() => {
  editor.getApi(YjsPlugin).yjs.init({
    id: documentId,
    value: [{ type: 'p', children: [{ text: '' }] }],
  });

  return () => {
    editor.getApi(YjsPlugin).yjs.destroy();
  };
}, [documentId]);

The issue is that as soon as the Yjs plugin is enabled, the editor does not render correctly. Without Yjs everything works normally. The WebSocket server starts successfully and authentication appears to succeed.

Has anyone encountered a similar issue or can point out anything obvious that might be missing from this setup? Any minimal working examples or debugging suggestions would be greatly appreciated.

Thanks!