How can I check if the text cursor is inside of a contenteditable div?

Question

I'm using a rich text editor called Quill which generates a contenteditable div like this:

<div class="ql-editor" data-gramm="false" contenteditable="true">
</div>

Of course, that div then contains HTML for whatever content is currently in the editor. The HTML is often nested.

Is there a slick way of easily determining if the text cursor (caret) is currently within a contenteditable div? If not, what's the best way to check if the text cursor is within a contenteditable div or a child node of a contenteditable div?

I'm using vanilla JavaScript.

Answer 1

Just use document.activeElement and Element.closest API.

const activeDiv = document.activeElement.closest('[contenteditable]');

function onMouseUp(e) {
  const activeDiv = document.activeElement.closest('[contenteditable]');
  
  console.log(activeDiv);
  

  const outputElement = document.getElementById('output-element');
  outputElement.innerText = activeDiv.id;
}

const textarea1 = document.getElementById('ta-example-one');
const textarea2 = document.getElementById('ta-example-two');
textarea1.addEventListener('mouseup', onMouseUp, false);
textarea2.addEventListener('mouseup', onMouseUp, false);

<form>
<div id="ta-example-one" data-gramm="false" contenteditable="true">
Foo bar baz plugh
</div>
<div id="ta-example-two" data-gramm="false" contenteditable="true">
Foo bar baz plugh
</div>
</form>

<p>Active element ID: <strong id="output-element"></strong></p>