Feature Request: Allow react props to be passed to inner div of EditorContent

[pownkel]

Description

EditorContent is rendered as two nested divs, with the internal one having the contenteditable attribute and any other attributes that were specified on the Editor instance, and the outer one receiving whatever additional props were passed to EditorContent. For example, the element created by this function:

const createEditorContent = () => {
  const editor = useEditor({
    // ...
    editorProps: {
      attributes: {
        class: 'internal-div'
      }
    }
  });
  
  return <EditorContent editor={editor} className="external-div"/>;
}

renders as:

<div class="external-div">
  <div contenteditable="true" translate="no" class="tiptap ProseMirror internal-div" tabindex="0">
    <p>...</p>
  </div>
</div>

We can pass React props to the external div through EditorContent, but editorProps only allows us to add dom attributes to the internal div. We can add event listeners with handleDomEvents, but again, these are DOM event handlers that accept DOM events, not React event handlers. Also, while the innerRef prop allows us to pass a ref to the external div, there is no convenient way to get a ref to the internal div.

It would be useful if there was a way to pass React props and event listeners to the internal div. Is this something that it would be feasible to add?

Use Case

I'm trying to use EditorContent with a third-party combobox from ariakit following this example, using EditorContent instead of a textarea as the custom render component. Ariakit requires custom components to be open to extension so that we can pass through additional props, event listeners, and refs from ariakit.

Right now, we can pass these props to EditorContent, which passes them to the outer div, but ariakit expects the value of the ref and the target of the events to be the contenteditable element (the inner div), so the combobox doesn't work as expected. We can't pass these event listeners to the inner div with editorProps because they expect React events, and break when they receive DOM events instead. The ability to pass react props to the inner div would allow us to use the combobox with the rich text editor, and other components that have similar requirements.

Type

New feature