Custom commenting feature using tiptap

I wanted to created a commenting feature using tiptap so user can select text and add comments, when commenting is done we should show a comment icon right side of that line where comment is given, i need help implementing this feature can any one help me

1 Like

What you want is a mark that has a threadId attribute. Then you can put a listener that watches for clicks and sets a plugin’s state to that threadId and the mark’s position if clicked. Don’t forget to map that position trough your transactions!

After that you can use coordsAtPos to get the position on the screen and just absolutely position your thread info from the external world ( let’s say React ).

This skips a few minor details but should be enough to get started.

TipTap has an out of the box commenting feature coming with their Pro subscription.

2 Likes