BlockNote Docs特性实时协作

实时协作(多人文本编辑器)

让我们看看如何为你的 BlockNote 配置添加多人协作功能,实现用户之间的实时协作(类似于 Google Docs):

文本编辑协作

首页上试用实时演示

BlockNote 使用 Yjs 来实现这一点,你可以使用 withCollaboration 辅助函数进行设置:

import * as Y from "yjs";
import { WebrtcProvider } from "y-webrtc";
import { withCollaboration } from "@blocknote/core/yjs";
// ...

const doc = new Y.Doc();

const provider = new WebrtcProvider("my-document-id", doc); // 设置一个 yjs provider(如下文所述)
const editor = useCreateBlockNote(
  withCollaboration({
    // ...
    collaboration: {
      // 负责传输更新的 Yjs Provider:
      provider,
      // 将 BlockNote 数据存储在 Y.Doc 中的位置:
      fragment: doc.getXmlFragment("document-store"),
      // 此用户的信息(姓名和颜色):
      user: {
        name: "My Username",
        color: "#ff0000",
      },
      // 何时在协作光标上显示用户标签。默认设置为
      // "activity"(当光标移动时显示),也可以设置为 "always"。
      showCursorLabels: "activity",
    },
    // ...
  }),
);

withCollaboration 函数接受所有常规编辑器选项以及一个 collaboration 属性,并为你的编辑器配置实时协作。

Yjs Providers

当用户编辑文档时,会捕获一个增量变化(或称“更新”),并可以在你的应用用户之间共享。你可以通过设置 Yjs Provider 来共享这些更新。在上面的代码示例中,我们使用了 y-webrtc,它通过 WebRTC(和 BroadcastChannel)共享更新,但你也许想了解适用于生产环境的不同 provider。

  • Liveblocks 一套全托管 WebSocket 基础设施和持久化数据存储,适用于 Yjs 文档。包含 webhook、REST API 和浏览器开发工具,专为 Yjs 设计
  • PartyKit 运行在 Cloudflare 上的无服务器提供者
  • Y-Sweet 开源提供者,可完全托管在 Jamsocket 或你自有云环境
  • Hocuspocus 开源且可扩展的 Node.js 服务器,支持可插拔存储(可扩展至 Redis)
  • y-websocket 你可以连接到自己的 websocket 服务器的 provider
  • y-indexeddb 用于离线存储
  • y-webrtc 通过 WebRTC 传输更新
  • Matrix-CRDT 通过 Matrix 同步更新(实验性)
  • Nostr-CRDT 通过 Nostr 同步更新(实验性)

Liveblocks

Liveblocks 为 Yjs 提供托管后端。你可以通过下面的命令创建一个使用 Liveblocks 和 BlockNote 的功能完整示例项目(需要 Liveblocks 账户):

npx create-liveblocks-app@latest --example nextjs-blocknote --api-key

你也可以在在线演示中试用这个示例。

想要更简单的演示,可以查看这个例子,它遵循了 Liveblocks 的快速入门指南

如果想了解更多关于集成 Liveblocks 的信息,请查看他们为 BlockNote 提供的现成功能API 参考

Partykit

在开发阶段,你可以使用我们的 Partykit 服务器来测试协作功能。在下面的示例中,将 WebrtcProvider 替换为 YPartyKitProvider 即可:

// npm install y-partykit
import YPartyKitProvider from "y-partykit/provider";

const provider = new YPartyKitProvider(
  "blocknote-dev.yousefed.partykit.dev",
  // 为你的应用使用一个独特的名称作为“房间”:
  "your-project-name",
  doc,
);

想了解如何搭建自己的开发或生产服务器,请查看 PartyKit 文档BlockNote + Partykit 示例