fix(react): allow updating event handlers on editor (ueberdosis#3811)

src/useEditor.ts

@@ -11,8 +11,68 @@ function useForceUpdate() {
 
 export const useEditor = (options: Partial<EditorOptions> = {}, deps: DependencyList = []) => {
   const [editor, setEditor] = useState<Editor | null>(null)
+
   const forceUpdate = useForceUpdate()
 
+  const {
+    onBeforeCreate,
+    onBlur,
+    onCreate,
+    onDestroy,
+    onFocus,
+    onSelectionUpdate,
+    onTransaction,
+    onUpdate,
+  } = options
+
+  // This effect will handle updating the editor instance
+  // when the event handlers change.
+  useEffect(() => {
+    if (!editor) {
+      return
+    }
+
+    if (onBeforeCreate) {
+      editor.off('beforeCreate')
+      editor.on('beforeCreate', onBeforeCreate)
+    }
+
+    if (onBlur) {
+      editor.off('blur')
+      editor.on('blur', onBlur)
+    }
+
+    if (onCreate) {
+      editor.off('create')
+      editor.on('create', onCreate)
+    }
+
+    if (onDestroy) {
+      editor.off('destroy')
+      editor.on('destroy', onDestroy)
+    }
+
+    if (onFocus) {
+      editor.off('focus')
+      editor.on('focus', onFocus)
+    }
+
+    if (onSelectionUpdate) {
+      editor.off('selectionUpdate')
+      editor.on('selectionUpdate', onSelectionUpdate)
+    }
+
+    if (onTransaction) {
+      editor.off('transaction')
+      editor.on('transaction', onTransaction)
+    }
+
+    if (onUpdate) {
+      editor.off('update')
+      editor.on('update', onUpdate)
+    }
+  }, [onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate])
+
   useEffect(() => {
     let isMounted = true