I am successfully marking up my document with decorators but have an issue with nested selected states. I use handleClick
in my plugin to get the decorator key & use that to apply a selected
class to the decorator that matches the key.
However, when dealing with nested decorators like this:
<p>
Shakespeare goes on to show that having too much
<mark key="_c5875" class="annotate-clarity">
<mark key="_5981" class="annotate-inclusivity">ambition</mark>
</mark>
<mark key="_c5875" class="annotate-clarity"> and</mark> total control of power is just as bad.
</p>
I can easily end up with orphaned selected decorators, e.g. Iâve selected a decorator elsewhere in the document but the word âambitionâ remains selected even when my code only has 1 decorator with the selected state.
The markup ends up like this:
<p>
Shakespeare goes on to show that having too much
<mark>
<mark key="_5981" class="annotate-inclusivity selected">ambition</mark>
</mark>
<mark key="_c5875" class="annotate-clarity"> and</mark> total control of power is just as bad.
</p>
Any suggestions on how to tackle?
Thanks