feat: move all blocks to use the custom blocks API (#1904)

Co-authored-by: Matthew Lipski <matthewlipski@gmail.com>
Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com>

Author: nperez0111

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} />;

docs/content/docs/features/custom-schemas/custom-inline-content.mdx

@@ -51,7 +51,6 @@ type CustomInlineContentConfig = {
   type: string;
   content: "styled" | "none";
   readonly propSchema: PropSchema;
-  draggable?: boolean;
 };
 ```
 
@@ -100,14 +99,15 @@ If you do not want the prop to have a default value, you can define it as an obj
   mentioned._
 </Callout>
 
-`draggable?:` Whether the inline content should be draggable.
-
 ### Inline Content Implementation (`ReactCustomInlineContentImplementation`)
 
 The Inline Content Implementation defines how the inline content should be rendered to HTML.
 
 ```typescript
 type ReactCustomInlineContentImplementation = {
+  meta?: {
+    draggable?: boolean;
+  };
   render: React.FC<{
     inlineContent: InlineContent;
     contentRef?: (node: HTMLElement | null) => void;
@@ -124,6 +124,8 @@ type ReactCustomInlineContentImplementation = {
 
 - `draggable:` Specifies whether the inline content can be dragged within the editor. If set to `true`, the inline content will be draggable. Defaults to `false` if not specified. If this is true, you should add `data-drag-handle` to the DOM element that should function as the drag handle.
 
+`meta?.draggable?:` Whether the inline content should be draggable.
+
 <Callout type="info">
   _Note that since inline content is, by definition, inline, your component
   should also return an HTML inline element._

docs/package.json

@@ -140,4 +140,4 @@
     "y-partykit": "^0.0.33",
     "yjs": "^13.6.27"
   }
-}
+}

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(
@@ -297,6 +303,10 @@ function MUITextAlignButton(props: {
     editor.focus();
   }, [editor, props.textAlignment]);
 
+  if (!activeTextAlignment) {
+    return null;
+  }
+
   return (
     <MUIToolbarButton
       tooltip={tooltip}

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",