Login/Register
How do I perform track changes in the quill editor just like Google docs?
Asked Answered
node.jsangularmongodbgoogle-docsquill
S

2

8

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 ?

Shwa answered 16/11, 2019 at 5:21 Comment(5)
I'm also interested in this functionality. But it seems that there is currently no solution to it: github.com/quilljs/quill/issues/196 – Effortless
@Effortless can we work on building this track changes module together ? – Shwa
Great idea! I've written an email to you. – Effortless
@Effortless Did you people come up with anything? – Kbp
Hi @HarisurRehman, I'll write a post here in this thead to give an overview of the current state. – Effortless
E
12

Update 2023

We just started a project to support suggestions in a collaborative editor. We decided to develop a ProseMirror plugin supporting live suggestions. For real-time collaboration we use Yjs. See the original post below for more details.

Feel free to join! :)

Original post

One year after the question was posted, 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:

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!

Effortless answered 14/12, 2020 at 11:26 Comment(0)
H
0

Check out wax-prosemirror. I've been looking for a solution for this for a while and it seems like a great solution for tracked changes / suggestions / comments. It seems reasonably mature at this point - they just released v1.0.

Hennebery answered 30/3, 2021 at 4:16 Comment(1)
Thanks for sharing this. It seems to be the same like I posted, just here the Github link instead of the Gitlab link. However, do you know if they work on a version which works without React? We use Angular and would not like to mix frameworks. – Effortless

© 2022 - 2024 — McMap. All rights reserved.