feat: make headings configurable up to 6 levels

Author: nperez0111

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.

packages/core/src/blocks/HeadingBlockContent/HeadingBlockContent.ts

@@ -11,6 +11,7 @@ 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;
 
@@ -30,8 +31,9 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
   },
 
   addInputRules() {
+    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
     return [
-      ...HEADING_LEVELS.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$`),
@@ -63,8 +65,10 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
   },
 
   addKeyboardShortcuts() {
+    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
+
     return Object.fromEntries(
-      HEADING_LEVELS.map((level) => [
+      editor.settings.heading.levels.map((level) => [
         `Mod-Alt-${level}`,
         () => {
           const blockInfo = getBlockInfoFromSelection(this.editor.state);
@@ -88,13 +92,15 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
     );
   },
   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",
       },
-      ...HEADING_LEVELS.map((level) => ({
+      ...editor.settings.heading.levels.map((level) => ({
         tag: `h${level}`,
         attrs: { level },
         node: "heading",

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

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

@@ -122,70 +122,6 @@ export function getDefaultSlashMenuItems<
         key: "heading_3",
         ...editor.dictionary.slash_menu.heading_3,
       },
-      {
-        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,
-      },
-      {
-        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,
-      },
     );
   }
 
@@ -379,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(":", {

packages/core/src/i18n/locales/ar.ts

@@ -24,37 +24,37 @@ export const ar: Dictionary = {
       title: "عنوان 4",
       subtext: "عنوان فرعي ثانوي صغير",
       aliases: ["ع4", "عنوان4", "عنوان فرعي صغير"],
-      group: "العناوين",
+      group: "العناوين الفرعية",
     },
     heading_5: {
       title: "عنوان 5",
       subtext: "عنوان فرعي صغير",
       aliases: ["ع5", "عنوان5", "عنوان فرعي صغير"],
-      group: "العناوين",
+      group: "العناوين الفرعية",
     },
     heading_6: {
       title: "عنوان 6",
       subtext: "أدنى مستوى للعناوين",
       aliases: ["ع6", "عنوان6", "العنوان الفرعي الأدنى"],
-      group: "العناوين",
+      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: "اقتباس",

packages/core/src/i18n/locales/de.ts

@@ -24,25 +24,25 @@ export const de: Dictionary = {
       title: "Überschrift 4",
       subtext: "Überschrift für kleinere Unterabschnitte",
       aliases: ["h4", "überschrift4", "unterüberschrift4"],
-      group: "Überschriften",
+      group: "Unterüberschriften",
     },
     heading_5: {
       title: "Überschrift 5",
       subtext: "Überschrift für tiefere Unterabschnitte",
       aliases: ["h5", "überschrift5", "unterüberschrift5"],
-      group: "Überschriften",
+      group: "Unterüberschriften",
     },
     heading_6: {
       title: "Überschrift 6",
       subtext: "Überschrift auf der untersten Ebene",
       aliases: ["h6", "überschrift6", "unterüberschrift6"],
-      group: "Überschriften",
+      group: "Unterüberschriften",
     },
     toggle_heading: {
       title: "Aufklappbare Überschrift 1",
       subtext: "Aufklappbare Hauptebene Überschrift",
       aliases: ["h", "überschrift1", "h1", "aufklappbar", "einklappbar"],
-      group: "Überschriften",
+      group: "Unterüberschrift",
     },
     toggle_heading_2: {
       title: "Aufklappbare Überschrift 2",
@@ -54,7 +54,7 @@ export const de: Dictionary = {
         "aufklappbar",
         "einklappbar",
       ],
-      group: "Überschriften",
+      group: "Unterüberschriften",
     },
     toggle_heading_3: {
       title: "Aufklappbare Überschrift 3",
@@ -66,7 +66,7 @@ export const de: Dictionary = {
         "aufklappbar",
         "einklappbar",
       ],
-      group: "Überschriften",
+      group: "Unterüberschriften",
     },
     quote: {
       title: "Zitat",

packages/core/src/i18n/locales/en.ts

@@ -22,37 +22,37 @@ export const en = {
       title: "Heading 4",
       subtext: "Minor subsection heading",
       aliases: ["h4", "heading4", "subheading4"],
-      group: "Headings",
+      group: "Subheadings",
     },
     heading_5: {
       title: "Heading 5",
       subtext: "Small subsection heading",
       aliases: ["h5", "heading5", "subheading5"],
-      group: "Headings",
+      group: "Subheadings",
     },
     heading_6: {
       title: "Heading 6",
       subtext: "Lowest-level heading",
       aliases: ["h6", "heading6", "subheading6"],
-      group: "Headings",
+      group: "Subheadings",
     },
     toggle_heading: {
       title: "Toggle Heading 1",
       subtext: "Toggleable top-level heading",
       aliases: ["h", "heading1", "h1", "collapsable"],
-      group: "Headings",
+      group: "Subheadings",
     },
     toggle_heading_2: {
       title: "Toggle Heading 2",
       subtext: "Toggleable key section heading",
       aliases: ["h2", "heading2", "subheading", "collapsable"],
-      group: "Headings",
+      group: "Subheadings",
     },
     toggle_heading_3: {
       title: "Toggle Heading 3",
       subtext: "Toggleable subsection and group heading",
       aliases: ["h3", "heading3", "subheading", "collapsable"],
-      group: "Headings",
+      group: "Subheadings",
     },
     quote: {
       title: "Quote",