javascript - contenteditable div エッジ ケースでの強調表示

Question

contenteditable div テキストを強調表示または非強調表示にする作業を行っています。しかし、マウスをテキストの端から端までワイルドドラッグでドラッグすると、divも選択されるというエッジケースに直面しています。つまり、範囲を出力すると、親要素が終了コンテナーとして表示されます。

<div class = "XYZ">
 <span class = "highlighted">ABCD</span>
</div> 

range.endContainer をログに記録すると、XYZ が出力されます。

また、 range.setStart() および range.setEnd() メソッドを使用して範囲を調整しています。つまり、次のシナリオで失敗します。

<div class = "XYZ">
 <span class = "unhighlighted">ABCD</span>
</div>


range.setEnd(range.endContainer, range.endContainer.textContent.length)

範囲の最後の部分を設定する際に間違いを犯したと確信していますが、どこにあるのかわかりません...誰か助けてもらえますか?