How do I get the element being edited?

I have an HTML div element that has contenteditable set to "true." The div contains a div inside it that has contenteditable set to "inherit." That div also has a child div with contenteditable set to "inherit." Here's what the HTML code looks like:

<div contenteditable="true">
    text
    <div contenteditable="inherit">
        text
        <div contenteditable="inherit">
            text
        </div>
        text
    </div>
    text
</div>

The problem is, I can't find a way to get the selected element in JavaScript, because document.activeElement always returns the root div no matter which child is in focus.

How do I get the most specific element that's being edited, not just the uppermost ancestor?