JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true" id="div1">
    text
    <div contenteditable="inherit" id="div2">
        text
        <div contenteditable="inherit" id="div3">
            text
        </div>
        text
    </div>
    text
</div>
<input id="curr" value=""/>

JavaScript

function getActiveDiv() {
    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var node = document.createElement('span');
    range.insertNode(node);
    range = range.cloneRange();
    range.selectNodeContents(node);
    range.collapse(false);
    sel.removeAllRanges();
    sel.addRange(range);
    var activeDiv = node.parentNode;
    node.parentNode.removeChild(node);
    return activeDiv;
}

var divs = document.querySelectorAll('div');
Array.prototype.forEach.call(divs, function(div) {
	div.addEventListener('keypress', function(e) {
    document.getElementById('curr').value = getActiveDiv().id;
  });  
});