feat: Page break

examples/01-basic/04-all-blocks/App.tsx

@@ -118,6 +118,7 @@ export default function App() {
           ],
         },
       },
+      { type: "pageBreak" },
       {
         type: "file",
       },

packages/core/src/api/exporters/html/__snapshots__/pageBreak/basic/external.html

@@ -0,0 +1 @@
+<div data-page-break=""></div>

packages/core/src/api/exporters/html/__snapshots__/pageBreak/basic/internal.html

@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="pageBreak"><div class="bn-page-break" data-page-break=""></div></div></div></div></div>

packages/core/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap

@@ -1605,6 +1605,22 @@ exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert
 }
 `;
 
+exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert pageBreak/basic to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "type": "pageBreak",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
 exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert paragraph/basic to/from prosemirror 1`] = `
 {
   "attrs": {

packages/core/src/api/testUtil/cases/defaultSchema.ts

@@ -202,6 +202,14 @@ export const defaultSchemaTestCases: EditorTestCases<
         },
       ],
     },
+    {
+      name: "pageBreak/basic",
+      blocks: [
+        {
+          type: "pageBreak",
+        },
+      ],
+    },
     {
       name: "file/button",
       blocks: [

packages/core/src/blocks/PageBreakBlockContent/PageBreakBlockContent.tsx

@@ -0,0 +1,48 @@
+import {
+  createBlockSpec,
+  CustomBlockConfig,
+  Props,
+} from "../../schema/index.js";
+
+export const pageBreakConfig = {
+  type: "pageBreak" as const,
+  propSchema: {},
+  content: "none",
+  isFileBlock: false,
+} satisfies CustomBlockConfig;
+export const pageBreakRender = () => {
+  const pageBreak = document.createElement("div");
+
+  pageBreak.className = "bn-page-break";
+  pageBreak.setAttribute("data-page-break", "");
+
+  return {
+    dom: pageBreak,
+  };
+};
+export const pageBreakParse = (
+  element: HTMLElement
+): Partial<Props<typeof pageBreakConfig.propSchema>> | undefined => {
+  if (element.tagName === "DIV" && element.hasAttribute("data-page-break")) {
+    return {
+      type: "pageBreak",
+    };
+  }
+
+  return undefined;
+};
+export const pageBreakToExternalHTML = () => {
+  const pageBreak = document.createElement("div");
+
+  pageBreak.setAttribute("data-page-break", "");
+
+  return {
+    dom: pageBreak,
+  };
+};
+
+export const PageBreak = createBlockSpec(pageBreakConfig, {
+  render: pageBreakRender,
+  parse: pageBreakParse,
+  toExternalHTML: pageBreakToExternalHTML,
+});

packages/core/src/blocks/defaultBlocks.ts

@@ -22,6 +22,7 @@ import {
 
 import { AudioBlock } from "./AudioBlockContent/AudioBlockContent.js";
 import { CodeBlock } from "./CodeBlockContent/CodeBlockContent.js";
+import { PageBreak } from "./PageBreakBlockContent/PageBreakBlockContent.js";
 import { FileBlock } from "./FileBlockContent/FileBlockContent.js";
 import { Heading } from "./HeadingBlockContent/HeadingBlockContent.js";
 import { ImageBlock } from "./ImageBlockContent/ImageBlockContent.js";
@@ -38,6 +39,7 @@ export const defaultBlockSpecs = {
   paragraph: Paragraph,
   heading: Heading,
   codeBlock: CodeBlock,
+  pageBreak: PageBreak,
   bulletListItem: BulletListItem,
   numberedListItem: NumberedListItem,
   checkListItem: CheckListItem,

packages/core/src/editor/Block.css

@@ -308,6 +308,20 @@ NESTED BLOCKS
   transition-delay: 0.1s;
 }
 
+/* PAGE BREAK */
+.bn-block-content[data-content-type="pageBreak"] > div {
+  width: 100%;
+  height: 8px;
+  background: linear-gradient(
+    to right,
+    rgb(22 22 22) 50%,
+    rgb(255, 255, 255, 0) 0%
+  );
+  background-position: center;
+  background-size: 16px 1.5px;
+  background-repeat: repeat-x;
+}
+
 /* FILES */
 
 /* Element that wraps content for all file blocks */
@@ -336,7 +350,7 @@ NESTED BLOCKS
 
 .bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover,
 [data-file-block] .bn-file-name-with-icon:hover,
-.ProseMirror-selectednode .bn-file-name-with-icon{
+.ProseMirror-selectednode .bn-file-name-with-icon {
   background-color: rgb(225, 225, 225);
 }
 

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

@@ -186,6 +186,18 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  if (checkDefaultBlockTypeInSchema("pageBreak", editor)) {
+    items.push({
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, {
+          type: "pageBreak",
+        });
+      },
+      key: "page_break",
+      ...editor.dictionary.slash_menu.page_break,
+    });
+  }
+
   if (checkDefaultBlockTypeInSchema("table", editor)) {
     items.push({
       onItemClick: () => {

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

@@ -58,6 +58,12 @@ export const ar: Dictionary = {
       aliases: ["كود", "مسبق"],
       group: "الكتل الأساسية",
     },
+    page_break: {
+      title: "فاصل الصفحة",
+      subtext: "فاصل الصفحة",
+      aliases: ["page", "break", "separator", "فاصل", "الصفحة"],
+      group: "الكتل الأساسية",
+    },
     table: {
       title: "جدول",
       subtext: "يستخدم للجداول",

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

@@ -56,6 +56,12 @@ export const de = {
       aliases: ["code", "pre"],
       group: "Grundlegende blöcke",
     },
+    page_break: {
+      title: "Seitenumbruch",
+      subtext: "Seitentrenner",
+      aliases: ["page", "break", "separator", "seitenumbruch", "trenner"],
+      group: "Grundlegende Blöcke",
+    },
     table: {
       title: "Tabelle",
       subtext: "Tabelle mit editierbaren Zellen",

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

@@ -56,6 +56,12 @@ export const en = {
       aliases: ["code", "pre"],
       group: "Basic blocks",
     },
+    page_break: {
+      title: "Page Break",
+      subtext: "Page separator",
+      aliases: ["page", "break", "separator"],
+      group: "Basic blocks",
+    },
     table: {
       title: "Table",
       subtext: "Table with editable cells",

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

@@ -55,6 +55,12 @@ export const es = {
       aliases: ["code", "pre"],
       group: "Bloques básicos",
     },
+    page_break: {
+      title: "Salto de página",
+      subtext: "Separador de página",
+      aliases: ["page", "break", "separator", "salto", "separador"],
+      group: "Bloques básicos",
+    },
     table: {
       title: "Tabla",
       subtext: "Tabla con celdas editables",

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

@@ -71,6 +71,12 @@ export const fr: Dictionary = {
       aliases: ["code", "pre"],
       group: "Blocs de base",
     },
+    page_break: {
+      title: "Saut de page",
+      subtext: "Séparateur de page",
+      aliases: ["page", "break", "separator", "saut", "séparateur"],
+      group: "Blocs de base",
+    },
     table: {
       title: "Tableau",
       subtext: "Utilisé pour les tableaux",