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