Text is annotatable within nested not annotatable blocks

[oleksandr-danylchenko]

Issue

Having the following layout, where the not-annotatable block contains another not-annotatable element can lead to an incorrect selection ranges split!

<div class="not-annotatable">
  <h3>Not annotatable block!</h3>
  <p>
    "See now, how men lay blame upon us gods for what is after all nothing but their own folly. Look at Aegisthus;
    he must needs make love to Agamemnon's wife unrighteously and then kill Agamemnon, though he knew it would be
    the <span class="not-annotatable">death of him; for I sent Mercury to warn him not</span> to do either of these things, inasmuch as Orestes would be
    sure to take his revenge when he grew up and wanted to return home. Mercury told him this in all good will but
    he would not listen, and now he has paid for everything in full."
  </p>
</div>

Screen.Recording.2024-03-28.at.22.16.35.mov

Essentially it's caused by a bug in the splitAnnotatableRanges method that doesn't exclude any nested not-annotatable from splits execution on them.

Therefore, the annotation continues after the nested not-annotatable element, within the not-annotatable element 🤪

The effect is better expressed if I apply the #67 PR, where I removed usage of the redundant trimRange method:

Possible Solution

Update the splitAnnotatableRanges to prevent iterations over any nested not-annotatable elements and splitting the ranges on them