@blocknote/core 0.31.3 → 0.32.0

package/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

package/src/editor/BlockNoteTipTapEditor.ts

@@ -302,6 +302,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   ) => {
     if (!element) {
       this.destroy();
+      this.isInitialized = false;
     } else {
       this.options.element = element;
       this.createViewAlternative(blockNoteEditor, contentComponent);

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

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -130,7 +130,10 @@ export class FormattingToolbarView implements PluginView {
   };
 
   viewMousedownHandler = (e: MouseEvent) => {
-    if (!this.isElementWithinEditorWrapper(e.target as Node)) {
+    if (
+      !this.isElementWithinEditorWrapper(e.target as Node) ||
+      e.button === 0
+    ) {
       this.preventShow = true;
     }
   };

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -137,6 +137,19 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  if (checkDefaultBlockTypeInSchema("toggleListItem", editor)) {
+    items.push({
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, {
+          type: "toggleListItem",
+        });
+      },
+      badge: formatKeyboardShortcut("Mod-Shift-6"),
+      key: "toggle_list",
+      ...editor.dictionary.slash_menu.toggle_list,
+    });
+  }
+
   if (checkDefaultBlockTypeInSchema("numberedListItem", editor)) {
     items.push({
       onItemClick: () => {
@@ -302,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(":", {

package/src/i18n/locales/ar.ts

@@ -20,6 +20,42 @@ 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: "العناوين الفرعية",
+    },
+    toggle_heading_2: {
+      title: "عنوان قابل للطي 2",
+      subtext: "عنوان فرعي قابل للطي لإظهار وإخفاء المحتوى",
+      aliases: ["ع2", "عنوان2", "عنوان فرعي", "قابل للطي", "طي"],
+      group: "العناوين الفرعية",
+    },
+    toggle_heading_3: {
+      title: "عنوان قابل للطي 3",
+      subtext: "عنوان فرعي ثانوي قابل للطي لإظهار وإخفاء المحتوى",
+      aliases: ["ع3", "عنوان3", "عنوان فرعي", "قابل للطي", "طي"],
+      group: "العناوين الفرعية",
+    },
     quote: {
       title: "اقتباس",
       subtext: "اقتباس أو مقتطف",
@@ -52,6 +88,12 @@ export const ar: Dictionary = {
       ],
       group: "الكتل الأساسية",
     },
+    toggle_list: {
+      title: "قائمة قابلة للطي",
+      subtext: "قائمة بعناصر فرعية قابلة للإخفاء",
+      aliases: ["عناصر قائمة", "قائمة", "قائمة قابلة للطي", "قائمة منسدلة"],
+      group: "الكتل الأساسية",
+    },
     paragraph: {
       title: "فقرة",
       subtext: "تستخدم لنص الوثيقة الأساسي",
@@ -118,6 +160,7 @@ export const ar: Dictionary = {
   placeholders: {
     default: "أدخل نصًا أو اكتب '/' للأوامر",
     heading: "عنوان",
+    toggleListItem: "طيّ",
     bulletListItem: "قائمة",
     numberedListItem: "قائمة",
     checkListItem: "قائمة",

package/src/i18n/locales/de.ts

@@ -20,6 +20,54 @@ export const de: Dictionary = {
       aliases: ["h3", "überschrift3", "unterüberschrift"],
       group: "Überschriften",
     },
+    heading_4: {
+      title: "Überschrift 4",
+      subtext: "Überschrift für kleinere Unterabschnitte",
+      aliases: ["h4", "überschrift4", "unterüberschrift4"],
+      group: "Unterüberschriften",
+    },
+    heading_5: {
+      title: "Überschrift 5",
+      subtext: "Überschrift für tiefere Unterabschnitte",
+      aliases: ["h5", "überschrift5", "unterüberschrift5"],
+      group: "Unterüberschriften",
+    },
+    heading_6: {
+      title: "Überschrift 6",
+      subtext: "Überschrift auf der untersten Ebene",
+      aliases: ["h6", "überschrift6", "unterüberschrift6"],
+      group: "Unterüberschriften",
+    },
+    toggle_heading: {
+      title: "Aufklappbare Überschrift 1",
+      subtext: "Aufklappbare Hauptebene Überschrift",
+      aliases: ["h", "überschrift1", "h1", "aufklappbar", "einklappbar"],
+      group: "Unterüberschrift",
+    },
+    toggle_heading_2: {
+      title: "Aufklappbare Überschrift 2",
+      subtext: "Aufklappbare wichtige Abschnittsüberschrift",
+      aliases: [
+        "h2",
+        "überschrift2",
+        "unterüberschrift",
+        "aufklappbar",
+        "einklappbar",
+      ],
+      group: "Unterüberschriften",
+    },
+    toggle_heading_3: {
+      title: "Aufklappbare Überschrift 3",
+      subtext: "Aufklappbare Unterabschnitts- und Gruppenüberschrift",
+      aliases: [
+        "h3",
+        "überschrift3",
+        "unterüberschrift",
+        "aufklappbar",
+        "einklappbar",
+      ],
+      group: "Unterüberschriften",
+    },
     quote: {
       title: "Zitat",
       subtext: "Zitat oder Auszug",
@@ -52,6 +100,19 @@ export const de: Dictionary = {
       ],
       group: "Grundlegende Blöcke",
     },
+    toggle_list: {
+      title: "Aufklappbare Liste",
+      subtext: "Liste mit ausblendbare Unterpunkten",
+      aliases: [
+        "li",
+        "liste",
+        "aufklappbare liste",
+        "einklappbare liste",
+        "aufklappbareListe",
+        "aufklappbare liste",
+      ],
+      group: "Grundlegende Blöcke",
+    },
     paragraph: {
       title: "Absatz",
       subtext: "Der Hauptteil Ihres Dokuments",
@@ -134,6 +195,7 @@ export const de: Dictionary = {
   placeholders: {
     default: "Text eingeben oder '/' für Befehle tippen",
     heading: "Überschrift",
+    toggleListItem: "Umschalten",
     bulletListItem: "Liste",
     numberedListItem: "Liste",
     checkListItem: "Liste",

package/src/i18n/locales/en.ts

@@ -18,12 +18,54 @@ export const en = {
       aliases: ["h3", "heading3", "subheading"],
       group: "Headings",
     },
+    heading_4: {
+      title: "Heading 4",
+      subtext: "Minor subsection heading",
+      aliases: ["h4", "heading4", "subheading4"],
+      group: "Subheadings",
+    },
+    heading_5: {
+      title: "Heading 5",
+      subtext: "Small subsection heading",
+      aliases: ["h5", "heading5", "subheading5"],
+      group: "Subheadings",
+    },
+    heading_6: {
+      title: "Heading 6",
+      subtext: "Lowest-level heading",
+      aliases: ["h6", "heading6", "subheading6"],
+      group: "Subheadings",
+    },
+    toggle_heading: {
+      title: "Toggle Heading 1",
+      subtext: "Toggleable top-level heading",
+      aliases: ["h", "heading1", "h1", "collapsable"],
+      group: "Subheadings",
+    },
+    toggle_heading_2: {
+      title: "Toggle Heading 2",
+      subtext: "Toggleable key section heading",
+      aliases: ["h2", "heading2", "subheading", "collapsable"],
+      group: "Subheadings",
+    },
+    toggle_heading_3: {
+      title: "Toggle Heading 3",
+      subtext: "Toggleable subsection and group heading",
+      aliases: ["h3", "heading3", "subheading", "collapsable"],
+      group: "Subheadings",
+    },
     quote: {
       title: "Quote",
       subtext: "Quote or excerpt",
       aliases: ["quotation", "blockquote", "bq"],
       group: "Basic blocks",
     },
+    toggle_list: {
+      title: "Toggle List",
+      subtext: "List with hideable sub-items",
+      aliases: ["li", "list", "toggleList", "toggle list", "collapsable list"],
+      group: "Basic blocks",
+    },
     numbered_list: {
       title: "Numbered List",
       subtext: "List with ordered items",
@@ -132,6 +174,7 @@ export const en = {
   placeholders: {
     default: "Enter text or type '/' for commands",
     heading: "Heading",
+    toggleListItem: "Toggle",
     bulletListItem: "List",
     numberedListItem: "List",
     checkListItem: "List",

package/src/i18n/locales/es.ts

@@ -20,6 +20,42 @@ export const es: Dictionary = {
       aliases: ["h3", "encabezado3", "subencabezado"],
       group: "Encabezados",
     },
+    heading_4: {
+      title: "Encabezado 4",
+      subtext: "Encabezado de subsección menor",
+      aliases: ["h4", "encabezado4", "subencabezado4"],
+      group: "Subencabezados",
+    },
+    heading_5: {
+      title: "Encabezado 5",
+      subtext: "Encabezado de subsección pequeña",
+      aliases: ["h5", "encabezado5", "subencabezado5"],
+      group: "Subencabezados",
+    },
+    heading_6: {
+      title: "Encabezado 6",
+      subtext: "Encabezado de nivel más bajo",
+      aliases: ["h6", "encabezado6", "subencabezado6"],
+      group: "Subencabezados",
+    },
+    toggle_heading: {
+      title: "Encabezado Plegable 1",
+      subtext: "Encabezado de primer nivel que se puede plegar",
+      aliases: ["h", "encabezado1", "h1", "plegable", "contraible"],
+      group: "Subencabezados",
+    },
+    toggle_heading_2: {
+      title: "Encabezado Plegable 2",
+      subtext: "Encabezado de sección principal que se puede plegar",
+      aliases: ["h2", "encabezado2", "subencabezado", "plegable", "contraible"],
+      group: "Subencabezados",
+    },
+    toggle_heading_3: {
+      title: "Encabezado Plegable 3",
+      subtext: "Encabezado de subsección y grupo que se puede plegar",
+      aliases: ["h3", "encabezado3", "subencabezado", "plegable", "contraible"],
+      group: "Subencabezados",
+    },
     quote: {
       title: "Cita",
       subtext: "Cita o extracto",
@@ -51,6 +87,12 @@ export const es: Dictionary = {
       ],
       group: "Bloques básicos",
     },
+    toggle_list: {
+      title: "Lista Plegable",
+      subtext: "Lista con subelementos ocultables",
+      aliases: ["li", "lista", "lista plegable", "lista colapsable"],
+      group: "Bloques básicos",
+    },
     paragraph: {
       title: "Párrafo",
       subtext: "El cuerpo de tu documento",
@@ -133,6 +175,7 @@ export const es: Dictionary = {
   placeholders: {
     default: "Escribe o teclea '/' para comandos",
     heading: "Encabezado",
+    toggleListItem: "Plegable",
     bulletListItem: "Lista",
     numberedListItem: "Lista",
     checkListItem: "Lista",

package/src/i18n/locales/fr.ts

@@ -21,6 +21,58 @@ export const fr: Dictionary = {
       aliases: ["h3", "titre3", "sous-titre"],
       group: "Titres",
     },
+    heading_4: {
+      title: "Titre 4",
+      subtext: "Titre de sous‑section mineure",
+      aliases: ["h4", "titre4", "sous‑titre4"],
+      group: "Sous-titres",
+    },
+    heading_5: {
+      title: "Titre 5",
+      subtext: "Titre de sous-section mineure",
+      aliases: ["h5", "titre5", "sous-titre5"],
+      group: "Sous-titres",
+    },
+    heading_6: {
+      title: "Titre 6",
+      subtext: "Titre de niveau le plus bas",
+      aliases: ["h6", "titre6", "sous-titre6"],
+      group: "Sous-titres",
+    },
+    toggle_heading: {
+      title: "Titre Repliable 1",
+      subtext:
+        "Titre de premier niveau qui peut être replié pour masquer son contenu",
+      aliases: ["h", "titre1", "h1", "repliable", "masquable", "déroulant"],
+      group: "Sous-titres",
+    },
+    toggle_heading_2: {
+      title: "Titre Repliable 2",
+      subtext: "Titre de section qui peut être replié pour masquer son contenu",
+      aliases: [
+        "h2",
+        "titre2",
+        "sous-titre",
+        "repliable",
+        "masquable",
+        "déroulant",
+      ],
+      group: "Sous-titres",
+    },
+    toggle_heading_3: {
+      title: "Titre Repliable 3",
+      subtext:
+        "Titre de sous-section qui peut être replié pour masquer son contenu",
+      aliases: [
+        "h3",
+        "titre3",
+        "sous-titre",
+        "repliable",
+        "masquable",
+        "déroulant",
+      ],
+      group: "Sous-titres",
+    },
     quote: {
       title: "Citation",
       subtext: "Citation ou extrait",
@@ -65,6 +117,18 @@ export const fr: Dictionary = {
       ],
       group: "Blocs de base",
     },
+    toggle_list: {
+      title: "Liste repliable",
+      subtext: "Liste avec des sous-éléments masquables",
+      aliases: [
+        "li",
+        "liste",
+        "liste pliable",
+        "liste escamotable",
+        "liste repliable",
+      ],
+      group: "Blocs de base",
+    },
     paragraph: {
       title: "Paragraphe",
       subtext: "Utilisé pour le corps de votre document",
@@ -157,6 +221,7 @@ export const fr: Dictionary = {
     default:
       "Entrez du texte ou tapez '/' pour faire apparaître les options de mise en page",
     heading: "Titre",
+    toggleListItem: "Basculer",
     bulletListItem: "Liste",
     numberedListItem: "Liste",
     checkListItem: "Liste",