Resizing comments with respect to content

Hi - sorry if this question is too broad. I’m still wrapping my head around ProseMirror. I have it working for simple uses, but I need a push in the right direction for this next step.

I’d like to display a caption or a comment next to a section of editable content. It’s height would match that of the selected content. It should resize and move automatically as the document is updated. This would end up being somewhat similar in operation to Google Docs comments.

In my original plan the caption itself didn’t live inside ProseMirror, but was a separate DOM element whose position and size was updated with the document. If it’s easier to manage these inside the state that is fine. The user would highlight a section of the document to add a comment to it, and could then resize the comment to “cover” more or fewer nodes.

I’ve gone through a few different attempts at implementing this - currently I am adding decorations of some sort to the document. I still feel like this approach could work, but the problem I’m running into is communicating between the separate DOM elements representing the comments, the decoration’s position, and the view (to get the coordsAtPos for the decoration’s anchor and head).

Again, sorry this isn’t more specific. I guess I just wanted to check that I’m on the right track for the best way to implement something like this, or if there is a better way to approach it. Thanks!

Doing this with decorations seems like a good approach. You’ll want some plugin or similar piece of code managing the decorations by measuring the position of positions in the document and creating widgets with the right sizes. Depending on how many of them there are, you could try to only render or update those that are currently scrolled into view, to do less work.

1 Like