I’d like to add a visual cue to my users about the current node (where the cursor is) or the selected nodes so that they have a better notion of where the node(s) start and end.
I was hoping ProseMirror would add a css class to the selected node(s), or current node, but it only adds a ProseMirror-focused class to the container.
So what would be the best approach for adding a temporary CSS class these nodes? Of course whenever the selection changes or the cursor moves the CSS class should be removed.
I’ve read about decorators but it seems those are tied to particular node types / marks, which I’m not sure is the best approach for handling this.
I’ve read about decorators but it seems those are tied to particular node types
They aren’t. Decorations are what you want here—a plugin can draw decorations for the current selection (or just a single inline decorations for the selected range, if you don’t need the class on block elements).
Node decorations can add classes to nodes, but you’ll have to iterate over the selected nodes (possibly using nodesBetween) to create a decoration for each node that you want to add the class to.
So, if I’m understanding this correctly, the problem was that my indexes didn’t include the whole heading node so PM concluded that it had to apply the decoration to the text node (hence creating a <span>) at the specified positions. Is this it?
Edit:
For reference here is the plugin that applies the decoration to all the nodes that fall into the selection, not only the cursor position: