Collaboration

Collaborate with others in a single document.

功能

  • yjs 插件支持使用 slate-yjs 和 Hocuspocus 进行协作。
  • 默认情况下，远程光标不会渲染，除非你安装了远程光标覆盖并将其包含在配置中。
  • 光标渲染时稍微淡化，悬停时变为实色。使用 cursorOptions 中的 data 字段自定义显示名称和颜色。

Frontend

安装

npm install @udecode/plate-yjs

使用

import { YjsPlugin } from '@udecode/plate-yjs/react';
import { RemoteCursorOverlay } from '@/components/plate-ui/remote-cursor-overlay';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    YjsPlugin.configure({
      render: {
        afterEditable: RemoteCursorOverlay,
      },
      options: {
        cursorOptions: {
          autoSend: true,
          data: { name: 'A plate user', color: '#5AC990' },
        },
        disableCursors: false,
        hocuspocusProviderOptions: {
          url: 'https://hocuspocus.test/hocuspocus',
          name: 'test',
        },
      },
    }),
  ],
});

Editor Container

编辑器需要一个容器组件，确保光标覆盖正确：

export const EditorContainer = (
  props: React.HTMLAttributes<HTMLDivElement>
) => {
  const editor = useEditorRef();
  const containerRef = useEditorContainerRef();
 
  return <div id={editor.uid} ref={containerRef} {...props} />;
};

这个组件在 Editor 中可用。

后端

请参阅 Hocuspocus 文档 中的后端说明。

插件

YjsPlugin

Options

Collapse all

    处理光标的配置。这些选项传递给 withCursors 函数。

    Hocuspocus provider的配置。

    Yjs 集成的可选配置。这些选项传递给 withYjs 函数。

    是否禁用光标功能。

API

useYjsStore

State

Collapse all

    编辑器是否连接到 Hocuspocus 服务器。

    编辑器是否与 Hocuspocus 服务器同步。

withTYjs

一个高阶函数，用于将 Plate 编辑器与 Yjs 支持结合，允许实时协作编辑。

PlateYjsEditorProps

Attributes

Collapse all

    扩展 YjsEditorProps 和 CursorEditor.

YHistoryEditorProps

扩展 YjsEditorProps, YHistoryEditor.

YjsEditorProps

YjsEditor API.

CaptionColumn