Почему сбрасывается курсор после замены содержимого childNode?

Question

[Богдан Кучерук]

Есть блок:

<div contenteditable="true" id="myDiv" style="border:1px solid white; height: 500px;"></div>

При вводе пытаюсь заменить содержимое:

const editableDiv = document.getElementById('myDiv');
editableDiv.addEventListener('input', function(event) {
  const childNodes = editableDiv.childNodes;
  for (let i = 0; i < childNodes.length; i++) {
  const childNode = childNodes[i];
    childNode.textContent = childNode.textContent + 'New text';
  console.log(childNode.textContent);
}
  });

Почему курсор сбивается при каждой замене? Как это можно пофиксить?

Comments

[Lapita12]

const editableDiv = document.getElementById('myDiv');
editableDiv.addEventListener('input', function(event) {
  const range = document.getSelection().getRangeAt(0);
  const childNodes = editableDiv.childNodes;
  for (let i = 0; i < childNodes.length; i++) {
    const childNode = childNodes[i];
    childNode.textContent = childNode.textContent + 'New text';
    console.log(childNode.textContent);
  }
  document.getSelection().removeAllRanges();
  document.getSelection().addRange(range);
});

[Богдан Кучерук]

Lapita12, ничего не изменилось

[Lapita12]

Богдан Кучерук,

const editableDiv = document.getElementById('myDiv');

editableDiv.addEventListener('input', function(event) {
  const range = document.getSelection().getRangeAt(0);
  const childNodes = editableDiv.childNodes;
  let cursorPos = range.startOffset; // Сохранить текущую позицию курсора

  for (let i = 0; i < childNodes.length; i++) {
    const childNode = childNodes[i];
    childNode.textContent = childNode.textContent + 'New text';
    if (i === range.endContainer.parentNode.childNodes.length - 1) {
      cursorPos = cursorPos + 7; // Длина добавленного текста
    }
  }

  document.getSelection().removeAllRanges();
  range.setStart(range.startContainer, cursorPos); // Восстановить позицию курсора
  range.setEnd(range.startContainer, cursorPos);
  document.getSelection().addRange(range);
});

[Богдан Кучерук]

Lapita12, GPT не помогает в таких случаях