Tengo dos divs dentro de un div contenteditable, así:

 <div contenteditable="true" id="mainDiv"> <div id="div1">Line 1</div> <div id="div2">Line 2</div> </div>

y quiero colocar el cursor al principio de la "Línea 2". Yo uso el siguiente código para hacerlo

 function setCursorAtInnerDiv(mainDiv, div2) { let range = document.createRange(); range.selectNodeContents(div2); range.collapse(true); let selection = document.getSelection(); selection.removeAllRanges(); selection.addRange(range); }

Cuando miro los elementos, los divs se ven tal como se muestra arriba hasta que regresa este código.

Entonces, de repente, el HTML se desordena así:

 <div contenteditable="true" id="mainDiv"> <div id="div1">Line 1</div> <span style="font-family: -apple-system...; font-size: 1rem;">Line 2</span> </div>

(donde "..." es un montón de fuentes enumeradas). El resultado final es que en lugar de un 'div', tengo un 'span', lo que significa que la Línea 2 no comienza en su propia línea.

¿Por qué mi div se convirtió en un lapso (con un montón de fuentes)? Chrome hizo eso? Seguro que no.

¿Cómo puedo configurar la posición del cursor sin estropear mis líneas? ¿Hay un indicador de "no arruines mi html"?