Collaboration

Collaborate with others in a single document.

Features

Frontend

Installation

npm install @udecode/plate-yjs

Usage

import { YjsPlugin } from '@udecode/plate-yjs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    YjsPlugin.configure({
      options: {
        hocuspocusProviderOptions: {
          url: "https://hocuspocus.test/hocuspocus",
          name: "test",
        },
      },
    }),
  ],
});

Backend

Follow the backend instructions in Hocuspocus docs.

Plugins

YjsPlugin

Options

Collapse all

    Configuration for handling cursors in the editor. These options are passed to the withCursors function.

    Configuration for the Hocuspocus provider.

    Optional configuration for the Yjs integration. These options are passed to the withYjs function.

    A flag indicating whether to disable the cursor feature in the editor.

API

useYjsStore

State

Collapse all

    A flag indicating whether the editor is connected to the Hocuspocus server.

    A flag indicating whether the editor is synced with the Hocuspocus server.

withTYjs

Higher-order function that wraps a Plate editor with Yjs support, allowing for real-time collaborative editing.

PlateYjsEditorProps

Attributes

Collapse all

    Extends YjsEditorProps and CursorEditor.

YHistoryEditorProps

Extends YjsEditorProps, YHistoryEditor.

YjsEditorProps

YjsEditor API.

CaptionColumn