Docs
Collaboration

Collaboration

Collaborate with others in a single document.

Features

Frontend

Installation

npm install @udecode/plate-yjs

Usage

import { createComboboxPlugin } from '@udecode/plate-combobox';
import { createMentionPlugin } from '@udecode/plate-mention';
 
const plugins = [
  // ...otherPlugins,
  createYjsPlugin({
    options: {
      hocuspocusProviderOptions: {
        url, // hocuspocus url
        name, // room name
      },
    },
  }),
];

Backend

Follow the backend instructions in Hocuspocus docs.

API

createYjsPlugin

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.

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 (YjsEditorProps), allowing for real-time collaborative editing.

CursorEditorProps

Extends YjsEditorProps and CursorEditor.

PlateYjsEditorProps

Attributes

Collapse all

    Extends CursorEditorProps.

YHistoryEditorProps

Extends YjsEditorProps, YHistoryEditor.

YjsEditorProps

YjsEditor API.