How to build inline comments feature on web app?

Question

I want to add an inline commenting feature to a simple webapp that I have. Think Medium's inline comment system.

What is the right approach to building this, especially the "in-context" part? Eg should I edit the primary document, adding a "comment" div in the document, and save the whole document every time a comment is added? Is there a better approach?

So far, I found that TinyMCE and CKEditor5 both have premium plugins for this. Since my product will be open, consumer (as opposed to SaaS) and free for now, I cannot afford to pay per active user (I'll be broke before my product gets reasonable traction). Are there any open source inline-comment plugins for the 2 editors above? Or any other open source editors that support this use case?

Answer 1

You could create an array of all of the comments on that page, and then loop through and add elements using javascript.

As for the free open source editors, all of the free ones I could find were pretty broken. You could try editing one you find to make it more efficient.

Answer 2

I was also looking for tool like this and I found this on github.

https://github.com/openannotation/annotator/

I do not claim it's developed by me, but this can be helpful.

Thanks