Skip to content

Yjs快速上手

安装依赖时警告:

在安装依赖的时候,可能出现如下的警告:

Ignored build scripts: esbuild.

Run “pnpm approve-builds” to pick which dependencies should be allowed to run scripts.

这个警告是 pnpm 从 v8 开始引入的新特性:构建脚本安全机制

出于安全考虑,pnpm 默认会忽略某些依赖包的构建脚本(build scripts),比如 esbuild,除非你明确允许它们运行。

这是为了防止依赖包在安装时偷偷执行恶意代码,比如一些 postinstall 脚本可能会做:

  • 下载远程二进制
  • 修改本地文件
  • 甚至执行你不希望执行的 shell 命令

所以 pnpm 现在默认屏蔽这些行为,只有你“批准”的包才允许运行构建脚本。

安装依赖:

Terminal window
pnpm add quill quill-cursors yjs y-quill y-websocket

依赖说明:

  • quill:Quill 是一个开源、模块化的 WYSIWYG 富文本编辑器,支持格式化文字、插入图片、列表、代码块等。

    • what you see is what you get:所见即所得
  • quill-cursors:这个库扩展了 Quill,使其支持在协同编辑中显示多个用户的“光标位置”和“选中区域”,通常会以彩色的虚线框或用户名标签表示。

  • yjs:Yjs 是一个高性能的 CRDT 库,可以让多个用户在没有冲突的情况下协同编辑共享数据。

  • y-quill:这个库是 Yjs 提供的绑定器(binding),可以把 Quill 的编辑器内容和 Yjs 的共享文档(Y.Text)同步起来。从而实现实时协同富文本编辑。

  • y-websocket:y-websocket 提供了一个 WebSocket 客户端和服务器端实现,用于在多用户之间同步 Yjs 文档数据,从而保持文档在所有客户端之间的实时一致性。

Yjs 会优先通过浏览器同 host 共享状态的方式进行通信,然后才是网络通信。因此一开始即便 websocket 没有连接上,同一个浏览器的两个 tab 是可以进行协同的。

整体架构如下:

浏览器 A 浏览器 B
│ │
▼ ▼
Quill 编辑器 Quill 编辑器
│ │
▼ ▼
y-quill y-quill
│ │
▼ ▼
Yjs (y.Doc) Yjs (y.Doc)
│ │
└───────▶ WebSocket ◀───────┘
(y-websocket)

-EOF-