Fix React Dependency Array creating new editor instances instead of reusing existing one

demos/src/Issues/2403/React/index.jsx

@@ -0,0 +1,50 @@
+import './styles.scss'
+
+import Document from '@tiptap/extension-document'
+import Heading from '@tiptap/extension-heading'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import { EditorContent, useEditor } from '@tiptap/react'
+import React, { useState } from 'react'
+
+const TiptapEditor = ({ count, editorClass }) => {
+  const editor = useEditor({
+    extensions: [
+      Document,
+      Heading,
+      Paragraph,
+      Text,
+    ],
+    editorProps: {
+      attributes: {
+        class: editorClass,
+      },
+    },
+    onUpdate: () => {
+      console.log(count)
+    },
+  }, [count, editorClass])
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <div>
+      <EditorContent editor={editor} />
+    </div>
+  )
+}
+
+export default () => {
+  const [count, setCount] = useState(0)
+  const [editorClass, setEditorClass] = useState('my-editor')
+
+  return (
+    <>
+      <button onClick={() => setCount(count + 1)}>Inc</button>
+      <button onClick={() => setEditorClass('my-editor updated-editor')}>Update class</button>
+      <TiptapEditor editorClass={editorClass} count={count} />
+    </>
+  )
+}

demos/src/Issues/2403/React/styles.scss

@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}

packages/react/src/useEditor.ts

@@ -98,24 +98,31 @@ export const useEditor = (options: Partial<EditorOptions> = {}, deps: Dependency
   useEffect(() => {
     let isMounted = true
 
-    const instance = new Editor(options)
+    // if the editor does not exist yet, create a new
+    // editor instance
+    // if the editor does exist, update the editor options accordingly
+    if (!editor) {
+      const instance = new Editor(options)
 
-    setEditor(instance)
+      setEditor(instance)
 
-    instance.on('transaction', () => {
-      requestAnimationFrame(() => {
+      instance.on('transaction', () => {
         requestAnimationFrame(() => {
-          if (isMounted) {
-            forceUpdate()
-          }
+          requestAnimationFrame(() => {
+            if (isMounted) {
+              forceUpdate()
+            }
+          })
         })
       })
-    })
+    } else {
+      editor.setOptions(options)
+    }
 
     return () => {
       isMounted = false
     }
-  }, deps)
+  }, [deps])
 
   useEffect(() => {
     return () => {