TypeCellOS · nperez0111 · Jun 23, 2025 · Apr 22, 2025 · Apr 22, 2025 · Apr 22, 2025
diff --git a/docs/pages/docs/editor-basics/setup.mdx b/docs/pages/docs/editor-basics/setup.mdx
@@ -32,6 +32,9 @@ type BlockNoteEditorOptions = {
     width?: number;
     class?: string;
   }) => Plugin;
+  heading?: {
+    levels?: number[];
+  };
   initialContent?: PartialBlock[];
   pasteHandler?: (context: {
     event: ClipboardEvent;
@@ -73,6 +76,8 @@ The hook takes two optional parameters:
 
 `initialContent:` The content that should be in the editor when it's created, represented as an array of [Partial Blocks](/docs/manipulating-blocks#partial-blocks).
 
+`heading`: Configuration for headings. Allows you to configure the number of levels of headings that should be available in the editor. Defaults to `[1, 2, 3]`. Configurable up to 6 levels of headings.
+
 `pasteHandler`: A function that can be used to override the default paste behavior. See [Paste Handling](/docs/advanced/paste-handling) for more.
 
 `resolveFileUrl:` Function to resolve file URLs for display/download. Useful for creating authenticated URLs or implementing custom protocols.

diff --git a/packages/core/src/blocks/HeadingBlockContent/HeadingBlockContent.ts b/packages/core/src/blocks/HeadingBlockContent/HeadingBlockContent.ts
@@ -11,10 +11,13 @@ import {
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
 import { defaultProps } from "../defaultProps.js";
 import { createToggleWrapper } from "../ToggleWrapper/createToggleWrapper.js";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+
+const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;
 
 export const headingPropSchema = {
   ...defaultProps,
-  level: { default: 1, values: [1, 2, 3] as const },
+  level: { default: 1, values: HEADING_LEVELS },
   isToggleable: { default: false },
 } satisfies PropSchema;
 
@@ -28,8 +31,9 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
   },
 
   addInputRules() {
+    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
     return [
-      ...[1, 2, 3].map((level) => {
+      ...editor.settings.heading.levels.map((level) => {
         // Creates a heading of appropriate level when starting with "#", "##", or "###".
         return new InputRule({
           find: new RegExp(`^(#{${level}})\\s$`),
@@ -61,87 +65,46 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
   },
 
   addKeyboardShortcuts() {
-    return {
-      "Mod-Alt-1": () => {
-        const blockInfo = getBlockInfoFromSelection(this.editor.state);
-        if (
-          !blockInfo.isBlockContainer ||
-          blockInfo.blockContent.node.type.spec.content !== "inline*"
-        ) {
-          return true;
-        }
-
-        // call updateBlockCommand
-        return this.editor.commands.command(
-          updateBlockCommand(blockInfo.bnBlock.beforePos, {
-            type: "heading",
-            props: {
-              level: 1 as any,
-            },
-          }),
-        );
-      },
-      "Mod-Alt-2": () => {
-        const blockInfo = getBlockInfoFromSelection(this.editor.state);
-        if (
-          !blockInfo.isBlockContainer ||
-          blockInfo.blockContent.node.type.spec.content !== "inline*"
-        ) {
-          return true;
-        }
-
-        return this.editor.commands.command(
-          updateBlockCommand(blockInfo.bnBlock.beforePos, {
-            type: "heading",
-            props: {
-              level: 2 as any,
-            },
-          }),
-        );
-      },
-      "Mod-Alt-3": () => {
-        const blockInfo = getBlockInfoFromSelection(this.editor.state);
-        if (
-          !blockInfo.isBlockContainer ||
-          blockInfo.blockContent.node.type.spec.content !== "inline*"
-        ) {
-          return true;
-        }
-
-        return this.editor.commands.command(
-          updateBlockCommand(blockInfo.bnBlock.beforePos, {
-            type: "heading",
-            props: {
-              level: 3 as any,
-            },
-          }),
-        );
-      },
-    };
+    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
+
+    return Object.fromEntries(
+      editor.settings.heading.levels.map((level) => [
+        `Mod-Alt-${level}`,
+        () => {
+          const blockInfo = getBlockInfoFromSelection(this.editor.state);
+          if (
+            !blockInfo.isBlockContainer ||
+            blockInfo.blockContent.node.type.spec.content !== "inline*"
+          ) {
+            return true;
+          }
+
+          return this.editor.commands.command(
+            updateBlockCommand(blockInfo.bnBlock.beforePos, {
+              type: "heading",
+              props: {
+                level: level as any,
+              },
+            }),
+          );
+        },
+      ]),
+    );
   },
   parseHTML() {
+    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
+
     return [
       // Parse from internal HTML.
       {
         tag: "div[data-content-type=" + this.name + "]",
         contentElement: ".bn-inline-content",
       },
-      // Parse from external HTML.
-      {
-        tag: "h1",
-        attrs: { level: 1 },
-        node: "heading",
-      },
-      {
-        tag: "h2",
-        attrs: { level: 2 },
+      ...editor.settings.heading.levels.map((level) => ({
+        tag: `h${level}`,
+        attrs: { level },
         node: "heading",
-      },
-      {
-        tag: "h3",
-        attrs: { level: 3 },
-        node: "heading",
-      },
+      })),
     ];
   },
 

diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css
@@ -130,6 +130,15 @@ NESTED BLOCKS
 [data-content-type="heading"][data-level="3"] {
   --level: 1.3em;
 }
+[data-content-type="heading"][data-level="4"] {
+  --level: 1em;
+}
+[data-content-type="heading"][data-level="5"] {
+  --level: 0.9em;
+}
+[data-content-type="heading"][data-level="6"] {
+  --level: 0.8em;
+}
 
 [data-prev-level="1"] {
   --prev-level: 3em;
@@ -140,6 +149,15 @@ NESTED BLOCKS
 [data-prev-level="3"] {
   --prev-level: 1.3em;
 }
+[data-prev-level="4"] {
+  --prev-level: 1em;
+}
+[data-prev-level="5"] {
+  --prev-level: 0.9em;
+}
+[data-prev-level="6"] {
+  --prev-level: 0.8em;
+}
 
 .bn-block-outer[data-prev-type="heading"] > .bn-block > .bn-block-content {
   font-size: var(--prev-level);

diff --git a/packages/core/src/editor/BlockNoteEditor.ts b/packages/core/src/editor/BlockNoteEditor.ts
@@ -229,6 +229,18 @@ 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 partial block objects.
    */
@@ -527,6 +539,9 @@ export class BlockNoteEditor<
       headers: boolean;
     };
     codeBlock: CodeBlockOptions;
+    heading: {
+      levels: (1 | 2 | 3 | 4 | 5 | 6)[];
+    };
   };
 
   public static create<
@@ -580,6 +595,9 @@ export class BlockNoteEditor<
         supportedLanguages: options?.codeBlock?.supportedLanguages ?? {},
         createHighlighter: options?.codeBlock?.createHighlighter ?? undefined,
       },
+      heading: {
+        levels: options?.heading?.levels ?? [1, 2, 3],
+      },
     };
 
     // apply defaults

diff --git a/packages/core/src/editor/editor.css b/packages/core/src/editor/editor.css
@@ -44,6 +44,9 @@ Tippy popups that are appended to document.body directly
 .bn-default-styles h1,
 .bn-default-styles h2,
 .bn-default-styles h3,
+.bn-default-styles h4,
+.bn-default-styles h5,
+.bn-default-styles h6,
 .bn-default-styles li {
   margin: 0;
   padding: 0;

diff --git a/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts b/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts
@@ -122,37 +122,6 @@ export function getDefaultSlashMenuItems<
         key: "heading_3",
         ...editor.dictionary.slash_menu.heading_3,
       },
-      {
-        onItemClick: () => {
-          insertOrUpdateBlock(editor, {
-            type: "heading",
-            props: { level: 1, isToggleable: true },
-          });
-        },
-        key: "toggle_heading",
-        ...editor.dictionary.slash_menu.toggle_heading,
-      },
-      {
-        onItemClick: () => {
-          insertOrUpdateBlock(editor, {
-            type: "heading",
-            props: { level: 2, isToggleable: true },
-          });
-        },
-
-        key: "toggle_heading_2",
-        ...editor.dictionary.slash_menu.toggle_heading_2,
-      },
-      {
-        onItemClick: () => {
-          insertOrUpdateBlock(editor, {
-            type: "heading",
-            props: { level: 3, isToggleable: true },
-          });
-        },
-        key: "toggle_heading_3",
-        ...editor.dictionary.slash_menu.toggle_heading_3,
-      },
     );
   }
 
@@ -346,6 +315,57 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  if (checkDefaultBlockTypeInSchema("heading", editor)) {
+    items.push(
+      {
+        onItemClick: () => {
+          insertOrUpdateBlock(editor, {
+            type: "heading",
+            props: { level: 1, isToggleable: true },
+          });
+        },
+        key: "toggle_heading",
+        ...editor.dictionary.slash_menu.toggle_heading,
+      },
+      {
+        onItemClick: () => {
+          insertOrUpdateBlock(editor, {
+            type: "heading",
+            props: { level: 2, isToggleable: true },
+          });
+        },
+
+        key: "toggle_heading_2",
+        ...editor.dictionary.slash_menu.toggle_heading_2,
+      },
+      {
+        onItemClick: () => {
+          insertOrUpdateBlock(editor, {
+            type: "heading",
+            props: { level: 3, isToggleable: true },
+          });
+        },
+        key: "toggle_heading_3",
+        ...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}`],
+        });
+      });
+  }
+
   items.push({
     onItemClick: () => {
       editor.openSuggestionMenu(":", {

diff --git a/packages/core/src/i18n/locales/ar.ts b/packages/core/src/i18n/locales/ar.ts
@@ -20,23 +20,41 @@ export const ar: Dictionary = {
       aliases: ["ع3", "عنوان3", "عنوان فرعي"],
       group: "العناوين",
     },
+    heading_4: {
+      title: "عنوان 4",
+      subtext: "عنوان فرعي ثانوي صغير",
+      aliases: ["ع4", "عنوان4", "عنوان فرعي صغير"],
+      group: "العناوين الفرعية",
+    },
+    heading_5: {
+      title: "عنوان 5",
+      subtext: "عنوان فرعي صغير",
+      aliases: ["ع5", "عنوان5", "عنوان فرعي صغير"],
+      group: "العناوين الفرعية",
+    },
+    heading_6: {
+      title: "عنوان 6",
+      subtext: "أدنى مستوى للعناوين",
+      aliases: ["ع6", "عنوان6", "العنوان الفرعي الأدنى"],
+      group: "العناوين الفرعية",
+    },
     toggle_heading: {
       title: "عنوان قابل للطي 1",
       subtext: "عنوان قابل للطي لإظهار وإخفاء المحتوى",
       aliases: ["ع", "عنوان1", "ع1", "قابل للطي", "طي"],
-      group: "العناوين",
+      group: "العناوين الفرعية",
     },
     toggle_heading_2: {
       title: "عنوان قابل للطي 2",
       subtext: "عنوان فرعي قابل للطي لإظهار وإخفاء المحتوى",
       aliases: ["ع2", "عنوان2", "عنوان فرعي", "قابل للطي", "طي"],
-      group: "العناوين",
+      group: "العناوين الفرعية",
     },
     toggle_heading_3: {
       title: "عنوان قابل للطي 3",
       subtext: "عنوان فرعي ثانوي قابل للطي لإظهار وإخفاء المحتوى",
       aliases: ["ع3", "عنوان3", "عنوان فرعي", "قابل للطي", "طي"],
-      group: "العناوين",
+      group: "العناوين الفرعية",
     },
     quote: {
       title: "اقتباس",