Estoy tratando de configurar/pegar una imagen en la posición actual del cursor/marca de intercalación. Estoy usando un div que tiene contenteditable establecido en true . Aquí está la parte HTML:

 <div class="container"> <div class="row"> <div class="col"> <nav></nav> </div> </div> <div class="row d-flex justify-content-center"> <div id="editor" class="col-md-6" contenteditable="true"></div> </div> </div>

Así es como se establece el css:

 #editor { height: 88vh; font-size: 0.8em; }

Estoy usando una función de javascript que encontré en otra publicación de StackOverflow para obtener la posición actual del símbolo de intercalación.

 function getCaretPosition() { var x = 0; var y = 0; var sel = window.getSelection(); if (sel.rangeCount) { var range = sel.getRangeAt(0).cloneRange(); if (range.getClientRects()) { range.collapse(true); var rect = range.getClientRects()[0]; if (rect) { y = rect.top; x = rect.left; } } } return { x: x, y: y, }; }

Estoy usando esta función dentro de un detector de eventos de pulsación de tecla para capturar cuándo pegar la imagen. La idea es pegar cuando el usuario presiona Ctrl + q, por ejemplo.

 editor.addEventListener( 'keydown', (event) => { const keyName = event.key; if (keyName === 'Control') { return; } if (event.ctrlKey) { if (keyName == 'q') { var image = document.createElement('img'); image.src = 'img/bird.jpg'; image.style.width = '200px'; image.style.position = 'absolute'; image.style.top = getCaretPosition().y; image.style.left = getCaretPosition().x; editor.appendChild(image); } } }, false );

Ahora suceden las siguientes cosas:

1. Si el campo de texto está vacío, la imagen se pega en la posición actual del signo de intercalación solo en la primera fila. Si presiono Enter y voy a las siguientes líneas, la imagen se pega una línea debajo de la línea actual.
2. Si escribo algo en la primera fila, coloco el símbolo de intercalación en otra posición, por ejemplo, al comienzo de la primera fila, la imagen se pega al final de la línea, no en la posición del símbolo de intercalación.

Quiero que pueda pegar la esquina superior e izquierda de la imagen en la posición actual del símbolo de intercalación. Si hay textos, entonces es deseable moverlos/cambiarlos después de la imagen, como si estuvieran haciendo espacio para la imagen.

Gracias por cualquier idea.