Merge branch 'refactor/ai-prompts' into feature/ai-abort-2

Author: YousefED

CHANGELOG.md

@@ -1,3 +1,19 @@
+## 0.43.0 (2025-12-01)
+
+### 🚀 Features
+
+- Major Extensions & UI Refactor ([#2143](https://github.com/TypeCellOS/BlockNote/pull/2143))
+
+### 🩹 Fixes
+
+- allow configuring the email body's styles ([#2182](https://github.com/TypeCellOS/BlockNote/pull/2182))
+- **xl-docx-exporter:** improve OOXML interoperability ([#2206](https://github.com/TypeCellOS/BlockNote/pull/2206))
+
+### ❤️ Thank You
+
+- Nick Perez
+- Stephan Meijer @StephanMeijer
+
 ## 0.42.3 (2025-11-19)
 
 ### 🩹 Fixes

docs/app/(home)/hero/DemoEditor.tsx

@@ -1,24 +1,24 @@
 import {
   BlockNoteSchema,
   combineByGroup,
-  filterSuggestionItems,
   uploadToTmpFilesDotOrg_DEV_ONLY,
 } from "@blocknote/core";
-import * as locales from "@blocknote/core/locales";
+import { filterSuggestionItems } from "@blocknote/core/extensions";
 import "@blocknote/core/fonts/inter.css";
+import * as locales from "@blocknote/core/locales";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 import {
   getDefaultReactSlashMenuItems,
   SuggestionMenuController,
   useCreateBlockNote,
 } from "@blocknote/react";
-import { BlockNoteView } from "@blocknote/mantine";
 import {
   getMultiColumnSlashMenuItems,
-  locales as multiColumnLocales,
   multiColumnDropCursor,
+  locales as multiColumnLocales,
   withMultiColumn,
 } from "@blocknote/xl-multi-column";
-import "@blocknote/mantine/style.css";
 import { useTheme } from "next-themes";
 import { useCallback, useMemo, useState } from "react";
 import YPartyKitProvider from "y-partykit/provider";

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

@@ -59,14 +59,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.
@@ -79,9 +71,9 @@ class AIExtension {
   invokeAI(opts: InvokeAIOptions): Promise<void>;
 
   /**
-   * Returns a read-only zustand store with the state of the AI Menu
+   * Returns a read-only Tanstack Store with the state of the AI Menu
    */
-  get store(): ReadonlyStoreApi<{
+  get store(): Store<{
     aiMenuState:
       | ({
           /**
@@ -106,10 +98,10 @@ class AIExtension {
   }>;
 
   /**
-   * Returns a zustand store with the global configuration of the AI Extension.
+   * Returns a Tanstack Store with the global configuration of the AI Extension.
    * These options are used by default across all LLM calls when calling {@link invokeAI}
    */
-  readonly options: StoreApi<AIRequestHelpers>;
+  readonly options: Store<AIRequestHelpers>;
 
   /** Open the AI menu at a specific block */
   openAIMenuAtBlock(blockID: string): void;

docs/content/docs/features/export/email.mdx

@@ -56,6 +56,7 @@ See the [full example](/examples/interoperability/converting-blocks-to-react-ema
 - **footer**: Add content to the bottom of the email (must be a React-Email compatible component)
 - **head**: Inject elements into the [Head element](https://react.email/docs/components/head)
 - **container**: Customize the container element (A component which will wrap the email content including the header and footer)
+- **bodyStyles**: Customize the body styles (a `CSSProperties` object), providing an object here will completely override the default styles with what you provide
 
 Example usage:
 
@@ -82,6 +83,14 @@ const html = await exporter.toReactEmailDocument(editor.document, {
   footer: <Text>Footer</Text>,
   head: <title>My email</title>,
   container: ({ children }) => <Container>{children}</Container>,
+  // These are the default body styles that are set by default
+  bodyStyles: {
+    fontFamily:
+      "'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif",
+    fontSize: "16px",
+    lineHeight: "1.5",
+    color: "#333",
+  },
 });
 ```
 

docs/content/docs/features/extensions.mdx

@@ -14,10 +14,10 @@ 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:
+You can create extensions using the `createExtension` function:
 
 ```typescript
-type BlockNoteExtensionOptions = {
+type Extension = {
   key: string;
   keyboardShortcuts?: Record<
     string,
@@ -35,18 +35,16 @@ type BlockNoteExtensionOptions = {
   tiptapExtensions?: AnyExtension[];
 }
 
-const customBlockExtensionOptions: BlockNoteExtensionOptions = {
+const CustomExtension = createExtension({
   key: "customBlockExtension",
   keyboardShortcuts: ...,
   inputRules: ...,
   plugins: ...,
   tiptapExtensions: ...,
-}
-
-const CustomExtension = createBlockNoteExtension(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.
 
@@ -68,20 +66,20 @@ Extensions can be added to the editor on their own via the [editor options](/doc
 
 ### Adding directly to the editor
 
-The `extensions` [editor option](/docs/reference/editor/overview#options) takes an array of `BlockNoteExtension`s to be added to the editor:
+The `extensions` [editor option](/docs/reference/editor/overview#options) takes an array of extensions to be added to the editor:
 
 ```typescript
 const editor = useCreateBlockNote({
   extensions: [
     // Add extensions here:
-    createBlockNoteExtension({ ... })
+    createExtension({ ... })
   ],
 });
 ```
 
 ### Adding to custom blocks
 
-When creating a [custom block](/docs/features/custom-schemas/custom-blocks#creating-a-custom-block-type) using `createReactBlockSpec`, you can pass an array of `BlockNoteExtension`s to the third parameter:
+When creating a [custom block](/docs/features/custom-schemas/custom-blocks#creating-a-custom-block-type) using `createReactBlockSpec`, you can pass an array of extensions to the third parameter:
 
 ```typescript
 const createCustomBlock = createReactBlockSpec(
@@ -95,7 +93,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",
@@ -103,8 +103,7 @@
     "twoslash": "^0.3.4",
     "y-partykit": "^0.0.25",
     "yjs": "^13.6.27",
-    "zod": "^3.25.76",
-    "zustand": "^5.0.3"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@blocknote/ariakit": "workspace:*",
@@ -142,4 +141,4 @@
     "y-partykit": "^0.0.33",
     "yjs": "^13.6.27"
   }
-}
+}

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