Yjs + Quill：快速實現支持協同編輯的富文本編輯器
大家好，我是前端西瓜哥，這次來看看 Yjs 如何幫助我們實現協同編輯能力的。
Y.js 是一個支持 協同編輯 的開源庫。只要我們將自己的數據轉換為 Y.js 提供的 Y.Array、Y.Map 類型，Y.js 就會自動幫我們做數據的一致性處理和同步。
一致性問題
協同編輯一個很棘手的問題是：多個用戶同時編輯產生的沖突要怎么處理，如何保證一致性？
比如兩個用戶同時往一個文本的末尾加上不同的字符，最終誰的字符在前，誰的字符在后？
目前業界有兩種方案，一個是 OT （Operational transformation）算法，是比較主流的一種解法。流行的開源解決方案是 ShareDB。
它的核心在于 Transform（轉換）：服務端接收兩個客戶端的對同一版本數據的原子操作行為，轉換出它們各自要做的不同操作，然后傳遞給各個客戶端并應用，最終讓它們的內容是一致的。
另一種是 CRDT（Conflict-free Replicated Data Type），中文就是 “無沖突復制數據類型”，主要被應用在分布式系統中，即可以不需要中心化服務器。流行的開源方案是 Yjs。
但 CRDT 需要傳輸更多的數據，有不小的內存和性能開銷，且相比 OT 被提出地更晚，學術研究相對較少，所以一開始算不上是主流。
然而隨著 Yjs 的出現并做了不少性能優化，CRDT 方案也逐漸流行了起來，越來越多新的協同工具選擇使用 Yjs 來作為數據一致性的解決方案。
Yjs 是基于操作的 CRDT，其原理簡單來說，就是記錄所有用戶的操作，這些操作會拼接到一個雙向鏈表中，并通過通用的算法保證確定的順序，最后所有客戶端都能得到相同的一條鏈表，最后得到的數據自然也是一致的。
Yjs + Quill：打造協同工具
我們來寫個 demo 感受一下 Yjs 的強大之處。
先用 vite 搭個普通的不帶框架的腳手架，這里我用的 pnpm，其他包管理工具也行。
pnpm create vite項目名為 yjs-quill-demo，選擇 Vanilla（不用框架的意思），然后選擇 JavaScript（如果你熟悉 TS，也可以選 TS）
接著是進入文件夾，安裝依賴，并運行。
cd yjs-quill-demo
pnpm install
pnpm run dev打開瀏覽器輸入控制臺輸出的鏈接，可以看到：
下面我們來安裝依賴。
首先是開源編輯器 quill 和它的插件 quill-cursors。這個插件可以展示一些其他用戶的光標的狀態。
pnpm add quill quill-cursors將 mian.js 文件原來的內容刪除，加上下面內容：
import Quill from 'quill';
import QuillCursors from 'quill-cursors';
import 'quill/dist/quill.snow.css'; // 使用了 snow 主題色
// 使用 cursors 插件
Quill.register('modules/cursors', QuillCursors);
const quill = new Quill(document.querySelector('#app'), {
modules: {
cursors: true,
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block'],
],
history: {
userOnly: true, // 用戶自己實現歷史記錄
},
},
placeholder: '前端西瓜哥...',
theme: 'snow',
});效果：
下面我們就要引入 Yjs，給 quill 加上協同編輯功能。
Yjs 官方提供了 y-quill 庫，通過它可以將 quill 數據模型和 Yjs 數據模型進行綁定。
pnpm add yjs y-quill追加 Yjs 相關邏輯：
import * as Y from 'yjs';
import { QuillBinding } from 'y-quill';
// ...
const ydoc = new Y.Doc(); // y 文檔對象，保存需要共享的數據
const ytext = ydoc.getText('quill'); // 創建名為 quill 的 Text 對象
const binding = new QuillBinding(ytext, quill); // 數據模型綁定ok，接下來就是要接上服務端，實現數據傳輸了。服務的提供者，Yjs 稱為 provider，大概可以翻譯為 “供應者” 的意思。
Yjs 官方提供了幾種 Provider：WebRTC、WebSocket、Dat。
這里我們用比較常見的 WebSocket。
pnpm add y-websocket代碼：
import { WebsocketProvider } from 'y-websocket';
// ...
// 連接到 websocket 服務端
const provider = new WebsocketProvider('wss://demos.yjs.dev', 'quill-demo-room', ydoc);
// 數據模型綁定，再額外綁上了光標對象
const binding = new QuillBinding(ytext, quill, provider.awareness);這里的服務器用的是 Yjs 提供的 demo 體驗用的服務器，因為一些喜聞樂見的原因，可能會連不上這個服務器。
然后你會發現，如果在同一瀏覽器打開兩個 tab，沒連上服務也能做協同編輯。這是因為 Yjs 會優先通過瀏覽器的同 host 共享狀態的方式進行通信，然后才是網絡通信。所以最好是打開兩個不同的瀏覽器做調試。
我們驗證一下。
左邊兩個 tab 頁來自同一個瀏覽器，右邊則是另一個瀏覽器。
當修改被我限速為 1 KB/s 的 tab 的編輯器內容時，來自同一瀏覽器的另一個 tab 頁立刻發生了變更（證明通信走的是本地），而另一個瀏覽器的 tab 則慢得多（說明走的網絡通訊）。
我們也可以自己在本地起一個服務器，做法是：
HOST=localhost PORT=1234 npx y-websocket對應著要改一下客戶端代碼中 ws 服務的地址：
const provider = new WebsocketProvider('ws://localhost:1234', 'quill-demo-room', ydoc);完整代碼
import Quill from 'quill';
import QuillCursors from 'quill-cursors';
import 'quill/dist/quill.snow.css'; // 使用了 snow 主題色
import * as Y from 'yjs';
import { QuillBinding } from 'y-quill';
import { WebsocketProvider } from 'y-websocket';
// 使用 cursors 插件
Quill.register('modules/cursors', QuillCursors);
const quill = new Quill(document.querySelector('#app'), {
modules: {
cursors: true,
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block'],
],
history: {
userOnly: true, // 用戶自己實現歷史記錄
},
},
placeholder: '前端西瓜哥...',
theme: 'snow',
});
const ydoc = new Y.Doc(); // y 文檔對象，保存需要共享的數據
const ytext = ydoc.getText('quill'); // 創建名為 quill 的 Text 對象
// 連接到 websocket 服務端
const provider = new WebsocketProvider('wss://demos.yjs.dev', 'quill-demo-room', ydoc);
// 數據模型綁定，再綁上光標對象
const binding = new QuillBinding(ytext, quill, provider.awareness);結尾
因為用了很多 Yjs 提供的模塊化的包，其實我們并沒有接觸到太多的實現細節，尤其是將數據綁定到 Yjs 提供的類型數據的實現。只能說是簡單體驗了 Yjs 配合 quill 實現協同編輯的效果。
