How to style overlapping inline decorations

The Prosemirror Edit Example allows to add comments. These comments can be overlapping.

For example, here are two overlapping comments - one on the whole content and the other only on the word “sample”:

image

Unfortunately, the uni-color yellow background doesn’t visualize that there are two overlapping comments. I’d like instead the background to indicate that there multiple overlapping comments, somewhat along these lines:

image

In the sample source code, each comment is converted into an inline decoration with styling information (CSS class). Prosemirror seems to automatically create then 3 decoration segments in the DOM: "is a ", “sample”, and “text”. So, the splitting is happening after providing the styling information.

One solution I could think of is to do the splitting into 3 segments in my code, and then directly create then 3 non-overlapping decorations with the right color.

Yet, as Prosemirror seems to have already logic for creating the segments, I was wondering if there is an easier solution to create styling based for these overlapping inline decorations.

1 Like

Nope, there’s nothing like that, so if you want this, you’ll have to compute the styles yourself.

1 Like

Thanks a lot for your quick answer, Marijn!

In case somebody runs into the same challenge, here is an implementation to create non-overlapping segments based on overlapping annotations: https://github.com/remirror/remirror/blob/next/packages/%40remirror/extension-annotation/src/segments.ts

1 Like

@marijn @ronnyroeller I found out a simple way to achieve this. Adding a nodeName will make decorations render like marks.

- Decoration.inline(from, to, { ...attrs }, spec);
+ Decoration.inline(from, to, { ...attrs, nodeName: 'span' }, spec);

DOM when decoration without nodeName:

<span>is a </span>
<span>sample</span>
<span> text</sample>

DOM when decoration with nodeName:

<span>is a </span>
<span><span>sample</span></span>
<span> text</sample>

I’m not sure that nodeName is design to do so. But it works.