Ref for editor gets executed on every render

[firatoezcan]

Describe the bug

The ref function passed into RichTextEditor gets executed on every render. This makes it not possible to use ref callbacks for focusing the editor and forces us to use useEffect.

This is the line that is responsible for it: https://github.com/sjdemartini/mui-tiptap/blob/main/src/RichTextEditor.tsx#L104

There is no dependency array for useImperativeHandle.

To Reproduce

Add this function below outside of the react component (so its stable) and add it as ref

const focus = (el: RichTextEditorRef) => {
  console.log("Focus")
  el?.editor?.commands.focus()
}

Console is spammed with Focus. This f.e. makes it impossible to add a link since the focus will be stolen all the time

Expected behavior

ref callback is only executed once (maybe a few times, but only at the start or when the editor changes)

Fix

diff --git a/dist/esm/RichTextEditor.js b/dist/esm/RichTextEditor.js
index 09efe429431fcbd1217eb775954dbaaadb9717fa..c4bfbc7be4e57f32065ad6f1b790536b9b4992d3 100644
--- a/dist/esm/RichTextEditor.js
+++ b/dist/esm/RichTextEditor.js
@@ -26,7 +26,7 @@ editable = true, ...editorProps }, ref) {
     // Allow consumers of this component to access the editor via ref
     useImperativeHandle(ref, () => ({
         editor: editor,
-    }));
+    }), [editor]);
     // Update editable state if/when it changes
     useEffect(() => {
         if (!editor || editor.isDestroyed || editor.isEditable === editable) {