如何像 Google 文檔一樣在 quill 編輯器中執行跟蹤更改？

Question

---

我已經通過使用@teamwork/sharedb 和@teamwork/sharedb-mongo 適配器在后端NodeJS 中存儲更改，在quill 中實現了協作編輯。 但是，對於我們如何像谷歌文檔建議模式一樣實時顯示跟蹤變化並添加評論功能，我仍然處於兩難境地？

---

Answer 1

一年后，我將概述我們迄今為止的發現：

帶有 OT 的 quill js 方法

我們嘗試使用 QuillJS 實現跟蹤更改/建議，並且取得了相對較大的進展。 但最終它並沒有真正起作用，因為 OT（操作轉換，用於同步更改的格式）不支持分層結構。 CKEditor 的團隊更改了 OT 以支持這一點。 但不幸的是，這似乎需要做很多工作，並且他們的代碼已關閉（ https://ckeditor.com/blog/Lessons-learned-from-creating-a-rich-text-editor-with-real-time-collaboration/ ）。 谷歌也用OT解決了它，但他們的代碼也沒有開放。 因此，據我所知，到目前為止，還沒有開源解決方案可以使用 html 解決跟蹤更改/建議。 而且似乎沒有人願意這樣做，因為努力似乎非常高。 所以我們的結論是：我們停止了這種方法。

一段時間以來，我們只是處理其他問題，而將編輯器放在一邊（在我們的項目中要做的其他事情太多了）。 但就在最近，我們開始了第二種方法，它仍處於起步階段，但看起來很有希望。

前鏡方法

Prosemirror 也有相對定位格式，不過不是 OT，他們叫step 。 這似乎更靈活，Prosemirror 的 doc 結構類似於 html 文檔的 DOM 結構。 這里介紹一下（ https://marijnhaverbeke.nl/blog/collaborative-editing.html ）。

對於 Prosemirror，已經有一些解決跟蹤更改/建議問題的方法。 如果您在此站點上向下滾動一點（ https://www.tag1consulting.com/blog/evaluating-real-time-collaborative-editing-solutions-top-fortune-50-company ），您會找到一個總結當前可用的表格解決方案。 對於 Prosemirror，這是：

1. Prosemiror 合作

Prosemirror collab 是 Prosemirror 團隊提供的解決方案（ https://github.com/ProseMirror/prosemirror-collab ，此處示例https://prosemirror.net/examples/collab/#edit-Example 。） 正如您在上面的總結中看到的那樣，這種方法並不是最可取的。 人們說它不能很好地擴展，而且這種方法效率不高。 最近有人試圖對此進行一些改進（ https://github.com/benaubin/prosemirror-collab-plus ）。

2. 使用 CRDT 的 Yjs

另一種方法是 go 與 Yjs。 這甚至可以去中心化，允許離線編輯等。這種方法看起來很有前途，Yjs作者的這篇文章描述了Prosemirror協作方法的優勢（ https://discuss.prosemirror.net/t/prosemirror-crdts/ 1190/13 )。 它基於 CRDT ( https://josephg.com/blog/crdts-are-the-future/ )，它是 OT 的更新替代品。 對於 Yjs，已經存在一個 Prosemirror 綁定（ https://github.com/yjs/y-prosemirror ），它主要從絕對 Yjs CRDT 位置轉換為相對 Prosemirror步進位置，反之亦然。 不幸的是，目前沒有用於建議的插件。 在這里查看我的帖子（ https://discuss.yjs.dev/t/live-tracking-track-changes/293 ）。

其他方法/靈感

在過去的幾周里，我收集了一些使用 Prosemiror 的方法。 我認為他們中的大多數人都使用 Prosemirror collab，但實際上我不確定。 但無論如何，這些方法可能有助於在 Prosemirror 和 Yjs 上實現它。 這是一個基於 Prosemirror 的編輯器列表，允許跟蹤更改/建議：

• 筆尖，這里是一個示例的鏈接（ https ://nibedit.com/plugins ）似乎他們已經從 Github 中刪除了跟蹤更改/建議代碼，但舊版本仍然可用（ Z5E056C500A1C4B6BADE5Z11://githubB.comD/07BADE5Z11筆尖編輯/筆尖/樹/89ae00d162c621990d32558d3272fcfb3669f285/packages/track ）
• Fidus Writer ，這里是編輯器代碼的鏈接（ https://github.com/fiduswriter/fiduswriter/tree/master/fiduswriter/document/static/js/modules/editor ）
• Wax Prosemirror是一個非常年輕的項目，對我來說這似乎是一個非常有前途的編輯器（ https://gitlab.coko.foundation/wax/wax-prosemirror/tree/master/wax-prosemirror-plugins/src ）

Outlook

我們正在開發一個開源項目，目前只是在沒有安迪資助的空閑時間（ https://github.com/openevocracy/openevocracy ），因此我們可能只會緩慢進展。 但是我們所有的時間和精力現在都集中在編輯器上，我會盡快在這篇文章中更新社區（ https://discuss.yjs.dev/t/live-tracking-track-changes/293 ）有一些新的結果。

我希望這個信息收集有點幫助:)

如果有人有興趣聯手，我們對任何形式的合作都非常高興！

Answer 2

查看wax-prosemirror 。 我一直在尋找解決方案，這似乎是跟蹤更改/建議/評論的絕佳解決方案。 在這一點上它似乎相當成熟——他們剛剛發布了 v1.0。