Implementing google docs like "suggest edit" mode

Hi!

I’m currently working on a collaborative editor using tiptap (based on prosemirror) and I’m trying to achieve an editing experience similar to google docs (but limited mostly to markdown). Implementing comments was easy enough, however I’m a bit at a loss when it comes to implementing something like Google Doc’s “suggest edit” mode.

In theory it sounds simple enough. For example, when the user deletes text while in this mode, prevent the delete or undo it, and apply a mark to the deleted text instead. But since I’m still very new to ProseMirror I’m not sure how to achieve this in a custom prosemirror plugin. I found methods like appendTransaction and filterTransaction. Using the latter it’s easy to prevent the deletion when in the mode. And using appendTransaction I could add a new transaction that undos the delete and sets the mark instead.

But is this really the way one would implement this properly? I feel like the more correct way would be to “amend” the transaction instead. I found this post amendTransaction - #2 by marijn but it didn’t seem to go anywhere.

I also found this post about the very same feature Suggestions which also didn’t seem to result in anything.

Can anyone more experienced with ProseMirror maybe give me a pointer into the right direction, or share how they would implement a feature like this?

3 Likes

For starters I’m trying to handle deletions. My naive implementation right now looks like this:

new Plugin({
key: new PluginKey('suggestEdit'),
appendTransaction(transactions, oldState, newState) {
    if (!useEditorState.getState().suggestMode) return;

    const deletion = transactions.find(tr => {
            return tr.steps.find(step => step instanceof ReplaceStep)
        })?.steps[0] as ReplaceStep|undefined;
    if (!deletion) return null;

    // that's my own comments extension
    const marker = newState.schema.marks['comments'].create({
        threadId: uuidv4(),
        type: 'delete'
    });

    const tr = newState.tr;

    return tr
        .step(deletion.invert(oldState.doc))
        .addMark(deletion.from, deletion.to, marker)
        .setSelection(Selection.near(tr.doc.resolve(deletion.from)));
},
})

This partially works, at least for deleting selected text.

1 Like

Hi, I’m facing that same issue and also while remove / add any content on that editor show like that strike mark on above image and highlight with some colours. If got any solution please share me also…

I think prosemirror provides a plugin for it using the prosemirror-history lib. You can handle some functionalities including transactions on the plugin

1 Like

Thank you very much for your response, do you have any examples??

yes I do, check the below image for reference

1 Like

What you’re trying to do is one of the hardest things that you could try :slight_smile: What I’ve seen working at various products is changing the default dispatchTransaction method, and replacing every transaction with another one that includes the added “removal” / “addition” marks.

That puts everything on its head, there are a ton of corner cases.

For example: Since a transaction can have multiple steps you have multiple steps and now you replace every step you have to re-map all the steps before transforming them.

I ( with my company ) plan to come out with a plugin that can solve this this problem since a ton of people try to solve this, hopefully we’ll find a time for that.

2 Likes

Thank you for your response, but actually it’s working only undo and redo ?

Hi, I don’t have any idea of ‘ProseMirror’ configurations, so i don’t know how to mange this scenario. If you have any idea please share me also…

Yes, its works for redo and undo actions

what are you trying to achieve?

Ok i will explain, did you know about google doc suggestion mode edit with multiple users at the same document. While different users edit the same document there will be show a diff mark of that edited content and remove also the same method. example image is given below

Which means while editing on my tiptap editor content need to show like that diff marking with user profile colour, Please give me a solution for that …

We’re talking about tracking your transaction for each action.

I think you have to construct your own tracking mechanism for your editor. Porsemirror provides a rebase feature, to handle that, I think.

Rebasing

When doing more complicated things with steps and position maps, for example, to implement your own change tracking, or to integrate some feature with collaborative editing, you might need to rebase steps.

Read more here: ProseMirror Guide

Thank you for your response, is it possible with ‘history’ ??

I don’t think this would be possible with only prosemirror-history lib