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”:
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:
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.