Estou experimentando um pouco comcontentEditable e encontrou esse problema: Eu tenho o seguinte snippet js

var range = document.getSelection().getRangeAt(0);
var newNode = document.createElement("span");
newNode.className = "customStyle";
range.surroundContents(newNode);

e este fragmento HTML:

<ul>
    <li>the <b>only entry</b> of the list</li>
</ul>
<p>Some text here in paragraph</p>

O código js permite agrupar a seleção atual com um<span> etiqueta, rótulo, palavra-chave.

Funciona perfeitamente quando a seleção inclui tags HTML inteiras (por exemplo, selecionando 'a única entrada de'), mas não, é claro, quando a seleção inclui apenas um de seus finais (por exemplo, selecionando de 'entrada' para 'Algumas', ambas incluídas) .

Embora saiba que esse problema não é trivial, estou procurando sugestões sobre a melhor abordagem. Desde já, obrigado!