docs: how to export extension methods

Author: nperez0111

adr/2025_06_13-extensions.md

@@ -39,3 +39,11 @@ Zustand is a popular library, but allowing partial states makes it somewhat unsa
 
 Jotai is probably my second choice, but it makes it a bit awkward to update states because it relies on a separate store instance rather than the "atom" being able to update itself <https://jotai.org/docs/guides/using-store-outside-react>.
 </details>
+
+## Exposing extension methods
+
+Not everything can be communicated through just state, so we need to be able to expose additional methods to the application.
+
+I propose that we have a `extensions` property on the `BlockNoteEditor` instance, which is a map of the extension key to the extension instance, but filtered out to only include non-blocknote methods (as defined by the `ExtensionMethods` type).
+
+This will allow the application to access the extension methods, and also allows us to keep the extension instance private to the editor (type-wise).

adr/BlockNoteExtension.ts

@@ -149,6 +149,10 @@ export class MyExtension extends BlockNoteExtension<{ abc: number[] }> {
   constructor(_extensionOptions: { myCustomOption: string }) {
     super();
   }
+
+  getFoo() {
+    return 8;
+  }
 }
 
 /**
@@ -167,3 +171,18 @@ export function myExtension(_extensionOptions: {
     },
   };
 }
+
+/**
+ * This type exposes the public API of an extension, excluding any {@link BlockNoteExtension} methods (for cleaner typing)
+ */
+export type ExtensionMethods<Extension extends BlockNoteExtension<any>> =
+  Extension extends BlockNoteExtension<infer State>
+    ? Omit<Extension, Exclude<keyof BlockNoteExtension<State>, "store" | "key">>
+    : never;
+
+/**
+ * You'll notice that the `getFoo` method is the only  included type in the `MyExtensionMethods` type,
+ * This makes it convenient to expose the right amount of details to the rest of the application (keeping the blocknote called methods hidden)
+ */
+export type MyExtensionMethods = ExtensionMethods<MyExtension>;
+// editor.extensions.myExtension.getFoo();

package.json

@@ -54,5 +54,8 @@
     "start": "serve playground/dist -c ../serve.json",
     "test": "nx run-many --target=test",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,css,scss,md}\""
+  },
+  "dependencies": {
+    "@tanstack/store": "0.7.1"
   }
 }