refactor: move all blocks to use the custom blocks API

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

@@ -16,7 +16,8 @@ import {
   getMultiColumnSlashMenuItems,
   locales as multiColumnLocales,
   multiColumnDropCursor,
-  withMultiColumn,
+  ColumnListBlock,
+  ColumnBlock,
 } from "@blocknote/xl-multi-column";
 import "@blocknote/mantine/style.css";
 import { useTheme } from "next-themes";
@@ -90,7 +91,12 @@ export default function DemoEditor() {
         ...locales.en,
         multi_column: multiColumnLocales.en,
       },
-      schema: withMultiColumn(BlockNoteSchema.create()),
+      schema: BlockNoteSchema.create().extend({
+        blockSpecs: {
+          column: ColumnBlock,
+          columnList: ColumnListBlock,
+        },
+      }),
       dropCursor: multiColumnDropCursor,
       collaboration: {
         provider,

docs/content/docs/features/blocks/code-blocks.mdx

@@ -20,25 +20,27 @@ Code blocks by default are a simple way to display code. But, BlockNote also sup
   experience easy to use and reduce bundle size.
 </Callout>
 
-You can enable more advanced features by passing the `codeBlock` option when creating the editor.
+You can enable more advanced features by extending the editor's default schema with a new `codeBlock`, which you can pass options into when creating. For more on extending the editor schema, see [Custom Schemas](/docs/features/custom-schemas).
 
 ```ts
 const editor = new BlockNoteEditor({
-  codeBlock: {
-    indentLineWithTab: true,
-    defaultLanguage: "typescript",
-    supportedLanguages: {
-      typescript: {
-        name: "TypeScript",
-        aliases: ["ts"],
+  schema: BlockNoteSchema.create().extend({
+    codeBlock: createCodeBlockSpec({
+      indentLineWithTab: true,
+      defaultLanguage: "typescript",
+      supportedLanguages: {
+        typescript: {
+          name: "TypeScript",
+          aliases: ["ts"],
+        },
       },
-    },
-    createHighlighter: () =>
-      createHighlighter({
-        themes: ["light-plus", "dark-plus"],
-        langs: [],
-      }),
-  },
+      createHighlighter: () =>
+        createHighlighter({
+          themes: ["light-plus", "dark-plus"],
+          langs: [],
+        }),
+    }),
+  }),
 });
 ```
 
@@ -64,7 +66,7 @@ type CodeBlock = {
 
 ### Basic Setup
 
-To enable code block syntax highlighting, you can use the `codeBlock` option in the `useCreateBlockNote` hook.
+To enable code block syntax highlighting, you can extend the editor's default schema with a new `codeBlock`.
 
 First, install the package:
 
@@ -75,20 +77,24 @@ npm install @blocknote/code-block
 Then use it like this:
 
 ```tsx
-import { codeBlock } from "@blocknote/code-block";
+import { codeBlockOptions } from "@blocknote/code-block";
 
 export default function App() {
   const editor = useCreateBlockNote({
-    codeBlock,
+    schema: BlockNoteSchema.create().extend({
+      codeBlock: createCodeBlockSpec(codeBlockOptions),
+    }),
   });
 
   return <BlockNoteView editor={editor} />;
 }
 ```
 
+This will extend the default schema with a custom `codeBlock` that includes options from `@blocknote/code-block`, enabling syntax highlighting.
+
 ### Custom Themes & Languages
 
-To configure a code block highlighting theme and language, you can use the `codeBlock` option in the `useCreateBlockNote` hook.
+To configure a code block highlighting theme and language, you can again extend the editor's default schema with a new `codeBlock`.
 
 This allows you to configure a [shiki](https://shiki.style) highlighter for the code blocks of your editor, allowing you to tailor the themes and languages you would like to use.
 
@@ -109,21 +115,23 @@ import { createHighlighter } from "./shiki.bundle.js";
 
 export default function App() {
   const editor = useCreateBlockNote({
-    codeBlock: {
-      indentLineWithTab: true,
-      defaultLanguage: "typescript",
-      supportedLanguages: {
-        typescript: {
-          name: "TypeScript",
-          aliases: ["ts"],
+    schema: BlockNoteSchema.create().extend({
+      codeBlock: createCodeBlockSpec({
+        indentLineWithTab: true,
+        defaultLanguage: "typescript",
+        supportedLanguages: {
+          typescript: {
+            name: "TypeScript",
+            aliases: ["ts"],
+          },
         },
-      },
-      createHighlighter: () =>
-        createHighlighter({
-          themes: ["light-plus", "dark-plus"],
-          langs: [],
-        }),
-    },
+        createHighlighter: () =>
+          createHighlighter({
+            themes: ["light-plus", "dark-plus"],
+            langs: [],
+          }),
+      }),
+    }),
   });
 
   return <BlockNoteView editor={editor} />;

examples/01-basic/01-minimal/package.json

@@ -15,6 +15,7 @@
     "@blocknote/ariakit": "latest",
     "@blocknote/mantine": "latest",
     "@blocknote/shadcn": "latest",
+    "@blocknote/code-block": "latest",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
@@ -24,4 +25,4 @@
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

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

@@ -13,17 +13,23 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 import {
+  ColumnBlock,
+  ColumnListBlock,
   getMultiColumnSlashMenuItems,
   multiColumnDropCursor,
   locales as multiColumnLocales,
-  withMultiColumn,
 } from "@blocknote/xl-multi-column";
 import { useMemo } from "react";
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
     // Adds column and column list blocks to the schema.
-    schema: withMultiColumn(BlockNoteSchema.create()),
+    schema: BlockNoteSchema.create().extend({
+      blockSpecs: {
+        column: ColumnBlock,
+        columnList: ColumnListBlock,
+      },
+    }),
     // The default drop cursor only shows up above and below blocks - we replace
     // it with the multi-column one that also shows up on the sides of blocks.
     dropCursor: multiColumnDropCursor,

examples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsx

@@ -20,7 +20,7 @@ const schema = BlockNoteSchema.create({
     // Adds all default blocks.
     ...defaultBlockSpecs,
     // Adds the Alert block.
-    alert: Alert,
+    alert: Alert(),
   },
 });
 

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

@@ -1,6 +1,6 @@
 import {
   BlockSchema,
-  checkBlockIsFileBlock,
+  blockHasType,
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
@@ -41,7 +41,7 @@ export const FileReplaceButton = () => {
 
   if (
     block === undefined ||
-    !checkBlockIsFileBlock(block, editor) ||
+    !blockHasType(block, editor, "file", { url: "string" }) ||
     !editor.isEditable
   ) {
     return null;

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

@@ -266,18 +266,24 @@ function MUITextAlignButton(props: {
   const editor = useBlockNoteEditor<TextBlockSchema>();
 
   // The text alignment of the block currently containing the text cursor.
-  const [activeTextAlignment, setActiveTextAlignment] = useState(
-    () => editor.getTextCursorPosition().block.props.textAlignment,
-  );
+  const [activeTextAlignment, setActiveTextAlignment] = useState(() => {
+    const props = editor.getTextCursorPosition().block.props;
+    if ("textAlignment" in props) {
+      return props.textAlignment;
+    }
+    return undefined;
+  });
 
   // Updates the text alignment when the editor content or selection changes.
-  useEditorContentOrSelectionChange(
-    () =>
-      setActiveTextAlignment(
-        editor.getTextCursorPosition().block.props.textAlignment,
-      ),
-    editor,
-  );
+  useEditorContentOrSelectionChange(() => {
+    setActiveTextAlignment(() => {
+      const props = editor.getTextCursorPosition().block.props;
+      if ("textAlignment" in props) {
+        return props.textAlignment;
+      }
+      return undefined;
+    });
+  }, editor);
 
   // Tooltip for the button.
   const tooltip = useMemo(

examples/04-theming/06-code-block/README.md

@@ -1,8 +1,9 @@
 # Code Block Syntax Highlighting
 
-To enable code block syntax highlighting, you can use the `codeBlock` option in the `useCreateBlockNote` hook. This is excluded by default to reduce bundle size.
+To enable code block syntax highlighting, you can extend the editor's default schema with a new `codeBlock`, which you can pass options into when creating. By passing the default options from `@blocknote/code-block`, you can enable syntax highlighting. This is excluded by default to reduce bundle size.
 
 **Relevant Docs:**
 
 - [Code Block Syntax Highlighting](/docs/features/blocks/code-blocks)
 - [Editor Setup](/docs/getting-started/editor-setup)
+- [Custom Schema](/docs/features/custom-schemas)

examples/04-theming/06-code-block/src/App.tsx

@@ -1,14 +1,19 @@
+import { BlockNoteSchema, createCodeBlockSpec } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import { useCreateBlockNote } from "@blocknote/react";
 // This packages some of the most used languages in on-demand bundle
-import { codeBlock } from "@blocknote/code-block";
+import { codeBlockOptions } from "@blocknote/code-block";
 
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
-    codeBlock,
+    schema: BlockNoteSchema.create().extend({
+      blockSpecs: {
+        codeBlock: createCodeBlockSpec(codeBlockOptions),
+      },
+    }),
     initialContent: [
       {
         type: "codeBlock",

examples/04-theming/07-custom-code-block/README.md

@@ -1,49 +1,11 @@
 # Custom Code Block Theme & Language
 
-To configure a code block highlighting theme and language, you can use the `codeBlock` option in the `useCreateBlockNote` hook.
+To configure a code block highlighting theme and language, you can extend the editor's default schema with a new `codeBlock`, which you can pass options into when creating. You can then use a shiki highlighter to add custom syntax highlighting.
 
-This allows you to configure a shiki highlighter for the code blocks of your editor, allowing you to tailor the themes and languages you would like to use.
-
-To create a syntax highlighter, you can use the [shiki-codegen](https://shiki.style/packages/codegen) CLI for generating the code to create a syntax highlighter for your languages and themes.
-
-For example to create a syntax highlighter using the optimized javascript engine, javascript, typescript, vue, with light and dark themes, you can run the following command:
-
-```bash
-npx shiki-codegen --langs javascript,typescript,vue --themes light,dark --engine javascript --precompiled ./shiki.bundle.ts
-```
-
-This will generate a `shiki.bundle.ts` file that you can use to create a syntax highlighter for your editor.
-
-Like this:
-
-```ts
-import { createHighlighter } from "./shiki.bundle";
-
-export default function App() {
-  // Creates a new editor instance.
-  const editor = useCreateBlockNote({
-    codeBlock: {
-      indentLineWithTab: true,
-      defaultLanguage: "typescript",
-      supportedLanguages: {
-        typescript: {
-          name: "TypeScript",
-          aliases: ["ts"],
-        },
-      },
-      createHighlighter: () =>
-        createHighlighter({
-          themes: ["light-plus", "dark-plus"],
-          langs: [],
-        }),
-    },
-  });
-
-  return <BlockNoteView editor={editor} />;
-}
-```
+First use the [shiki-codegen](https://shiki.style/packages/codegen) CLI to create a `shiki.bundle.ts` file. You can then pass this file into the `codeBlock` options when creating it.
 
 **Relevant Docs:**
 
 - [Code Blocks](/docs/features/blocks/code-blocks)
 - [shiki-codegen](https://shiki.style/packages/codegen)
+- [Custom Schema](/docs/features/custom-schemas)

examples/04-theming/07-custom-code-block/src/App.tsx

@@ -1,3 +1,4 @@
+import { BlockNoteSchema, createCodeBlockSpec } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
@@ -8,29 +9,33 @@ import { createHighlighter } from "./shiki.bundle";
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
-    codeBlock: {
-      indentLineWithTab: true,
-      defaultLanguage: "typescript",
-      supportedLanguages: {
-        typescript: {
-          name: "TypeScript",
-          aliases: ["ts"],
-        },
-        javascript: {
-          name: "JavaScript",
-          aliases: ["js"],
-        },
-        vue: {
-          name: "Vue",
-        },
-      },
-      // This creates a highlighter, it can be asynchronous to load it afterwards
-      createHighlighter: () =>
-        createHighlighter({
-          themes: ["dark-plus", "light-plus"],
-          langs: [],
+    schema: BlockNoteSchema.create().extend({
+      blockSpecs: {
+        codeBlock: createCodeBlockSpec({
+          indentLineWithTab: true,
+          defaultLanguage: "typescript",
+          supportedLanguages: {
+            typescript: {
+              name: "TypeScript",
+              aliases: ["ts"],
+            },
+            javascript: {
+              name: "JavaScript",
+              aliases: ["js"],
+            },
+            vue: {
+              name: "Vue",
+            },
+          },
+          // This creates a highlighter, it can be asynchronous to load it afterwards
+          createHighlighter: () =>
+            createHighlighter({
+              themes: ["dark-plus", "light-plus"],
+              langs: [],
+            }),
         }),
-    },
+      },
+    }),
     initialContent: [
       {
         type: "codeBlock",