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

1

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.

deletetext-e1408297148582

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.

Edit
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.

1 Like
2

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.

3

Great. those are really useful starting points.

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

1 Like
4

@maninalift - Also creating yet another editor… are you working on a personal project or for a company? Any interest in discussing a collaboration? I have a writing app I’ve been working on that you can find here: http://writinghabit.app → But the collaborative editing side of things is pretty complex to me at the moment. Trying to get comments to show up from other users in real time is the current hurdle. Though, based on Kevin’s comment… I’m using TipTap marks and it sounds like that has some drawbacks I don’t understand yet. Anyway, hit me up if you have any interesting in discussion a collaborative effort.

1 Like
5

Probably more difficult when working with formatted text, as is common in ProseMirror, but for plain text, it seems like suggestions could be accomplished by:

  • Still having suggesters edit the document text directly.
  • But also store their edits in a separate set of Y.RelativePosition ranges to indicate that they are suggestions.
  • Likewise, deletions are a separate set of relative ranges.

This way, in CodeMirror 6 terms, when viewing suggestions, the ranges are turned into mark decorations, and when wanting to ignore suggestions, they’re used to build replace decorations, which hide spans of text.

6

Looks close to being a duplicate of

My wanted use case is much simpler - just show authorship colors (that is, show the differences between the first and the current version) live, while keeping the contents editable.

7

Have you succeeded in this? Maybe you could share how you done it?

8

Unfortunately, no. It was discussed here.

9

Were you able to implement it?