Estoy luchando por descubrir cómo manejar el problema de hacer doble clic en un párrafo que da un tipo de rango, en lugar de seleccionar el mismo párrafo que da un rango más pequeño.

El problema es que si hago doble clic, el contenedor final parece ser el siguiente párrafo, pero cuando se selecciona manualmente, el contenedor final sigue siendo el mismo párrafo.

Para demostrar esto, tengo un jsfiddle: https://jsfiddle.net/Abeeee/uagt0z28/39/ que usa insertText para inyectar texto en una posición de colapso de rango;

 var range0 = range.cloneRange(); range.collapse(true); document.execCommand('insertText', false, '!!!START!!!'); sel.removeAllRanges(); sel.addRange(range0); range0.collapse(false); document.execCommand('insertText', false, '!!!END!!!');

el problema se encuentra cuando hace doble clic en una palabra en un párrafo (que selecciona todo el párrafo), y luego hace clic en [setRangeText] para ver dónde cree el código que están los puntos de inicio y final de esa selección).

Lo que quiero es que el párrafo esté rodeado por los marcadores de INICIO y FIN a la izquierda y a la derecha de la primera y la última palabra, como se ve aquí...

... pero lo que obtengo es el marcador END sentado con el siguiente párrafo (y dentro de la etiqueta <p> para ese párrafo), como se ve aquí...

¿Cómo soluciono / corrijo esto?