Estoy haciendo un editor WYSIWYG usando contenteditable . En lugar de usar el símbolo de intercalación que muestra el navegador, necesito dibujar mi propio símbolo de intercalación simulado (para solucionar los errores del navegador ). Necesito obtener la posición exacta del símbolo de intercalación parpadeante, para poder dibujar mi propio símbolo de intercalación en esa posición.

Una llamada a document.getSelection().getRangeAt(0).getClientRects() casi funciona, pero hay un caso límite: cuando el signo de intercalación está al principio o al final de una línea. Vea esta demostración:

 const caretEl = document.getElementById('caret'); const updateFakeCaret = () => { const sel = document.getSelection(); if (!sel) return undefined; if (sel.rangeCount !== 1) return undefined; const range = sel.getRangeAt(0); const clientRectList = range.getClientRects(); const selectionRect = clientRectList.item(0); if (!selectionRect) return undefined; caretEl.style.top = selectionRect.top + window.scrollY + 'px'; caretEl.style.left = selectionRect.left + window.scrollX + 'px'; caretEl.style.width = selectionRect.width + 'px'; caretEl.style.height = selectionRect.height + 'px'; }; document.addEventListener('selectionchange', updateFakeCaret); window.addEventListener('resize', updateFakeCaret);

 .editor { padding: 1em; white-space: pre-wrap; max-width: 20em; background-color: lightgrey; } #caret { position: absolute; z-index: 999; pointer-events: none; outline: 1px solid red; }

 <div class=editor contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> <div id=caret></div>

Cuando hace clic al final de la línea 2, el cursor aparece al final de la línea 2. Cuando hace clic al principio de la línea 3, el cursor aparece al principio de la línea 3. ¡Pero esas son exactamente la misma ubicación ! Con la API document.getSelection , ambas posiciones parecen idénticas y devuelven los mismos dos rectángulos de cliente. Pero claramente no son idénticos, porque el navegador (al menos Chrome y Firefox) dibuja su propio signo de intercalación en diferentes posiciones dependiendo de la interacción del usuario.

¿Hay alguna forma de distinguir entre "intercalación al final de la línea" y "intercalación al comienzo de la línea"? ¿Existe otra forma confiable de obtener la posición exacta de la pantalla del signo de intercalación?