How to get the id of the element that the text caret is currently on?

Basically, this webpage will allow users to make documents (of some sort) using contentEditable div’s called block’s. The problem is that the user will more than likely need multiple blocks, as a block is an equivalent to sentence/line or a heading or a sub-heading etc. I need to get the id of the block that the text caret is currently on, so I can prevent the user from accidentally deleting the default block. I’ve added a ‘keydown’ event listener to the container of the blocks, and basically it actively checks if the backspace key is pressed. If the caret is at the beginning of the block and backspace is pressed then the block is deleted. Here is my relevant Javascript:

function findClosestAncestor(element, className) {
    while (element && (!element.classList || !element.classList.contains(className))) {
        element = element.parentElement;
        console.log(element);
    }
    return element;
}
pageContainer.addEventListener('keydown', function (e) {
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);

    if (e.key === 'Enter') {
      // Prevent the default behavior (new line) to avoid the creation of a new div
      e.preventDefault();
      blockMaker();
    }

    if (e.key === 'Backspace') {
        console.log(blockIndex);
        const block = pageContainer.querySelector('.block');
        console.log(block, range.startOffset);

        if (document.caretPositionFromPoint) {
            caretPosition = document.caretPositionFromPoint(e.clientX, e.clientY);
            var containerElement = caretPosition.offsetNode.parentElement;
            var containerId = containerElement.id;
            console.log(containerID);
        } else if (document.elementFromPoint) {
            // Use WebKit-proprietary fallback method
            caretRange = document.caretRangeFromPoint(e.clientX, e.clientY);
            console.log(caretRange);
            var containerElement = findClosestAncestor(caretRange.startContainer, 'block');
            console.log(containerElement);
            var containerId = containerElement.id;
            console.log(containerId);    
        }
        
        if (containerId === "block-container1" && range.startOffset === 0) {
            // Prevent the default behavior of the backspace key
            e.preventDefault();
            console.log("Cannot delete the first block.");
        }else if(range.startOffset === 0){
            var blockId = ("block-container"+blockIndex);
            var blockToBeDeleted = document.getElementById(blockId);
            blockToBeDeleted.parentNode.removeChild(blockToBeDeleted);
            blockIndex--;
            const blocks = document.querySelectorAll('.block');
            var currentBlock = blocks[blockIndex - 1];
            currentBlock.focus();
        }
    }
});

My version of chrome doesn’t support document.caretPositionFromPoint and when I try the depreciated version it returns this li tag which is inside another div above the pageContainer Div. I don’t understand why, and I’ve tried making this function findClosestAncestor(), but that just returns the whole page.Is there another way to approach finding the element that the text caret is in? As I do not like this way, because I don’t fully understand what’s going on.