How do I implement comments in Lexical?

[stuburger]

A common requirement in many text editors is the ability to add and reply to comments/annotations that apply to a range of text. What is the best approach to do this using Lexical? Would I be extending TextNode or ElementNode? It would be neat if the Lexical docs provided an example of how one might implement comment functionality. 🙌

Some background: implementing comments in Prosemirror

In Prosemirror you can implement comments in one of two ways:

1. using a data structure that keeps track of start/end positions of comments (recommended)
2. or using marks which makes comments part of the prosemirror doc which is part of the editorState

Both approaches have their pros and cons. You can find a number of threads discussing the tradeoffs. I am also interested to know if the same tradeoffs exist in Lexical??

Here is a very good thread that talks about these two approaches and the tradeoffs.

Comments as Decorations:

• decouples comments from the editor state
  • comments live inside a separate data structure
  • easier to work with (no Prosemirror APIs)
  • treats comments as a view concern
• store from to values and a comment_id
• must roll your own to get history and copy+paste behaviour if you need it.
• remains performant while typing when there are thousands of comments

Comments as Marks:

• comments live inside the main ProseMirror document
• store only comment_id on mark.attrs (i.e. from and to positions are implied by the marks)
• works with history and copy+paste out of the box
• comments spanning multiple block nodes (e.g. paragraphs) require more than one mark
• harder to access (must use Prosemirror's API to access them: e.g.doc.descendants, etc)
• typing performance suffers when you have thousands of comment marks in the document as marks are always serialised as dom nodes

I'm curious to know if similar tradeoffs exist in Lexical or if there is a more opinionated way to achieve comment functionality.

Thanks for open sourcing Lexical. Even with incomplete docs I've found Lexical easier to pick up than Prosemirror (which without exaggeration took me weeks to start feeling comfortable with). Great work!

[zurfyx]

Exciting topic! @trueadm and @sereneinserenade are also exploring this space right now and there's some good discussion on the showcase group on Discord if you want to join the conversation. Later, we can maybe summarize the conversation here for historical purposes.

[sereneinserenade]

@stuburger Just for the reference, here's the Commenting-Solution I created using ElementNode inspired by LinkNode from Lexical.

repo: https://github.com/sereneinserenade/lexical-comments
demo: https://sereneinserenade.github.io/lexical-comments/

[strdr4605]

@trueadm, any conclusion on this?
Did you manage to do:

I was planning on building a comments implementation next week that works slightly different

What about suggestions?

While discovering remirror, I thought that suggestions should be similar to annotations, but Google Docs has a bit different experience. When doing suggestions you enter a different mode, more like doing a git patch to the doc. (should this be a different discussion🤔)

---

P.S.
My team plans to add support for annotations and suggestions in Q4. Now we are focused on WYSIWYG and collaboration.
While researching the solutions (in Q1) we did not consider lexical (closed source and premature at that time).
Now I am wondering if we should give it a try considering that we need:

• WYSIWYG
• collaborative
• annotations
• images
• links, hashtags, mentions
• suggestions
• emojis
• React Native support (Webview or Native)
  🤔😅

[trueadm]

The playground has commenting, if you check it out!

[strdr4605]

Do you plan to release it as a separate package? Or it's still WIP?

[ChannKan]

@sereneinserenade
Does your approach for comments in lexical work also if there is 2 lexical editors on the same page?

[sereneinserenade]

Hey @ChannKan please use lexical's inbuilt solution for comments, my solution isn't updated in a while. Thanks

[chrisrickard]

@trueadm Awesome, is the commenting code in the playground available online?

[trueadm]

Yep. If you checkout the playground you can make inline comments when selecting some content or just post comments for the document

[chrisrickard]

Yeah cool, is the sourcecode to the playground available into repo?

On Mon, 19 Dec 2022 at 8:57 pm, Dominic Gannaway ***@***.***> wrote: Yep. If you checkout the playground you can make inline comments when selecting some content or just post comments for the document — Reply to this email directly, view it on GitHub <#1839 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEEYCMI4Z2VBA3J7ABJD43WOAWRDANCNFSM5TVNF5BA> . You are receiving this because you commented.Message ID: ***@***.***>

-- Chris Rickard

[trueadm]

Yep it’s all in the GitHub repository you’re viewing. Just look for the lexical-playground package

[chrisrickard]

Thanks!

…

On Tue, Dec 20, 2022 at 2:39 AM Dominic Gannaway ***@***.***> wrote: Yep it’s all in the GitHub repository you’re viewing. Just look for the lexical-playground package — Reply to this email directly, view it on GitHub <#1839 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEEYCPBHDA225QL6GY2PGDWOB6STANCNFSM5TVNF5BA> . You are receiving this because you commented.Message ID: ***@***.***>

-- Chris Rickard

[erickjth]

Hey @trueadm , I have been playing with the commenting code from the playground, and it works great, but I have a use case where I need to persist these comments and restore them on loading the page, so I have been trying to do by myself checking the lexical-yjs, more specifically this file SyncEditorStates.ts to follow how to restore the selection and then run the $wrapSelectionInMarkNode to restore the marks, but my attempts have been unsuccessful. Could you please help me with what I need to save and what I need to use to restore those?

[sonu-44]

Hi @erickjth , Have you found any solution for that , I am struggling with the same thing ?

[erickjth]

Hi @sonu-44. Yeah, kind of. Somebody advised me to grab the anchorNode/focusNode paths, plus the offsets. I created this gist you can try to follow. Hopefully it can help.

https://gist.github.com/erickjth/3946e4e21b4d2f6917afd877a01bb38f

[sep2]

This doesn't seem to work if you have two marks overlapping the same TextNode, because this line modifies the TextNode therefore the second mark can't find it by the original anchorNode/focusNode path anymore. I tried to create all the selections upfront but still no luck.