I have two plugins that apply decorations to my editor using regex. One plugin highlights certain words (like a spell checker), while the other highlights any word with a hashtag in the beginning as a tag.
The problem is that when the decorations are applied, they split into inline spans instead of nested spans, breaking the tags and preventing the other decorations from being inside the tags.
Here you can see how it looks in the editor. The last tag has a highlighted word, but it’s split up so it doesn’t look like a singular tag:
HTML
<p>This is a tag: <span class="tag">#tag</span></p>
<p>This is a highlighted word: <span class="word-highlight-dot ProseMirror-widget"></span><span class="word-highlight">food</span></p>
<p>This is a tag with a highlighted word: <span class="tag">#</span><span class="word-highlight-dot ProseMirror-widget"></span><span class="tag word-highlight">food</span></p>
This is what it should look like:
Correct HTML
<span class="tag">#<span class="word-highlight-dot ProseMirror-widget"></span><span class="word-highlight">food</span></span>
Is there a way to render decorations inside of each other? And in a specific order? I.e word highlights show up inside of tags? Or does this break the ProseMirror structure?
One thought to solve this without element nesting would be to add a class to the start and end of any decoration that is split when rendered. Maybe by specifying it in the decoration function. Then the css could target the split tags and join them.
Decoration.inline(tag.from, tag.to, { class: "tag" , splitStartClass: "tag-start", splitEndClass: "tag-end" }),
A decoration which has been split like this:
<span class="tag">#</span><span class="tag word-highlight">food</span><span class="tag">test</span>
Would get the tag-start and tag-end class added to them:
<span class="tag tag-start">#</span><span class="tag word-highlight">food</span><span class="tag-end">test</span>
Thoughts? Any help would be appreciated!