Displaying Y diffs in a js rich text editor ("suggested edits")

I am intending to write an app for authoring books (yes, the world needs another one).

I am currently at an early design phase, still picking technology.

Yjs makes a lot of of difficult things very easy and integrates with several rich text editors, which is great.

One feature that is central to the app design is “suggested edits” in the style of Google Docs, Reedsy etc.


This means that I will want to branch a document multiple times for different sets of suggested changes and be able to display the suggested changes like in the screenshot above. “displaying the changes” in the editor view basically amounts to, for inserting text, show the text for insertion and wrap it in a span so that it can be highlighted appropriately, and for deletion, show the text that will be deleted but again wrap it for styling.

I haven’t been able to find any discussion of doing this online but I’m sure that someone has done it before me using Yjs.

Does anyone know of an example of doing this? Has anyone used Yjs with a rich text editor like ProseMirror, Quill etc and have any advice as to whether building such a feature would be easy or hard?

On a similar vein, i will want to add comments that reference particular parts of the text, so i want to keep track of particular anchor points in the text and be able to, again wrap a block of text in a span for hilighting.

Most likely not relevant but my intention/preference is to build the rest of the UI with svelte.

thinking out loud, before getting stuck in…

This might not be too difficult with any editor framework, if I do everything on the Yjs side rather than attempting to integrate the displaying of the diff into the editor

  • for an insert change
    • take a copy of the change
    • wrap the text to be inserted as needed
    • this creates a diff to “preview the change”

Do something similar but a little more complex for a deletion.

I think it might be possible to adapt the versioning demo to support suggestions: Yjs Prosemirror Versions Example

In any case, a lot of work is needed to make this feature as reliable as Google Docs. We are not there yet, this is on the roadmap for the new y-prosemirror binding.

Regarding comments: It is already possible to implement them using either marks (not recommended) or relative positions that can be rendered as decorations. Have a look at the cursor-plugin implementation. It uses the relative-positions approach.

Great. those are really useful starting points.

I really appreciate the thought and attention you give to the community here and elsewhere.

1 Like