feat(divider): add a divider block (#2014)

* fix(core): input rules can handle when a new block is empty now

* feat(divider): add a divider block

* feat: add conversion for divider block

* Added tests

* Updated e2e snaps

---------

Co-authored-by: Matthew Lipski <[email protected]>

Author: nperez0111

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: "أدخل نصًا أو اكتب '/' للأوامر",