If I want to implement the comment function, is mark the best way?


like this:

I need to comment on a text or an figure

Keeping the comments in a data structure outside of the doc and showing them as decorations might make them easier to manage when they can cross block boundaries. But using marks should also work, especially if you want them to be part of the document and automatically included in collaborative editing and the undo history.


Can mark customize a view? Similar to nodeview

No, marks can’t do most of the things nodeview can. You can only change the element used to render the mark.

Well, thank you for your work. It’s easy to realize these requirements.

I feel that although this framework is good, the cost of learning is too high. I would be very grateful if the government could give more examples, which will also help to promote the popularization of this project.

Although your framework is good, I can hardly find relevant people in China to discuss it.

If I want to click each mark, a window will pop up. So where is a good place to listen for click events?

document.querySelectorAll('span.comment').forEach((el, i) => {
  el.addEventListener('click', e => {
      //do something

I’m doing it now, but it’s not good enough

i know,use handleClick


In my experience it’s best to move this functionality “out” from ProseMirror, a mark just stores the threadId, and make a plugin which captures clicks in the editor, checks if the click was on a “thread” mark, if that’s the case then it sets it’s internal state the thread’s id & position. Then you watch editorState changes, and if the “thread” plugin is signaling that you’ve clicked on the mark then you display the thread component in whatever framework you’re using.

I’ve left out some details ( cleaning up the internal state when you click out etc… ), but you get the idea. You will need posAtCoords / coordsAtPos to determine the thread component’s position / to get if the click was inside a thread mark. Good luck!



Let’s keep the forum in English, please, even if that means running your reply through an automatic translation service before posting.

1 Like