fix(react): fix rebinding events not overwriting editor.on (#3935)

* fix(react): fix rebinding events not overwriting editor.on

* fix(react): move ref assignment inside if

packages/react/src/useEditor.ts

@@ -1,5 +1,10 @@
 import { EditorOptions } from '@tiptap/core'
-import { DependencyList, useEffect, useState } from 'react'
+import {
+  DependencyList,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 
 import { Editor } from './Editor'
 
@@ -25,6 +30,15 @@ export const useEditor = (options: Partial<EditorOptions> = {}, deps: Dependency
     onUpdate,
   } = options
 
+  const onBeforeCreateRef = useRef(onBeforeCreate)
+  const onBlurRef = useRef(onBlur)
+  const onCreateRef = useRef(onCreate)
+  const onDestroyRef = useRef(onDestroy)
+  const onFocusRef = useRef(onFocus)
+  const onSelectionUpdateRef = useRef(onSelectionUpdate)
+  const onTransactionRef = useRef(onTransaction)
+  const onUpdateRef = useRef(onUpdate)
+
   // This effect will handle updating the editor instance
   // when the event handlers change.
   useEffect(() => {
@@ -33,45 +47,53 @@ export const useEditor = (options: Partial<EditorOptions> = {}, deps: Dependency
     }
 
     if (onBeforeCreate) {
-      editor.off('beforeCreate')
+      editor.off('beforeCreate', onBeforeCreateRef.current)
       editor.on('beforeCreate', onBeforeCreate)
+      onBeforeCreateRef.current = onBeforeCreate
     }
 
     if (onBlur) {
-      editor.off('blur')
+      editor.off('blur', onBlurRef.current)
       editor.on('blur', onBlur)
+      onBlurRef.current = onBlur
     }
 
     if (onCreate) {
-      editor.off('create')
+      editor.off('create', onCreateRef.current)
       editor.on('create', onCreate)
+      onCreateRef.current = onCreate
     }
 
     if (onDestroy) {
-      editor.off('destroy')
+      editor.off('destroy', onDestroyRef.current)
       editor.on('destroy', onDestroy)
+      onDestroyRef.current = onDestroy
     }
 
     if (onFocus) {
-      editor.off('focus')
+      editor.off('focus', onFocusRef.current)
       editor.on('focus', onFocus)
+      onFocusRef.current = onFocus
     }
 
     if (onSelectionUpdate) {
-      editor.off('selectionUpdate')
+      editor.off('selectionUpdate', onSelectionUpdateRef.current)
       editor.on('selectionUpdate', onSelectionUpdate)
+      onSelectionUpdateRef.current = onSelectionUpdate
     }
 
     if (onTransaction) {
-      editor.off('transaction')
+      editor.off('transaction', onTransactionRef.current)
       editor.on('transaction', onTransaction)
+      onTransactionRef.current = onTransaction
     }
 
     if (onUpdate) {
-      editor.off('update')
+      editor.off('update', onUpdateRef.current)
       editor.on('update', onUpdate)
+      onUpdateRef.current = onUpdate
     }
-  }, [onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate])
+  }, [onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate, editor])
 
   useEffect(() => {
     let isMounted = true