Estoy tratando de hacer cambios de texto en función de cuándo el usuario hace clic en el botón "negrita" usando los objetos de rango y selección. Cuando el nodo de texto está vacío, el rango que configuré usando setStart() y setEnd() parece no funcionar porque el cursor no se mueve hacia el nodo de texto, sino que permanece en su nodo de texto inicial que ya está dentro mi div contenteditable . Sin embargo, si agrego algún contenido preexistente al nodo de texto, el rango es correcto, el cursor se mueve al nodo de texto recién creado y el contenido está en negrita al igual que mi entrada adicional. Entonces, ¿cómo hago para que el cursor entre en el nodo de texto sin ningún contenido? Gracias.

Aquí hay un fragmento de código:

 function setBold() { let parent = document.querySelector('.current'); /*contenteditable parent element*/ let sel = window.getSelection(); let selRange = s.getRangeAt(0); let bold = document.createElement('b'); let range = document.createRange(); /*if the node has content this solution works, but in this example it does not currently*/ let node = document.createTextNode(""); parent.appendChild(node); range.setStart(node,0); range.setEnd(node,node.length); range.surroundContents(bold); sel.removeAllRanges(); sel.addRange(range); }