@tiptap/react 2.11.1 → 2.11.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/react",
   "description": "React components for tiptap",
-  "version": "2.11.1",
+  "version": "2.11.3",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -29,15 +29,15 @@
     "dist"
   ],
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.11.1",
-    "@tiptap/extension-floating-menu": "^2.11.1",
+    "@tiptap/extension-bubble-menu": "^2.11.3",
+    "@tiptap/extension-floating-menu": "^2.11.3",
     "@types/use-sync-external-store": "^0.0.6",
     "fast-deep-equal": "^3",
     "use-sync-external-store": "^1"
   },
   "devDependencies": {
-    "@tiptap/core": "^2.11.1",
-    "@tiptap/pm": "^2.11.1",
+    "@tiptap/core": "^2.11.3",
+    "@tiptap/pm": "^2.11.3",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "react": "^18.0.0",

package/src/useEditor.ts

@@ -184,6 +184,33 @@ class EditorInstanceManager {
     }
   }
 
+  static compareOptions(a: UseEditorOptions, b: UseEditorOptions) {
+    return (Object.keys(a) as (keyof UseEditorOptions)[]).every(key => {
+      if (['onCreate', 'onBeforeCreate', 'onDestroy', 'onUpdate', 'onTransaction', 'onFocus', 'onBlur', 'onSelectionUpdate', 'onContentError', 'onDrop', 'onPaste'].includes(key)) {
+        // we don't want to compare callbacks, they are always different and only registered once
+        return true
+      }
+
+      // We often encourage putting extensions inlined in the options object, so we will do a slightly deeper comparison here
+      if (key === 'extensions' && a.extensions && b.extensions) {
+        if (a.extensions.length !== b.extensions.length) {
+          return false
+        }
+        return a.extensions.every((extension, index) => {
+          if (extension !== b.extensions?.[index]) {
+            return false
+          }
+          return true
+        })
+      }
+      if (a[key] !== b[key]) {
+        // if any of the options have changed, we should update the editor options
+        return false
+      }
+      return true
+    })
+  }
+
   /**
    * On each render, we will create, update, or destroy the editor instance.
    * @param deps The dependencies to watch for changes
@@ -197,12 +224,15 @@ class EditorInstanceManager {
       clearTimeout(this.scheduledDestructionTimeout)
 
       if (this.editor && !this.editor.isDestroyed && deps.length === 0) {
-        // if the editor does exist & deps are empty, we don't need to re-initialize the editor
-        // we can fast-path to update the editor options on the existing instance
-        this.editor.setOptions({
-          ...this.options.current,
-          editable: this.editor.isEditable,
-        })
+        // if the editor does exist & deps are empty, we don't need to re-initialize the editor generally
+        if (!EditorInstanceManager.compareOptions(this.options.current, this.editor.options)) {
+          // But, the options are different, so we need to update the editor options
+          // Still, this is faster than re-creating the editor
+          this.editor.setOptions({
+            ...this.options.current,
+            editable: this.editor.isEditable,
+          })
+        }
       } else {
         // When the editor:
         // - does not yet exist