feat(divider): add a divider block

examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx

@@ -98,6 +98,7 @@ export default function App() {
           backgroundColor: "red",
         },
       },
+      { type: "divider" },
       {
         type: "paragraph",
         content: [

examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx

@@ -92,6 +92,7 @@ export default function App() {
           backgroundColor: "red",
         },
       },
+      { type: "divider" },
       {
         type: "paragraph",
         content: [

examples/05-interoperability/07-converting-blocks-to-odt/src/App.tsx

@@ -92,6 +92,7 @@ export default function App() {
           backgroundColor: "red",
         },
       },
+      { type: "divider" },
       {
         type: "paragraph",
         content: [

examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx

@@ -88,6 +88,7 @@ export default function App() {
           backgroundColor: "red",
         },
       },
+      { type: "divider" },
       {
         type: "paragraph",
         content: [

packages/core/src/blocks/Divider/block.ts

@@ -0,0 +1,49 @@
+import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
+
+export type DividerBlockConfig = ReturnType<typeof createDividerBlockConfig>;
+
+export const createDividerBlockConfig = createBlockConfig(
+  () =>
+    ({
+      type: "divider" as const,
+      propSchema: {},
+      content: "none",
+    }) as const,
+);
+
+export const createDividerBlockSpec = createBlockSpec(
+  createDividerBlockConfig,
+  {
+    meta: {
+      isolating: false,
+    },
+    parse(element) {
+      if (element.tagName === "HR") {
+        return {};
+      }
+
+      return undefined;
+    },
+    render() {
+      const dom = document.createElement("hr");
+
+      return {
+        dom,
+      };
+    },
+  },
+  [
+    createBlockNoteExtension({
+      key: "divider-block-shortcuts",
+      inputRules: [
+        {
+          find: new RegExp(`^---$`),
+          replace() {
+            return { type: "divider", props: {}, content: [] };
+          },
+        },
+      ],
+    }),
+  ],
+);

packages/core/src/blocks/defaultBlocks.ts

@@ -3,11 +3,26 @@ import Code from "@tiptap/extension-code";
 import Italic from "@tiptap/extension-italic";
 import Strike from "@tiptap/extension-strike";
 import Underline from "@tiptap/extension-underline";
+import { COLORS_DEFAULT } from "../editor/defaultColors.js";
+import {
+  BlockNoDefaults,
+  BlockSchema,
+  InlineContentSchema,
+  InlineContentSpecs,
+  PartialBlockNoDefaults,
+  StyleSchema,
+  StyleSpecs,
+  createStyleSpec,
+  createStyleSpecFromTipTapMark,
+  getInlineContentSchemaFromSpecs,
+  getStyleSchemaFromSpecs,
+} from "../schema/index.js";
 import {
   createAudioBlockSpec,
   createBulletListItemBlockSpec,
   createCheckListItemBlockSpec,
   createCodeBlockSpec,
+  createDividerBlockSpec,
   createFileBlockSpec,
   createHeadingBlockSpec,
   createImageBlockSpec,
@@ -18,27 +33,14 @@ import {
   createVideoBlockSpec,
   defaultProps,
 } from "./index.js";
-import {
-  BlockNoDefaults,
-  BlockSchema,
-  InlineContentSchema,
-  InlineContentSpecs,
-  PartialBlockNoDefaults,
-  StyleSchema,
-  StyleSpecs,
-  createStyleSpec,
-  createStyleSpecFromTipTapMark,
-  getInlineContentSchemaFromSpecs,
-  getStyleSchemaFromSpecs,
-} from "../schema/index.js";
 import { createTableBlockSpec } from "./Table/block.js";
-import { COLORS_DEFAULT } from "../editor/defaultColors.js";
 
 export const defaultBlockSpecs = {
   audio: createAudioBlockSpec(),
   bulletListItem: createBulletListItemBlockSpec(),
   checkListItem: createCheckListItemBlockSpec(),
   codeBlock: createCodeBlockSpec(),
+  divider: createDividerBlockSpec(),
   file: createFileBlockSpec(),
   heading: createHeadingBlockSpec(),
   image: createImageBlockSpec(),

packages/core/src/blocks/index.ts

@@ -1,6 +1,7 @@
 export * from "./Audio/block.js";
 export * from "./Audio/parseAudioElement.js";
 export * from "./Code/block.js";
+export * from "./Divider/block.js";
 export * from "./File/block.js";
 export * from "./Heading/block.js";
 export * from "./Image/block.js";

packages/core/src/editor/Block.css

@@ -184,6 +184,14 @@ NESTED BLOCKS
   padding-left: 1em;
 }
 
+/* DIVIDERS */
+[data-content-type="divider"] hr {
+  border: none;
+  border-top: 1px solid rgb(125, 121, 122);
+  margin: 0.5em 0;
+  flex: 1;
+}
+
 /* LISTS */
 
 .bn-block-content::before {

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

@@ -215,6 +215,16 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  if (editorHasBlockWithType(editor, "divider")) {
+    items.push({
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, { type: "divider" });
+      },
+      key: "divider",
+      ...editor.dictionary.slash_menu.divider,
+    });
+  }
+
   if (editorHasBlockWithType(editor, "table")) {
     items.push({
       onItemClick: () => {

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

@@ -156,6 +156,12 @@ export const ar: Dictionary = {
       aliases: ["رمز تعبيري", "إيموجي", "إيموت", "عاطفة", "وجه"],
       group: "آخرون",
     },
+    divider: {
+      title: "فاصل",
+      subtext: "يستخدم لفصل الكتل",
+      aliases: ["فاصل", "فاصل", "فاصل", "فاصل"],
+      group: "الكتل الأساسية",
+    },
   },
   placeholders: {
     default: "أدخل نصًا أو اكتب '/' للأوامر",

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

@@ -191,6 +191,12 @@ export const de: Dictionary = {
       aliases: ["emoji", "emote", "emotion", "gesicht"],
       group: "Andere",
     },
+    divider: {
+      title: "Trennlinie",
+      subtext: "Trennlinie zwischen Blöcken",
+      aliases: ["trennlinie", "hr", "horizontal rule"],
+      group: "Grundlegende Blöcke",
+    },
   },
   placeholders: {
     default: "Text eingeben oder '/' für Befehle tippen",

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

@@ -170,6 +170,12 @@ export const en = {
       aliases: ["emoji", "emote", "emotion", "face"],
       group: "Others",
     },
+    divider: {
+      title: "Divider",
+      subtext: "Visually divide blocks",
+      aliases: ["divider", "hr", "line", "horizontal rule"],
+      group: "Basic blocks",
+    },
   },
   placeholders: {
     default: "Enter text or type '/' for commands",

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

@@ -171,6 +171,12 @@ export const es: Dictionary = {
       aliases: ["emoji", "emoticono", "emoción", "cara"],
       group: "Otros",
     },
+    divider: {
+      title: "Divisor",
+      subtext: "Divisor de bloques",
+      aliases: ["divisor", "hr", "horizontal rule"],
+      group: "Bloques básicos",
+    },
   },
   placeholders: {
     default: "Escribe o teclea '/' para comandos",

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

@@ -216,6 +216,12 @@ export const fr: Dictionary = {
       aliases: ["emoji", "émoticône", "émotion", "visage", "smiley"],
       group: "Autres",
     },
+    divider: {
+      title: "Diviseur",
+      subtext: "Utilisé pour diviser les blocs",
+      aliases: ["diviseur", "hr", "horizontal rule"],
+      group: "Blocs de base",
+    },
   },
   placeholders: {
     default:

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

@@ -172,6 +172,12 @@ export const he: Dictionary = {
       aliases: ["emoji", "emote", "emotion", "face"],
       group: "אחר",
     },
+    divider: {
+      title: "מחיצה",
+      subtext: "מחיצה בין בלוקים",
+      aliases: ["divider", "hr", "horizontal rule"],
+      group: "בלוקים בסיסיים",
+    },
   },
   placeholders: {
     default: "הזן טקסט או הקלד '/' לפקודות",

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

@@ -184,6 +184,12 @@ export const hr: Dictionary = {
       aliases: ["emoji", "emotikon", "emocija", "lice"],
       group: "Ostalo",
     },
+    divider: {
+      title: "Razdjelnik",
+      subtext: "Razdjelnik blokova",
+      aliases: ["razdjelnik", "hr", "horizontal rule"],
+      group: "Osnovni blokovi",
+    },
   },
   placeholders: {
     default: "Unesi tekst ili upiši ‘/’ za naredbe",

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

@@ -185,6 +185,12 @@ export const is: Dictionary = {
       aliases: ["emoji", "andlitsávísun", "tilfinningar", "andlit"],
       group: "Annað",
     },
+    divider: {
+      title: "Razdjelnik",
+      subtext: "Razdjelnik blokova",
+      aliases: ["razdjelnik", "hr", "horizontal rule"],
+      group: "Osnovni blokovi",
+    },
   },
   placeholders: {
     default: "Sláðu inn texta eða skrifaðu '/' fyrir skipanir",

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

@@ -193,6 +193,12 @@ export const it: Dictionary = {
       aliases: ["emoji", "emote", "emozione", "faccia"],
       group: "Altri",
     },
+    divider: {
+      title: "Divisore",
+      subtext: "Divisore di blocchi",
+      aliases: ["divisore", "hr", "horizontal rule"],
+      group: "Blocchi base",
+    },
   },
   placeholders: {
     default: "Inserisci testo o digita '/' per i comandi",

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

@@ -211,6 +211,12 @@ export const ja: Dictionary = {
       aliases: ["絵文字", "顔文字", "感情表現", "顔"],
       group: "その他",
     },
+    divider: {
+      title: "区切り",
+      subtext: "区切りを表示するために使用",
+      aliases: ["divider", "hr", "horizontal rule"],
+      group: "基本ブロック",
+    },
   },
   placeholders: {
     default: "テキストを入力するか'/' を入力してコマンド選択",

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

@@ -184,6 +184,12 @@ export const ko: Dictionary = {
       ],
       group: "기타",
     },
+    divider: {
+      title: "구분선",
+      subtext: "구분선 블록",
+      aliases: ["divider", "hr", "horizontal rule"],
+      group: "기본 블록",
+    },
   },
   placeholders: {
     default: "텍스트를 입력하거나 /를 입력하여 명령을 입력하세요.",

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

@@ -172,6 +172,12 @@ export const nl: Dictionary = {
       ],
       group: "Overig",
     },
+    divider: {
+      title: "Scheidingslijn",
+      subtext: "Scheidingslijn tussen blokken",
+      aliases: ["scheidingslijn", "hr", "horizontal rule"],
+      group: "Basisblokken",
+    },
   },
   placeholders: {
     default: "Voer tekst in of type '/' voor commando's",

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

@@ -190,6 +190,12 @@ export const no: Dictionary = {
       aliases: ["emoji", "emote", "emosjon", "ansikt"],
       group: "Andre",
     },
+    divider: {
+      title: "Delingslinje",
+      subtext: "Delingslinje mellom blokker",
+      aliases: ["delingslinje", "hr", "horizontal rule"],
+      group: "Grunnleggende blokker",
+    },
   },
   placeholders: {
     default: "Skriv tekst eller skriv '/' for å vise kommandoer",

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

@@ -162,6 +162,12 @@ export const pl: Dictionary = {
       aliases: ["emoji", "emotka", "wyrażenie emocji", "twarz"],
       group: "Inne",
     },
+    divider: {
+      title: "Separator",
+      subtext: "Separator bloków",
+      aliases: ["separator", "hr", "horizontal rule"],
+      group: "Podstawowe bloki",
+    },
   },
   placeholders: {
     default: "Wprowadź tekst lub wpisz '/' aby użyć poleceń",

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

@@ -163,6 +163,12 @@ export const pt: Dictionary = {
       aliases: ["emoji", "emoticon", "expressão emocional", "rosto"],
       group: "Outros",
     },
+    divider: {
+      title: "Separador",
+      subtext: "Separador de blocos",
+      aliases: ["separador", "hr", "horizontal rule"],
+      group: "Blocos básicos",
+    },
   },
   placeholders: {
     default: "Digite texto ou use '/' para comandos",

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

@@ -214,6 +214,12 @@ export const ru: Dictionary = {
       aliases: ["эмодзи", "смайлик", "выражение эмоций", "лицо"],
       group: "Прочее",
     },
+    divider: {
+      title: "Разделитель",
+      subtext: "Разделитель блоков",
+      aliases: ["divider", "hr", "horizontal rule"],
+      group: "Базовые блоки",
+    },
   },
   placeholders: {
     default: "Введите текст или введите «/» для команд",

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

@@ -170,6 +170,12 @@ export const sk = {
       aliases: ["emoji", "emócia", "tvár"],
       group: "Ostatné",
     },
+    divider: {
+      title: "Oddelovač",
+      subtext: "Oddelovač blokov",
+      aliases: ["oddelovač", "hr", "horizontal rule"],
+      group: "Základné bloky",
+    },
   },
   placeholders: {
     default: "Zadajte text alebo napíšte '/' pre príkazy",