How do I perform track changes in the quill editor just like Google docs?

Question

---

I have already implemented collaborative editing in quill by using @teamwork/sharedb and @teamwork/sharedb-mongo adapter to store changes in the backend NodeJS . However I am still in a dilemma as to how we can show track changes in real time like Google docs suggesting mode and also add comment features ?

---

Answer 1

One year later, I'll give an overview of what we have found out so far:

The quill js approach with OT

We tried to implement track changes / suggestions with QuillJS and came relatively far. But in the end it did not really work, since OT (Operational Transform, the format for syncing the changes) does not support hierarchical structures. The Team from CKEditor changed the OT to support this. But unfortunately it seems to be a lot of work and their code is closed (https://ckeditor.com/blog/Lessons-learned-from-creating-a-rich-text-editor-with-real-time-collaboration/). Also Google solved it with OT, but also their code is not open. So to my knowledge there is up to today no Open Source solution to solve track changes / suggestions with html. And no one seems to be willing to do this, since the effort seems to be very high. So our conclusion: We stopped with this approach.

For some time now we just worked on other problems and left the editor aside (too much other things to do in our project). But just recently we started a second approach, which is still in the beginnings, but looks promising.

The prosemirror approach

Prosemirror has also a relative positioning format, but it's not OT, they call it a step. This seems to be more flexible and the doc structure of Prosemirror is similar to the DOM structure of a html document. It is introduced here (https://marijnhaverbeke.nl/blog/collaborative-editing.html).

For Prosemirror there are already some solutions for the track changes / suggestions problem. If you scroll a bit down on this site (https://www.tag1consulting.com/blog/evaluating-real-time-collaborative-editing-solutions-top-fortune-50-company) you find a table which summariezes currently available solutions. For Prosemirror this is:

1. Prosemirror collab

Prosemirror collab is the solution provided by the Prosemirror team (https://github.com/ProseMirror/prosemirror-collab, example here https://prosemirror.net/examples/collab/#edit-Example). As you can see in the summary above, this approach is not the most preferable. People say that it does not scale very well and that this approach is no very efficient. Recently someone tried to improve this a little bit (https://github.com/benaubin/prosemirror-collab-plus).

2. Yjs with CRDT

Another approach is to go with Yjs. This works even decentralized, allows offline editing, etc. This approach seems very promising, the advantages over the Prosemirror collab approach are described in this post from the Yjs author (https://discuss.prosemirror.net/t/prosemirror-crdts/1190/13). It bases on CRDT (https://josephg.com/blog/crdts-are-the-future/), which is a newer alternative to OT. For Yjs there already exists a Prosemirror binding (https://github.com/yjs/y-prosemirror), which mainly translates from absolute Yjs CRDT positions to relative Prosemirror step positions and vice versa. Unfortunately there is currently no plugin for suggestions. See my post here (https://discuss.yjs.dev/t/live-tracking-track-changes/293).

Other approaches / inspirations

In the last weeks I collected some approaches with Prosemirror. I think most of them use Prosemirror collab, but actually I'm not sure. But anyway, those approaches may help to implement it on Prosemirror together with Yjs. Here is a list with editors based on Prosemirror allowing track changes / suggestions:

• NIB, here a link to an example (https://nibedit.com/plugins) it seems that they have removed the track changes / suggestions code from Github, but an older version is still available (https://github.com/nib-edit/Nib/tree/89ae00d162c621990d32558d3272fcfb3669f285/packages/track)
• Fidus Writer, here a link to the editor code (https://github.com/fiduswriter/fiduswriter/tree/master/fiduswriter/document/static/js/modules/editor)
• Wax Prosemirror is a very young project, for me this seems like a very promising editor (https://gitlab.coko.foundation/wax/wax-prosemirror/tree/master/wax-prosemirror-plugins/src)

Outlook

We are working on an Open Source project, currently only in our free time without andy funding (https://github.com/openevocracy/openevocracy), therefore we will probably only progress slowly. But all our time and effort is now concentrated on the editor and I will try to update the community in this post (https://discuss.yjs.dev/t/live-tracking-track-changes/293) as soon as we have some new results.

I hope that this information collection helps a bit :)

If someone is interested in joining forces, we are very happy about any kind of collaboration!