协作

npm install @platejs/yjs

npm install @hocuspocus/provider

npm install y-webrtc

import { YjsPlugin } from '@platejs/yjs/react';
import { createPlateEditor } from 'platejs/react';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    YjsPlugin,
  ],
  // 重要：使用 Yjs 时跳过 Plate 的默认初始化
  skipInitialization: true,
});

import { YjsPlugin } from '@platejs/yjs/react';
import { createPlateEditor } from 'platejs/react';
import { RemoteCursorOverlay } from '@/components/ui/remote-cursor-overlay';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    YjsPlugin.configure({
      render: {
        afterEditable: RemoteCursorOverlay,
      },
      options: {
        // 配置本地用户光标外观
        cursors: {
          data: {
            name: 'User Name', // 替换为动态用户名
            color: '#aabbcc', // 替换为动态用户颜色
          },
        },
        // 配置提供者。所有提供者共享同一个 Y.Doc 和 Awareness 实例。
        providers: [
          // 示例：Hocuspocus 提供者
          {
            type: 'hocuspocus',
            options: {
              name: 'my-document-id', // 文档的唯一标识符
              url: 'ws://localhost:8888', // 您的 Hocuspocus 服务器 URL
            },
          },
          // 示例：WebRTC 提供者（可与 Hocuspocus 一起使用）
          {
            type: 'webrtc',
            options: {
              roomName: 'my-document-id', // 必须与文档标识符匹配
              signaling: ['ws://localhost:4444'], // 可选：您的信令服务器 URL
            },
          },
        ],
      },
    }),
  ],
  skipInitialization: true,
});

import { Plate } from 'platejs/react';
import { EditorContainer } from '@/components/ui/editor';

return (
  <Plate editor={editor}>
    <EditorContainer>
      <Editor />
    </EditorContainer>
  </Plate>
);

import React, { useEffect } from 'react';
import { YjsPlugin } from '@platejs/yjs/react';
import { useMounted } from '@/hooks/use-mounted'; // 或您自己的挂载检查

const MyEditorComponent = ({ documentId, initialValue }) => {
  const editor = usePlateEditor(/** 前面步骤中的编辑器配置 **/);
  const mounted = useMounted();

  useEffect(() => {
    // 确保组件已挂载且编辑器已就绪
    if (!mounted) return;

    // 初始化 Yjs 连接、同步文档并设置初始编辑器状态
    editor.getApi(YjsPlugin).yjs.init({
      id: documentId,          // Yjs 文档的唯一标识符
      value: initialValue,     // 如果 Y.Doc 为空时的初始内容
    });

    // 清理：组件卸载时销毁连接
    return () => {
      editor.getApi(YjsPlugin).yjs.destroy();
    };
  }, [editor, mounted]);

  return (
    <Plate editor={editor}>
      <EditorContainer>
        <Editor />
      </EditorContainer>
    </Plate>
  );
};

import React from 'react';
import { YjsPlugin } from '@platejs/yjs/react';
import { usePluginOption } from 'platejs/react';

function EditorStatus() {
  // 直接访问提供者状态（只读）
  const providers = usePluginOption(YjsPlugin, '_providers');
  const isConnected = usePluginOption(YjsPlugin, '_isConnected');

  return (
    <div>
      {providers.map((provider) => (
        <span key={provider.type}>
          {provider.type}: {provider.isConnected ? '已连接' : '已断开'} ({provider.isSynced ? '已同步' : '同步中'})
        </span>
      ))}
    </div>
  );
}

// 为连接事件添加事件处理器：
YjsPlugin.configure({
  options: {
    // ... 其他选项
    onConnect: ({ type }) => console.debug(`提供者 ${type} 已连接！`),
    onDisconnect: ({ type }) => console.debug(`提供者 ${type} 已断开。`),
    onSyncChange: ({ type, isSynced }) => console.debug(`提供者 ${type} 同步状态: ${isSynced}`),
    onError: ({ type, error }) => console.error(`提供者 ${type} 错误:`, error),
  },
});

type HocuspocusProviderConfig = {
  type: 'hocuspocus',
  options: {
    name: string;     // 文档标识符
    url: string;      // WebSocket 服务器 URL
    token?: string;   // 认证令牌
    wsOptions?: HocuspocusProviderWebsocketConfiguration; // 高级 websocket 配置（headers、协议等）
  }
}

{
  type: 'hocuspocus',
  options: {
    name: 'my-document-id',
  },
  wsOptions: {
    url: 'ws://localhost:8888',
    maxAttempts: 5,
    parameters: {
      // 请求参数
    }
  },
}

type WebRTCProviderConfig = {
  type: 'webrtc',
  options: {
    roomName: string;      // 协作房间名称
    signaling?: string[];  // 信令服务器 URL
    password?: string;     // 房间密码
    maxConns?: number;     // 最大连接数
    peerOpts?: object;     // WebRTC 对等选项
  }
}

interface UnifiedProvider {
  awareness: Awareness;
  document: Y.Doc;
  type: string;
  connect: () => void;
  destroy: () => void;
  disconnect: () => void;
  isConnected: boolean;
  isSynced: boolean;
}

const customProvider = new MyCustomProvider({ doc: ydoc, awareness });

YjsPlugin.configure({
  options: {
    providers: [customProvider],
  },
});

npm install y-webrtc
PORT=4444 node ./node_modules/y-webrtc/bin/server.js

{
  type: 'webrtc',
  options: {
    roomName: 'document-1',
    signaling: ['ws://your-signaling-server.com:4444'],
  },
}

{
  type: 'webrtc',
  options: {
    roomName: 'document-1',
    signaling: ['ws://your-signaling-server.com:4444'],
    peerOpts: {
      config: {
        iceServers: [
          { urls: 'stun:stun.l.google.com:19302' },
          {
            urls: 'turn:your-turn-server.com:3478',
            username: 'username',
            credential: 'password'
          }
        ]
      }
    }
  }
}

YjsPlugin.configure({
  options: {
    providers: [
      {
        type: 'hocuspocus',
        options: {
          name: 'secure-document-id',
          url: 'wss://your-hocuspocus-server.com',
          token: 'user-auth-token',
        },
      },
      {
        type: 'webrtc',
        options: {
          roomName: 'secure-document-id',
          password: 'strong-room-password',
          signaling: ['wss://your-secure-signaling.com'],
          peerOpts: {
            config: {
              iceServers: [
                {
                  urls: 'turns:your-turn-server.com:443?transport=tcp',
                  username: 'user',
                  credential: 'pass'
                }
              ]
            }
          }
        },
      },
    ],
  },
});