refactor(extensions): rewrite to use new extension system

docs/content/docs/features/ai/custom-commands.mdx

@@ -26,8 +26,8 @@ First, we define a new AI command. Let's create one that makes selected text mor
 
 ```tsx
 import {
+  AIExtension,
   AIMenuSuggestionItem,
-  getAIExtension,
   aiDocumentFormats,
 } from "@blocknote/xl-ai";
 
@@ -40,7 +40,7 @@ export const makeInformal = (
   aliases: ["informal", "make informal", "casual"],
   icon: <RiEmotionHappyFill size={18} />,
   onItemClick: async () => {
-    await getAIExtension(editor).invokeAI({
+    await editor.getExtension(AIExtension)?.invokeAI({
       // The prompt to send to the LLM:
       userPrompt: "Give the selected text a more informal (casual) tone",
       // Tell the LLM to specifically use the selected content as context (instead of the whole document)

docs/content/docs/features/ai/reference.mdx

@@ -52,14 +52,6 @@ type AIRequestHelpers = {
 };
 ```
 
-## `getAIExtension`
-
-Use `getAIExtension` to retrieve the AI extension instance registered to the editor:
-
-```typescript
-function getAIExtension(editor: BlockNoteEditor): AIExtension;
-```
-
 ## `AIExtension`
 
 The `AIExtension` class is the main class for the AI extension. It exposes state and methods to interact with BlockNote's AI features.

docs/content/docs/features/extensions.mdx

@@ -14,7 +14,7 @@ BlockNote includes an extensions system which lets you expand the editor's behav
 
 ## Creating an extension
 
