Add class to mark using decoration

1

Is it possible change HTML attributes on a mark using decorations? I see one can add a class to a node using Decoration.node, and there’s Decoration.inline but this nests a span within the mark. I want to modify the mark’s class so I can adjust its styling.

Here’s the use case: Users can add comments to the document which are tracked using marks. When a user clicks on a comment (outside of the editor) I want to highlight the comment in the editor by darkening the background color. I tried manually adding highlight class to the DOM but have noticed some issues and, from my understanding, we’re not supposed to edit the DOM directly.

I could add a highlight attribute to the mark but this would be synced with collaborators and persisted in the document. I want highlighting to be a visual indicator for the one user.

Any ideas how to achieve this?

2

Edit: I wrote up a reply but I think I missed this - “I want highlighting to be a visual indicator for the one user.”

This is an interesting problem. Its possible that Mark Views may work here. But even with decorations, you should be able to programatically apply a class if you can get access in toDOM of your mark schema. It’s not entirely clear what went wrong here or if you tried this as I am expecting.

As for the undesired inner nesting, its possible that you may need to adjust the decoration position - 1 (and target via inheritance)? Or maybe there is either an existing priority flag or a new one to be thought of that might resolve it. Library author would know off-hand.

3

No, inline decorations are drawn inside the wrapper elements added for marks, you can’t directly add attributes to those.