fix: backwards-compat for _extensions (#1708)

Author: nperez0111

.eslintrc.js

@@ -0,0 +1,42 @@
+{
+  "root": true,
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "react-app",
+    "react-app/jest"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["import", "@typescript-eslint"],
+  "settings": {
+    "import/extensions": [".ts", ".cts", ".mts", ".tsx", ".js", ".jsx"],
+    "import/external-module-folders": ["node_modules", "node_modules/@types"],
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".cts", ".mts", ".tsx"]
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".ts", ".cts", ".mts", ".tsx", ".js", ".jsx"]
+      }
+    }
+  },
+  "ignorePatterns": ["**/ui/*"],
+  "rules": {
+    "no-console": "error",
+    "curly": 1,
+    "import/extensions": ["error", "always", { "ignorePackages": true }],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true,
+        "peerDependencies": true,
+        "optionalDependencies": false,
+        "bundledDependencies": false
+      }
+    ],
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "import/no-cycle": "error"
+  }
+}

.eslintrc.json

@@ -5,6 +5,6 @@
   "tags": ["Extension"],
   "pro": true,
   "dependencies": {
-    "@tiptap/core": "^2"
+    "@tiptap/core": "^2.12.0"
   }
 }

examples/08-extensions/01-tiptap-arrow-conversion/.bnexample.json

@@ -17,7 +17,7 @@
     "@blocknote/shadcn": "latest",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@tiptap/core": "^2"
+    "@tiptap/core": "^2.12.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",

examples/08-extensions/01-tiptap-arrow-conversion/package.json

@@ -1,5 +1,6 @@
 {
   "name": "root",
+  "type": "module",
   "devDependencies": {
     "@nx/js": "20.6.4",
     "@typescript-eslint/eslint-plugin": "^5.5.0",

package.json

@@ -78,7 +78,7 @@
   },
   "eslintConfig": {
     "extends": [
-      "../../.eslintrc.js"
+      "../../.eslintrc.json"
     ]
   }
 }

packages/ariakit/package.json

@@ -70,7 +70,7 @@
   },
   "eslintConfig": {
     "extends": [
-      "../../.eslintrc.js"
+      "../../.eslintrc.json"
     ]
   },
   "gitHead": "37614ab348dcc7faa830a9a88437b37197a2162d"

packages/code-block/package.json

@@ -137,7 +137,7 @@
   },
   "eslintConfig": {
     "extends": [
-      "../../.eslintrc.js"
+      "../../.eslintrc.json"
     ]
   },
   "gitHead": "37614ab348dcc7faa830a9a88437b37197a2162d"

packages/core/package.json

@@ -380,7 +380,14 @@ export type BlockNoteEditorOptions<
    *
    * @deprecated, should use `extensions` instead
    */
-  _extensions: Record<string, BlockNoteExtension | BlockNoteExtensionFactory>;
+  _extensions: Record<
+    string,
+    | { plugin: Plugin; priority?: number }
+    | ((editor: BlockNoteEditor<any, any, any>) => {
+        plugin: Plugin;
+        priority?: number;
+      })
+  >;
 
   /**
    * Register
@@ -630,17 +637,44 @@ export class BlockNoteEditor<
         // factory
         ext = ext(this);
       }
-      const key = (ext.constructor as any).name();
+      const key = (ext.constructor as any).key();
+      if (!key) {
+        throw new Error(
+          `Extension ${ext.constructor.name} does not have a key method`,
+        );
+      }
+      if (this.extensions[key]) {
+        throw new Error(
+          `Extension ${ext.constructor.name} already exists with key ${key}`,
+        );
+      }
       this.extensions[key] = ext;
     }
 
     // (when passed in via the deprecated `_extensions` option)
     Object.entries(newOptions._extensions || {}).forEach(([key, ext]) => {
-      if (typeof ext === "function") {
-        // factory
-        ext = ext(this);
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const editor = this;
+
+      const instance = typeof ext === "function" ? ext(editor) : ext;
+      if (!("plugin" in instance)) {
+        // Assume it is an Extension/Mark/Node
+        this.extensions[key] = instance;
+        return;
       }
-      this.extensions[key] = ext;
+
+      this.extensions[key] = new (class extends BlockNoteExtension {
+        public static key() {
+          return key;
+        }
+        constructor() {
+          super();
+          this.addProsemirrorPlugin(instance.plugin);
+        }
+        public get priority() {
+          return instance.priority;
+        }
+      })();
     });
 
     this.formattingToolbar = this.extensions["formattingToolbar"] as any;
@@ -901,7 +935,7 @@ export class BlockNoteEditor<
    */
   public extension<T extends BlockNoteExtension>(
     ext: { new (...args: any[]): T } & typeof BlockNoteExtension,
-    key = ext.name(),
+    key = ext.key(),
   ): T {
     const extension = this.extensions[key] as T;
     if (!extension) {

packages/core/src/editor/BlockNoteEditor.ts

@@ -4,8 +4,8 @@ import { EventEmitter } from "../util/EventEmitter.js";
 export abstract class BlockNoteExtension<
   TEvent extends Record<string, any> = any,
 > extends EventEmitter<TEvent> {
-  public static name(): string {
-    throw new Error("You must implement the name method in your extension");
+  public static key(): string {
+    throw new Error("You must implement the key method in your extension");
   }
 
   protected addProsemirrorPlugin(plugin: Plugin) {