DEV Community

Cover image for How I implemented Google docs like commenting in Tiptap

How I implemented Google docs like commenting in Tiptap

Jeet Mandaliya on April 03, 2022

Tiptap has a GitHub issue with the list of all the community extensions in the repo where people share extensions that they create. Someone mention...
Collapse
 
markust profile image
MarkusTrasberg

Awesome work, thank you!

Any ideas on how to show the respective comment box on the same height as the line where the comment appears? Currently have tried getting the coordinate for the starting position and adding that to position the element, without much success.

const startPos = editor.view.posAtDOM(commentNode, 0);
const coords = editor.view.coordsAtPos(startPos);
comment.from = startPos;

Collapse
 
dari4sho profile image
Dari4sho

Thanks for the article, it was the main inspiration for my own implementation, which combines marks and database data as the source of truth - I learned a lot of interesting stuff.

Collapse
 
victorvianaom profile image
Victor Viana

Hi Jeet! many thanks!
How do you set the Mark' style?

Collapse
 
sereneinserenade profile image
Jeet Mandaliya

giving it an attribute and styling it works just fine github.com/sereneinserenade/tiptap...

Collapse
 
victorvianaom profile image
Victor Viana • Edited

Got it! Thank you so much!

Collapse
 
rini001 profile image
Renaissance

Hi Jeet, I am using Tiptap. The editor contain some existing text and images I want to style it . How can I do that?

Collapse
 
sereneinserenade profile image
Jeet Mandaliya • Edited

Hey @rini001, please have a look here at how tiptap styles it, it should be able to do something similar

Collapse
 
adityasajoo profile image
Aditya Sajoo • Edited

Hi Jeet, I was working on something similar with Tiptap and React. Is there a way to focus on and select the text in the editor when the user clicks a comment from the side panel?

Collapse
 
mark_meebs_20d6c53a3a6fba profile image
Mark Meebs

Thanks for writing this Jeet, it was super helpful for me!

Collapse
 
sereneinserenade profile image
Jeet Mandaliya

Glad it was helpful. Always welcome!

Collapse
 
jenniferw profile image
Jennifer

Hey, I have been following your work, it's really awesome.

Would love to see similar article on google docs like page implementation. Keep up the good work