How to style overlapping inline decorations

1

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.

2 Likes
2

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

1 Like
3

Thanks a lot for your quick answer, Marijn!

4

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

3 Likes
5

@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.

2 Likes
6

I’m about to implement something similar. Since it’s been a couple years now, I’m curious to hear if this approach worked well for you, or if you ran into any limitations of it?

Thanks! :pray:

7

I’m curious to hear if this approach worked well for you, or if you ran into any limitations of it?

The above approach for coloring worked very well. Modeling this as an external data structure (annotations) turned out to be not ideal…

Here is a full writeup of our learnings: Prosemirror: Highlights & Comments | by Ronny Roeller | NEXT Engineering | Medium

8

Extremely helpful, thank you!! I was leaning towards using marks instead of decorations, for the same reasons (I’m also using YJS), but this sealed the deal.

9

What is the value of spec . How to define that?