Removed codeBlock and heading editor options & updated custom code block examples

Author: matthewlipski

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

@@ -3,12 +3,22 @@ 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 { codeBlock as cb } from "@blocknote/code-block";
+import {
+  BlockNoteSchema,
+  createCodeBlockSpec,
+  defaultBlockSpecs,
+} from "@blocknote/core";
 
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
-    codeBlock,
+    schema: BlockNoteSchema.create({
+      blockSpecs: {
+        ...defaultBlockSpecs,
+        codeBlock: createCodeBlockSpec(cb),
+      },
+    }),
     initialContent: [
       {
         type: "codeBlock",

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

@@ -4,33 +4,43 @@ import "@blocknote/mantine/style.css";
 import { useCreateBlockNote } from "@blocknote/react";
 // Bundle created from `npx shiki-codegen --langs typescript,javascript,react --themes light-plus,dark-plus --engine javascript --precompiled ./shiki.bundle.ts`
 import { createHighlighter } from "./shiki.bundle";
+import {
+  BlockNoteSchema,
+  createCodeBlockSpec,
+  defaultBlockSpecs,
+} from "@blocknote/core";
 
 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({
+      blockSpecs: {
+        ...defaultBlockSpecs,
+        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",

packages/core/src/editor/BlockNoteEditor.ts

@@ -70,7 +70,6 @@ import {
   markdownToBlocks,
   markdownToHTML,
 } from "../api/parsers/markdown/parseMarkdown.js";
-import { CodeBlockOptions } from "../blocks/Code/block.js";
 import { editorHasBlockWithType } from "../blocks/defaultBlockTypeGuards.js";
 import type { ThreadStore, User } from "../comments/index.js";
 import { BlockChangePlugin } from "../extensions/BlockChange/BlockChangePlugin.js";
@@ -190,11 +189,6 @@ export type BlockNoteEditorOptions<
     showCursorLabels?: "always" | "activity";
   };
 
-  /**
-   * Options for code blocks.
-   */
-  codeBlock?: CodeBlockOptions;
-
   /**
    * Configuration for the comments feature, requires a `threadStore`.
    *
@@ -253,18 +247,6 @@ export type BlockNoteEditorOptions<
     class?: string;
   }) => Plugin;
 
-  /**
-   * Configuration for headings
-   */
-  heading?: {
-    /**
-     * The levels of headings that should be available in the editor.
-     * @note Configurable up to 6 levels of headings.
-     * @default [1, 2, 3]
-     */
-    levels?: (1 | 2 | 3 | 4 | 5 | 6)[];
-  };
-
   /**
    * The content that should be in the editor when it's created, represented as an array of {@link PartialBlock} objects.
    *
@@ -585,10 +567,6 @@ export class BlockNoteEditor<
       cellTextColor: boolean;
       headers: boolean;
     };
-    codeBlock: CodeBlockOptions;
-    heading: {
-      levels: (1 | 2 | 3 | 4 | 5 | 6)[];
-    };
   };
 
   public static create<
@@ -638,15 +616,6 @@ export class BlockNoteEditor<
         cellTextColor: options?.tables?.cellTextColor ?? false,
         headers: options?.tables?.headers ?? false,
       },
-      codeBlock: {
-        indentLineWithTab: options?.codeBlock?.indentLineWithTab ?? true,
-        defaultLanguage: options?.codeBlock?.defaultLanguage ?? "text",
-        supportedLanguages: options?.codeBlock?.supportedLanguages ?? {},
-        createHighlighter: options?.codeBlock?.createHighlighter ?? undefined,
-      },
-      heading: {
-        levels: options?.heading?.levels ?? [1, 2, 3],
-      },
     };
 
     // apply defaults

packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -354,21 +354,51 @@ export function getDefaultSlashMenuItems<
         ...editor.dictionary.slash_menu.toggle_heading_3,
       },
     );
+  }
 
-    editor.settings.heading.levels
-      .filter((level): level is 4 | 5 | 6 => level > 3)
-      .forEach((level) => {
-        items.push({
-          onItemClick: () => {
-            insertOrUpdateBlock(editor, {
-              type: "heading",
-              props: { level: level },
-            });
-          },
-          key: `heading_${level}`,
-          ...editor.dictionary.slash_menu[`heading_${level}`],
-        });
-      });
+  if (
+    editorHasBlockWithType(editor, "heading", {
+      level: {
+        default: 1,
+        values: [1, 2, 3, 4, 5, 6],
+      },
+    })
+  ) {
+    items.push(
+      {
+        onItemClick: () => {
+          insertOrUpdateBlock(editor, {
+            type: "heading",
+            props: { level: 4 },
+          });
+        },
+        badge: formatKeyboardShortcut("Mod-Alt-4"),
+        key: "heading_4",
+        ...editor.dictionary.slash_menu.heading_4,
+      },
+      {
+        onItemClick: () => {
+          insertOrUpdateBlock(editor, {
+            type: "heading",
+            props: { level: 5 },
+          });
+        },
+        badge: formatKeyboardShortcut("Mod-Alt-5"),
+        key: "heading_5",
+        ...editor.dictionary.slash_menu.heading_5,
+      },
+      {
+        onItemClick: () => {
+          insertOrUpdateBlock(editor, {
+            type: "heading",
+            props: { level: 6 },
+          });
+        },
+        // badge: formatKeyboardShortcut("Mod-Alt-6"),
+        key: "heading_6",
+        ...editor.dictionary.slash_menu.heading_6,
+      },
+    );
   }
 
   items.push({

packages/core/src/schema/blocks/createSpec.ts

@@ -307,8 +307,8 @@ export function createBlockSpec<
     | (TOptions extends undefined
         ? () => BlockNoteExtension<any>[]
         : (options: Partial<TOptions>) => BlockNoteExtension<any>[]),
-): (options?: TOptions) => BlockSpec<TName, TProps, TContent> {
-  return (options = {} as TOptions) => {
+): (options?: Partial<TOptions>) => BlockSpec<TName, TProps, TContent> {
+  return (options = {} as Partial<TOptions>) => {
     const blockConfig =
       typeof blockConfigOrCreator === "function"
         ? blockConfigOrCreator(options as any)

tests/src/unit/core/createTestEditor.ts

@@ -23,21 +23,6 @@ export const createTestEditor = <
     (window as any).__TEST_OPTIONS = (window as any).__TEST_OPTIONS || {};
 
     editor = BlockNoteEditor.create({
-      codeBlock: {
-        supportedLanguages: {
-          javascript: {
-            name: "JavaScript",
-            aliases: ["js"],
-          },
-          python: {
-            name: "Python",
-            aliases: ["py"],
-          },
-        },
-      },
-      heading: {
-        levels: [1, 2, 3, 4, 5, 6],
-      },
       schema,
       trailingBlock: false,
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/codeBlock/contains-newlines.html

@@ -6,6 +6,12 @@
         data-content-type="codeBlock"
         data-language="javascript"
       >
+        <div>
+          <select>
+            <option value="javascript">JavaScript</option>
+            <option value="python">Python</option>
+          </select>
+        </div>
         <pre>
           <code class="bn-inline-content">const hello ='world';console.log(hello);</code>
         </pre>

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/codeBlock/defaultLanguage.html

@@ -2,6 +2,12 @@
   <div class="bn-block-outer" data-node-type="blockOuter" data-id="1">
     <div class="bn-block" data-node-type="blockContainer" data-id="1">
       <div class="bn-block-content" data-content-type="codeBlock">
+        <div>
+          <select>
+            <option value="javascript">JavaScript</option>
+            <option value="python">Python</option>
+          </select>
+        </div>
         <pre>
           <code class="bn-inline-content">console.log('Hello, world!');</code>
         </pre>

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/codeBlock/empty.html

@@ -2,6 +2,12 @@
   <div class="bn-block-outer" data-node-type="blockOuter" data-id="1">
     <div class="bn-block" data-node-type="blockContainer" data-id="1">
       <div class="bn-block-content" data-content-type="codeBlock">
+        <div>
+          <select>
+            <option value="javascript">JavaScript</option>
+            <option value="python">Python</option>
+          </select>
+        </div>
         <pre>
           <code class="bn-inline-content"></code>
         </pre>

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/codeBlock/python.html

@@ -6,6 +6,12 @@
         data-content-type="codeBlock"
         data-language="python"
       >
+        <div>
+          <select>
+            <option value="javascript">JavaScript</option>
+            <option value="python">Python</option>
+          </select>
+        </div>
         <pre>
           <code class="bn-inline-content">print('Hello, world!')</code>
         </pre>