feat: page break command

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -20,6 +20,7 @@ import {
   IconCalendar,
   IconAppWindow,
   IconSitemap,
+  IconPageBreak,
 } from "@tabler/icons-react";
 import {
   CommandProps,
@@ -153,6 +154,19 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
     },
+    {
+      title: "Page break",
+      description: "Insert page break",
+      searchTerms: ["page break", "hr"],
+      icon: IconPageBreak,
+      command: ({ editor, range }: CommandProps) =>
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .insertContent('<hr data-type="pagebreak" /><p></p>')
+          .run(),
+    },
     {
       title: "Image",
       description: "Upload any image from your device.",

apps/client/src/features/editor/extensions/extensions.ts

@@ -46,6 +46,7 @@ import {
   Heading,
   Highlight,
   UniqueID,
+  HorizontalRule,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -108,7 +109,9 @@ export const mainExtensions = [
         spellcheck: false,
       },
     },
+    horizontalRule: false,
   }),
+  HorizontalRule,
   Heading,
   UniqueID.configure({
     types: ["heading", "paragraph"],

apps/client/src/features/editor/styles/core.css

@@ -110,6 +110,14 @@
     border-top: 1px solid #68cef8;
   }
 
+  hr[data-type="pagebreak"] {
+    border-top: 1px dashed var(--mantine-color-dark-2) !important;
+  }
+
+  .ProseMirror[contenteditable="false"] hr[data-type="pagebreak"] {
+    display: none !important;
+  }
+
   .ProseMirror-selectednode {
     outline: 2px solid #70cff8;
   }
@@ -186,7 +194,6 @@
     margin-left: auto;
     margin-right: auto;
   }
-
 }
 
 .ProseMirror > h1,
@@ -195,13 +202,11 @@
 .ProseMirror > h4,
 .ProseMirror > h5,
 .ProseMirror > h6 {
-  
   > .link-btn {
     cursor: pointer;
     position: relative;
-
   }
-  
+
   > .link-btn > .link-btn-content {
     opacity: 0;
     position: absolute;
@@ -213,7 +218,7 @@
     justify-content: center;
     flex-direction: column;
   }
-  
+
   &:hover > .link-btn > .link-btn-content {
     opacity: 1;
   }

apps/client/src/features/editor/styles/print.css

@@ -20,4 +20,10 @@
   .tableWrapper {
     overflow: hidden !important;
   }
+
+  hr[data-type="pagebreak"] {
+    break-before: always;
+    page-break-before: always;
+    visibility: hidden;
+  }
 }

apps/server/src/collaboration/collaboration.util.ts

@@ -36,6 +36,7 @@ import {
   Highlight,
   UniqueID,
   addUniqueIdsToDoc,
+  HorizontalRule,
 } from '@docmost/editor-ext';
 import { generateText, getSchema, JSONContent } from '@tiptap/core';
 import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html';
@@ -48,7 +49,9 @@ export const tiptapExtensions = [
   StarterKit.configure({
     codeBlock: false,
     heading: false,
+    horizontalRule: false,
   }),
+  HorizontalRule,
   Heading,
   UniqueID.configure({
     types: ['heading', 'paragraph'],