Extension.configure will trigger parent callbacks twice

[634750802]

  configure(options: Partial<Options> = {}) {
    // return a new instance so we can use the same extension
    // with different calls of `configure`
    const extension = this.extend()

    extension.options = mergeDeep(this.options as Record<string, any>, options) as Options

    extension.storage = callOrReturn(
      getExtensionField<AnyConfig['addStorage']>(extension, 'addStorage', {
        name: extension.name,
        options: extension.options,
      }),
    )

    return extension
  }

Extension.configure() calls Extension.extends() and create a new forked extension which parent point to original extension. But the options (which contains callbacks like onCreate) are merged to new extension, which will cause callbacks with this.parent?.() to be called twice.

To be clear:

A = SomeExtension.extends({
  onCreate () {
    this.parent?.()
    // ...
  }
});

A1 = A.configure();
// A1.parent === A
// A1.options.onCreate === A.options.onCreate (merged from A)
// A1.options.onCreate's parent() will call A.options.onCreate which is the same function

Maybe assigning the this.parent to extension.parent will fix this?

[634750802]

With pnpm patch, the problem is resolved.

@tiptap__core@2.3.2.patch:

diff --git a/dist/index.cjs b/dist/index.cjs
index 87b0a7ef77f5ec66e57138e5cc9f3b0ce2e91755..7a590f8d0af92fb413d2c8be1a0c469ad9599ef0 100644
--- a/dist/index.cjs
+++ b/dist/index.cjs
@@ -1220,6 +1220,7 @@ class Extension {
         // return a new instance so we can use the same extension
         // with different calls of `configure`
         const extension = this.extend();
+        extension.parent = this.parent;
         extension.options = mergeDeep(this.options, options);
         extension.storage = callOrReturn(getExtensionField(extension, 'addStorage', {
             name: extension.name,
diff --git a/dist/index.js b/dist/index.js
index 5bd6638b45c1349e8bb514fe90c92e1ddce6df8c..1c2b9a65a7b4f502c4bbc9968cc57a89d60e4910 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1216,6 +1216,7 @@ class Extension {
         // return a new instance so we can use the same extension
         // with different calls of `configure`
         const extension = this.extend();
+        extension.parent = this.parent;
         extension.options = mergeDeep(this.options, options);
         extension.storage = callOrReturn(getExtensionField(extension, 'addStorage', {
             name: extension.name,
diff --git a/dist/index.umd.js b/dist/index.umd.js
index a3e12082c4dd863025952df4e3f62e7b7441a61e..59c28940fb2a197c9516d7bae7da581177b5bfd4 100644
--- a/dist/index.umd.js
+++ b/dist/index.umd.js
@@ -4267,6 +4267,7 @@ img.ProseMirror-separator {
           // return a new instance so we can use the same extension
           // with different calls of `configure`
           const extension = this.extend();
+          extension.parent = this.parent;
           extension.options = mergeDeep(this.options, options);
           extension.storage = callOrReturn(getExtensionField(extension, 'addStorage', {
               name: extension.name,

[634750802]

@bdbch

[634750802]

related issues:

• [Bug]:The EditorProvider component in React 18 strict mode, the onCreate method is called twice, but the onDestroy method is not called. #4724
• [Bug]: 2.2.0-rc.7 upgrade - "Error: Adding different instances of a keyed plugin (plugin$)" -- worked in 2.1.x #4704
• [Bug]: addProseMirrorPlugins fires twice at editor initialization #4257

[nperez0111]

Thanks for your contribution @634750802 , I've incorporated it here: #5147

Just for next time, this would've been great as an issue or PR. Appreciate your help here

[nperez0111]

This is apart of release 2.4.0 now. Feel free to try it out