Inline Widthless Node Class

Some background: We have a bundled prosemirror editor that has UI components outside of the editor. Right now when you hover on some of those elements it should apply a hover class to the element in the prosemirror dom. Now, you can apply those directly but sometimes prosemirror’s tree updater will determine you have dirtied the dom and react appropriately. The element itself is a contentless widthless node that goes in the editor as a note.

The question: How would you add classes to the inline nodes without accidentally destroying them with the tree updater? If not what is the best way to add a class to a prosemirror node without doing so directly in prosemirror, assuming you can still call functions to the editor. The editor itself has no idea about anything outside of itself. I’m starting to lean toward a rendering attribute but, we have a collab component where I’d like this to remain a client side transaction/rendering thing.

That sounds like something decorations were designed to do.

Only issue with using decorations Is you have to preserve them and the bundled editor doesnt know what is going on outside of itself. Its a state maintained outside of the prosemirror scope.

You can prevent ProseMirror from updating due to DOM changes by writing your own custom NodeView for this node where you always return true from ignoreMutation. That would let you apply your styles without PM then updating the document as a result of this.

It’s hard to provide better advice without understanding the relationship between the UI components that exists out of the editor, the editor itself, and how you’re linking the two. However, I’d guess that you could implement this entirely as a custom nodeview that shows a modal/popup when the user hovers over the element by adding some dom listeners inside your NodeView

1 Like

I already use the custom nodeview to create maintain some listeners on it instead of letting the outside app try to do it. I didn’t know about ignoreMutation at all. I’ll have to look into that. Thanks.

1 Like

This was perfect for multiple things we wanted to do. We didn’t want to listen to class mutations because the particular node doesn’t track that attribute at all but, outside sources want to create a hover class on it. This worked perfectly for that and something else we had to do that involved putting a special node into a NodeView that was firing events into the prosemirror updater continuously.