Making it possible to associate the EditContext with multiple Elements

[mozesstumpf]

The rich text editor applications often nests the contenteditable false and true elements to each other.

<div class="root-editable" contenteditable="true">
  editable text
  <div class="nested-context" contenteditable="false">
    <div class="nested-editable" contenteditable="true">
       nested editable text
     </div>
  </div>
</div>

Contenteditable

With the contenteditable element, we can add an event listener to the element that will propagate through all of its descendants, which makes possible for the nested-editable to use the same functionality that was written for the root-editable. E.g.:

const rootEditable = document.querySelector('.root-editable");
rootEditable.addEventListener("keydown", (e) => {
 // Event fires if the focus was in either the RootEditable or the NestedEditable
});

EditContext

In case of the EditContext, the event listener is attached to its instance that currently prevents to apply the functionality for multiple elements.

const rootEditable = document.querySelector('.root-editable");
const editContext = new EditContext();
rootEditable.editContext = editContext;

editContext.ontextupdate = (event) => {
  // Event fires only if the focus was on the RootEditable (it doesnt fire  if the focus is on the NestedEditable)
}

Solution

If we would be able to apply the EditContext's instance to multiple elements, that would solve this issue.