-An extension is an instance of the [`BlockNoteExtension`](https://github.com/TypeCellOS/BlockNote/blob/10cdbfb5f77ef82f3617c0fa1191e0bf5b7358c5/packages/core/src/editor/BlockNoteExtension.ts#L13) class. However, it's recommended for most use cases to create extensions using the `createBlockNoteExtension` function, rather than instanciating the class directly:
+An extension is an instance of the [`BlockNoteExtension`](https://github.com/TypeCellOS/BlockNote/blob/10cdbfb5f77ef82f3617c0fa1191e0bf5b7358c5/packages/core/src/editor/BlockNoteExtension.ts#L13) class. However, it's recommended for most use cases to create extensions using the `createExtension` function, rather than instanciating the class directly:
 
 ```typescript
 type BlockNoteExtensionOptions = {
@@ -43,10 +43,10 @@ const customBlockExtensionOptions: BlockNoteExtensionOptions = {
   tiptapExtensions: ...,
 }
 
-const CustomExtension = createBlockNoteExtension(customBlockExtensionOptions);
+const CustomExtension = createExtension(customBlockExtensionOptions);
 ```
 
-Let's go over the options that can be passed into `createBlockNoteExtension`:
+Let's go over the options that can be passed into `createExtension`:
 
 `key:` The name of the extension.
 
@@ -74,7 +74,7 @@ The `extensions` [editor option](/docs/reference/editor/overview#options) takes
 const editor = useCreateBlockNote({
   extensions: [
     // Add extensions here:
-    createBlockNoteExtension({ ... })
+    createExtension({ ... })
   ],
 });
 ```
@@ -95,7 +95,7 @@ const createCustomBlock = createReactBlockSpec(
   }
   [
     // Add extensions here:
-    createBlockNoteExtension({ ... })
+    createExtension({ ... })
   ],
 });
 ```

docs/content/docs/reference/editor/events.mdx

@@ -16,17 +16,6 @@ The editor emits events for:
 - **Content changes** - When blocks are inserted, updated, or deleted
 - **Selection changes** - When the cursor position or selection changes
 
-## `onCreate`
-
-The `onCreate` callback is called when the editor has been initialized and is ready for use.
-
-```typescript
-editor.onCreate(() => {
-  console.log("Editor is ready for use");
-  // Initialize plugins, set up event listeners, etc.
-});
-```
-
 ## `onMount`
 
 The `onMount` callback is called when the editor has been mounted.

docs/package.json

@@ -77,7 +77,7 @@
     "better-sqlite3": "^11.10.0",
     "classnames": "2.3.2",
     "clsx": "2.1.1",
-    "docx": "^9.0.2",
+    "docx": "^9.5.1",
     "framer-motion": "^11.18.2",
     "fumadocs-core": "15.5.4",
     "fumadocs-docgen": "2.0.1",

examples/01-basic/03-multi-column/src/App.tsx

@@ -1,8 +1,8 @@
 import {
   BlockNoteSchema,
   combineByGroup,
-  filterSuggestionItems,
 } from "@blocknote/core";
+import { filterSuggestionItems } from "@blocknote/core/extensions";
 import * as locales from "@blocknote/core/locales";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";

examples/03-ui-components/02-formatting-toolbar-buttons/src/BlueButton.tsx

@@ -2,10 +2,9 @@ import "@blocknote/mantine/style.css";
 import {
   useBlockNoteEditor,
   useComponentsContext,
-  useEditorContentOrSelectionChange,
+  useEditorState,
   useSelectedBlocks,
 } from "@blocknote/react";
-import { useState } from "react";
 
 // Custom Formatting Toolbar Button to toggle blue text & background color.
 export function BlueButton() {
@@ -14,18 +13,12 @@ export function BlueButton() {
   const Components = useComponentsContext()!;
 
   // Tracks whether the text & background are both blue.
-  const [isSelected, setIsSelected] = useState<boolean>(
-    editor.getActiveStyles().textColor === "blue" &&
-      editor.getActiveStyles().backgroundColor === "blue",
-  );
-
-  // Updates state on content or selection change.
-  useEditorContentOrSelectionChange(() => {
-    setIsSelected(
+  const isSelected = useEditorState({
+    editor,
+    selector: ({ editor }) =>
       editor.getActiveStyles().textColor === "blue" &&
-        editor.getActiveStyles().backgroundColor === "blue",
-    );
-  }, editor);
+      editor.getActiveStyles().backgroundColor === "blue",
+  });
 
   // Doesn't render unless a at least one block with inline content is
   // selected. You can use a similar pattern of returning `null` to

examples/03-ui-components/04-side-menu-buttons/src/App.tsx

@@ -39,7 +39,7 @@ export default function App() {
         sideMenu={(props) => (
           <SideMenu {...props}>
             {/* Button which removes the hovered block. */}
-            <RemoveBlockButton {...props} />
+            <RemoveBlockButton />
             <DragHandleButton {...props} />
           </SideMenu>
         )}

examples/03-ui-components/04-side-menu-buttons/src/RemoveBlockButton.tsx

@@ -1,24 +1,28 @@
+import {} from "@blocknote/core";
+import { SideMenuExtension } from "@blocknote/core/extensions";
 import {
-  SideMenuProps,
   useBlockNoteEditor,
   useComponentsContext,
+  useExtension,
 } from "@blocknote/react";
 import { MdDelete } from "react-icons/md";
 
 // Custom Side Menu button to remove the hovered block.
-export function RemoveBlockButton(props: SideMenuProps) {
+export function RemoveBlockButton() {
   const editor = useBlockNoteEditor();
 
   const Components = useComponentsContext()!;
 
+  const sideMenu = useExtension(SideMenuExtension);
+
   return (
     <Components.SideMenu.Button
       label="Remove block"
       icon={
         <MdDelete
           size={24}
           onClick={() => {
-            editor.removeBlocks([props.block]);
+            editor.removeBlocks([sideMenu.store.state!.block]);
           }}
         />
       }

examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx

@@ -4,7 +4,6 @@ import "@blocknote/mantine/style.css";
 import {
   BlockColorsItem,
   DragHandleMenu,
-  DragHandleMenuProps,
   RemoveBlockItem,
   SideMenu,
   SideMenuController,
@@ -16,12 +15,12 @@ import { ResetBlockTypeItem } from "./ResetBlockTypeItem";
 // To avoid rendering issues, it's good practice to define your custom drag
 // handle menu in a separate component, instead of inline within the `sideMenu`
 // prop of `SideMenuController`.
-const CustomDragHandleMenu = (props: DragHandleMenuProps) => (
-  <DragHandleMenu {...props}>
-    <RemoveBlockItem {...props}>Delete</RemoveBlockItem>
-    <BlockColorsItem {...props}>Colors</BlockColorsItem>
+const CustomDragHandleMenu = () => (
+  <DragHandleMenu>
+    <RemoveBlockItem>Delete</RemoveBlockItem>
+    <BlockColorsItem>Colors</BlockColorsItem>
     {/* Item which resets the hovered block's type. */}
-    <ResetBlockTypeItem {...props}>Reset Type</ResetBlockTypeItem>
+    <ResetBlockTypeItem>Reset Type</ResetBlockTypeItem>
   </DragHandleMenu>
 );
 

examples/03-ui-components/05-side-menu-drag-handle-items/src/ResetBlockTypeItem.tsx

@@ -1,21 +1,26 @@
+import {} from "@blocknote/core";
+import { SideMenuExtension } from "@blocknote/core/extensions";
 import {
-  DragHandleMenuProps,
   useBlockNoteEditor,
   useComponentsContext,
+  useExtension,
 } from "@blocknote/react";
+import { ReactNode } from "react";
 
-export function ResetBlockTypeItem(props: DragHandleMenuProps) {
+export function ResetBlockTypeItem(props: { children: ReactNode }) {
   const editor = useBlockNoteEditor();
 
   const Components = useComponentsContext()!;
 
+  const sideMenu = useExtension(SideMenuExtension);
+
   return (
     <Components.Generic.Menu.Item
       onClick={() => {
-        editor.updateBlock(props.block, { type: "paragraph" });
+        editor.updateBlock(sideMenu.store.state!.block, { type: "paragraph" });
       }}
     >
-      Reset Type
+      {props.children}
     </Components.Generic.Menu.Item>
   );
 }

examples/03-ui-components/06-suggestion-menus-slash-menu-items/src/App.tsx

@@ -1,8 +1,8 @@
+import { BlockNoteEditor } from "@blocknote/core";
 import {
-  BlockNoteEditor,
   filterSuggestionItems,
-  insertOrUpdateBlock,
-} from "@blocknote/core";
+  insertOrUpdateBlockForSlashMenu,
+} from "@blocknote/core/extensions";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
@@ -22,7 +22,7 @@ const insertHelloWorldItem = (editor: BlockNoteEditor) => ({
     // changes its type to the provided block. Otherwise, it inserts the new
     // block below and moves the text caret to it. We use this function with
     // a block containing 'Hello World' in bold.
-    insertOrUpdateBlock(editor, {
+    insertOrUpdateBlockForSlashMenu(editor, {
       type: "paragraph",
       content: [{ type: "text", text: "Hello World", styles: { bold: true } }],
     }),

examples/03-ui-components/10-suggestion-menus-grid-mentions/src/App.tsx

@@ -1,8 +1,8 @@
 import {
   BlockNoteSchema,
   defaultInlineContentSpecs,
-  filterSuggestionItems,
 } from "@blocknote/core";
+import { filterSuggestionItems } from "@blocknote/core/extensions";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";

examples/03-ui-components/11-uppy-file-panel/src/FileReplaceButton.tsx

@@ -48,7 +48,7 @@ export const FileReplaceButton = () => {
   }
 
   return (
-    <Components.Generic.Popover.Root opened={isOpen} position={"bottom"}>
+    <Components.Generic.Popover.Root open={isOpen} position={"bottom"}>
       <Components.Generic.Popover.Trigger>
         <Components.FormattingToolbar.Button
           className={"bn-button"}
@@ -70,7 +70,7 @@ export const FileReplaceButton = () => {
         variant={"panel-popover"}
       >
         {/* Replaces default file panel with our Uppy one. */}
-        <UppyFilePanel block={block as any} />
+        <UppyFilePanel blockId={block.id} />
       </Components.Generic.Popover.Content>
     </Components.Generic.Popover.Root>
   );

examples/03-ui-components/11-uppy-file-panel/src/UppyFilePanel.tsx

@@ -43,7 +43,7 @@ const uppy = new Uppy()
   });
 
 export function UppyFilePanel(props: FilePanelProps) {
-  const { block } = props;
+  const { blockId } = props;
   const editor = useBlockNoteEditor();
 
   useEffect(() => {
@@ -68,7 +68,7 @@ export function UppyFilePanel(props: FilePanelProps) {
             url: response.uploadURL,
           },
         };
-        editor.updateBlock(block, updateData);
+        editor.updateBlock(blockId, updateData);
 
         // File should be removed from the Uppy instance after upload.
         uppy.removeFile(file.id);
@@ -78,7 +78,7 @@ export function UppyFilePanel(props: FilePanelProps) {
     return () => {
       uppy.off("upload-success", handler);
     };
-  }, [block, editor]);
+  }, [blockId, editor]);
 
   // set up dashboard as in https://uppy.io/examples/
   return <Dashboard uppy={uppy} width={400} height={500} />;

examples/03-ui-components/13-custom-ui/src/App.tsx

@@ -1,4 +1,5 @@
-import { filterSuggestionItems } from "@blocknote/core";
+import {  } from "@blocknote/core";
+import { filterSuggestionItems } from "@blocknote/core/extensions";
 import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteViewRaw,