Javascript-форум - Получить номер блока div в котором текстовый курсор?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Получить номер блока div в котором текстовый курсор? (https://javascript.ru/forum/dom-window/85755-poluchit-nomer-bloka-div-v-kotorom-tekstovyjj-kursor.html)

Получить номер блока div в котором текстовый курсор?

Нужно получить номер div по счету в котором находится текстовой курсор. В данном примере после нажатия на кнопку в alert отражается номер div

если несколько раз нажать Enter то создаются блоки. и если мышкой кликнуть на конкретный блок то в переменную запишется номер блока
и алертом этот номер можно увидеть

но если если несколько раз нажать Enter, и перемещаться по блокам не кликами а стрелками вверх вниз то в переменную всегда записывается 1

и алертом номер 1 можно увидеть

как перемещение стрелками текстового курсора можно передавать номер блока в переменную currentDivIndex

Код:

<div id="pt" contenteditable="true" onmousedown="rememberDiv(event)" onkeydown="handleKeyDown(event)">
<div><br></div>
</div>
<div onclick="show()">кнопка</div>


let currentDivIndex = null;

function rememberDiv(event) {
  const target = event.target;
  const divs = document.getElementById('pt').querySelectorAll('div');

  divs.forEach((div, index) => {
    if (div === target) {
      currentDivIndex = index + 1;
      return;
    }
  });
}

function handleKeyDown(event) {
  const key = event.key;

  if (key === 'ArrowUp' || key === 'ArrowDown') {
    const parentDiv = document.getElementById('pt');
    const divs = parentDiv.querySelectorAll('div');
    const currentIndex = Array.from(divs).indexOf(document.activeElement.parentElement);

    if (key === 'ArrowUp') {
      currentDivIndex = Math.max(1, currentIndex);
    } else {
      currentDivIndex = Math.min(divs.length, currentIndex + 2);
    }
  }
}

function show() {
  if (currentDivIndex !== null) {
    alert('Номер по счету div: ' + currentDivIndex);
  } else {
    alert('Курсор не находится внутри div.');
  }
}

ekad,

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <style type="text/css">
        [contenteditable]>div.active {
            border: 4px red solid;
        }
        #out{
            color: #0000CD;
        }

    </style>
</head>

<body>
    <output id="out"></output>

    <div id="pt_text" contenteditable="true">
        <div>111</div>
        <div>111</div>
        <div>(тут курсор)</div>
    </div>
    <script>
        let edit = document.querySelector('#pt_text'),
            div_active;
        const deactivate = () => {
            edit.querySelectorAll('.active').forEach(div => div_active === div || div.classList.remove('active'));
            document.querySelectorAll('#pt_text > div').forEach((div, i) => div.id = `n${++i}`);
            out.value = div_active ? `Курсор в ${div_active.id}` : ``;
        };
        deactivate();
        document.addEventListener('selectionchange', () => {
            if (document.activeElement === edit) {
                let el = window.getSelection().focusNode;
                if (el.nodeType === 3) el = el.parentNode;
                div_active = el;
                deactivate();
                div_active.classList.add('active');
            }
        });
        edit.addEventListener('focusout', ()=>{div_active=null,deactivate()})
        edit.addEventListener('keyup', deactivate)
    </script>
</body>

</html>

Благодарю от души. Как же ты невероятно крут!

я два дня с утра до вечере решал этот вопрос и чат ГПТ использовал, на клаве все кнопки стер.
а ты дал просто супер решение.
Еще раз спасибо.
Не сдержался написать.