floating page breaks

Author: artem-harbour

package-lock.json

@@ -73,7 +73,8 @@
     "tippy.js": "^6.3.7",
     "vite-plugin-node-polyfills": "^0.22.0",
     "y-prosemirror": "^1.2.12",
-    "yjs": "13.6.19"
+    "yjs": "13.6.19",
+    "@floating-ui/dom": "^1.7.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.51.0",
@@ -87,6 +88,7 @@
     "vite": "^5.4.12",
     "vitest": "^1.6.1",
     "vue-draggable-next": "^2.2.1",
-    "which": "^5.0.0"
+    "which": "^5.0.0",
+    "@floating-ui/dom": "^1.7.0"
   }
 }

packages/super-editor/package.json

@@ -1,3 +1,7 @@
+:root {
+  --sd-editor-separator-height: 18px;
+}
+
 .pagination-section-header {
   cursor: default;
 }
@@ -23,15 +27,27 @@
 .pagination-separator {
   position: relative;
   display: block;
-  height: 18px;
-  min-height: 18px;
+  height: var(--sd-editor-separator-height);
+  min-height: var(--sd-editor-separator-height);
   min-width: 100%;
   width: 100%;
   border-top: 1px solid #DBDBDB;
   border-bottom: 1px solid #DBDBDB;
   cursor: default;
 }
 
+.pagination-separator--table {
+  border: 0;
+}
+
+.pagination-separator-floating {
+  position: fixed;
+  height: var(--sd-editor-separator-height);
+  border-top: 1px solid #DBDBDB;
+  border-bottom: 1px solid #DBDBDB;
+  pointer-events: none;
+}
+
 .pagination-inner {
   position: absolute;
   top: 0;

packages/super-editor/src/assets/styles/extensions/pagination.css

@@ -23,7 +23,9 @@ export function adjustPaginationBreaks(editorElem, editor) {
     if (!firstLeft) firstLeft = left;
     if (left !== firstLeft) {
       const diff = left - firstLeft;
+      // Note: elements with "position: fixed" do not work correctly with transform style.
+      // node.style.left = `${diff}px`;
       node.style.transform = `translateX(${diff}px)`;
     }
   });
-};
+};

packages/super-editor/src/components/pagination-helpers.js

@@ -178,6 +178,13 @@ onMounted(async () => {
 </style>
 
 <style scoped>
+.sd-toolbar {
+  width: 100%;
+  background: white;
+  position: relative;
+  z-index: 1;
+}
+
 .page-spacer {
   height: 11in;
   width: 60px;
@@ -199,6 +206,8 @@ onMounted(async () => {
 }
 
 .dev-app__layout {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100vh;
 }

packages/super-editor/src/dev/components/DeveloperPlayground.vue

@@ -8,8 +8,13 @@ import { ImagePlaceholderPluginKey } from '@extensions/image/imageHelpers/imageP
 import { LinkedStylesPluginKey } from '@extensions/linked-styles/linked-styles.js';
 import { findParentNodeClosestToPos } from '@core/helpers/findParentNodeClosestToPos.js';
 import { generateDocxRandomId } from '../../core/helpers/index.js';
+import { computePosition, autoUpdate, hide } from '@floating-ui/dom';
+
+const SEPARATOR_CLASS = 'pagination-separator';
+const SEPARATOR_FLOATING_CLASS = 'pagination-separator-floating';
 
 const isDebugging = false;
+const cleanupFunctions = new Set();
 
 export const Pagination = Extension.create({
   name: 'pagination',
@@ -42,6 +47,7 @@ export const Pagination = Extension.create({
    */
   addPmPlugins() {
     const editor = this.editor;
+
     let isUpdating = false;
 
     // Used to prevent unnecessary transactions
@@ -129,7 +135,7 @@ export const Pagination = Extension.create({
         let previousDecorations = DecorationSet.empty;
 
         return {
-          update: (view) => {
+          update: (view, prevState) => {
             if (!shouldUpdate || isUpdating) return;
 
             isUpdating = true;
@@ -141,6 +147,7 @@ export const Pagination = Extension.create({
              */
             if (isDebugging) console.debug('--- Calling performUpdate ---')
             performUpdate(editor, view, previousDecorations);
+
             isUpdating = false;
             shouldUpdate = false;
           },
@@ -155,6 +162,10 @@ export const Pagination = Extension.create({
 
     return [paginationPlugin];
   },
+
+  onDestroy() {
+    cleanupFloatingSeparators();
+  },
 });
 
 /**
@@ -218,8 +229,9 @@ const getHeaderFooterId = (currentPageNumber, sectionType, editor, node = null)
  * @returns {void}
  */
 const performUpdate = (editor, view, previousDecorations) => {
-  const sectionData = editor.storage.pagination.sectionData;
+  const sectionData = editor.storage.pagination.sectionData;  
   const newDecorations = calculatePageBreaks(view, editor, sectionData);
+  const editorElement = editor.options.element;
 
   // Skip updating if decorations haven't changed
   if (!previousDecorations.eq(newDecorations)) {
@@ -229,7 +241,18 @@ const performUpdate = (editor, view, previousDecorations) => {
     );
 
     view.dispatch(updateTransaction);
-  }
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        cleanupFloatingSeparators();
+        const separators = [...editorElement.querySelectorAll(`.${SEPARATOR_CLASS}--table`)];
+        separators.forEach((separator) => {
+          const { cleanup } = createFloatingSeparator(separator);
+          cleanupFunctions.add(cleanup);
+        });
+      });
+    });
+  };
 
   // Emit that pagination has been updated
   editor.emit('paginationUpdate');
@@ -370,8 +393,11 @@ function generateInternalPageBreaks(doc, view, editor, sectionData) {
 
     if (isHardBreakNode || shouldAddPageBreak) {
       const $currentPos = view.state.doc.resolve(currentPos);
+      const table = findParentNodeClosestToPos($currentPos, (node) => node.type.name === 'table');
       const tableRow = findParentNodeClosestToPos($currentPos, (node) => node.type.name === 'tableRow');
 
+      let isInTable = (table || tableRow) ? true : false;
+
       if (tableRow) {
         // If the node is in a table cell, then split the entire row.
         currentNode = tableRow.node;
@@ -408,7 +434,7 @@ function generateInternalPageBreaks(doc, view, editor, sectionData) {
       const pageSpacer = Decoration.widget(breakPos, spacingNode, { key: 'stable-key' });
       decorations.push(pageSpacer);
 
-      const pageBreak = createPageBreak({ editor, header, footer });
+      const pageBreak = createPageBreak({ editor, header, footer, isInTable });
       decorations.push(Decoration.widget(breakPos, pageBreak, { key: 'stable-key' }));
 
       // Check if we have a hard page break node
@@ -637,7 +663,7 @@ const onHeaderFooterDblClick = (editor, currentFocusedSectionEditor) => {
  * @param {HTMLElement} param0.footer The footer element
  * @returns {HTMLElement} The page break element
  */
-function createPageBreak({ editor, header, footer, footerBottom = null, isFirstHeader, isLastFooter }) {
+function createPageBreak({ editor, header, footer, footerBottom = null, isFirstHeader, isLastFooter, isInTable = false }) {
   const { pageSize, pageMargins } = editor.converter.pageStyles;
 
   let sectionHeight = 0;
@@ -661,9 +687,11 @@ function createPageBreak({ editor, header, footer, footerBottom = null, isFirstH
     const separatorHeight = 20;
     sectionHeight += separatorHeight;
     const separator = document.createElement('div');
-    separator.className = 'pagination-separator';
+    separator.classList.add(SEPARATOR_CLASS);
+    if (isInTable) {
+      separator.classList.add(`${SEPARATOR_CLASS}--table`);
+    }
     if (isDebugging) separator.style.backgroundColor = 'green';
-
     innerDiv.appendChild(separator);
   }
 
@@ -731,3 +759,70 @@ const onImageLoad = (editor) => {
     editor.view.dispatch(newTr);
   });
 };
+
+function createFloatingSeparator(separator) {
+  const floatingSeparator = document.createElement('div');
+  floatingSeparator.classList.add(SEPARATOR_FLOATING_CLASS);
+  floatingSeparator.dataset.floatingSeparator = '';
+
+  document.body.append(floatingSeparator);
+
+  const updatePosition = () => {
+    computePosition(separator, floatingSeparator, {
+      strategy: 'fixed',
+      placement: 'top-start',
+      middleware: [
+        hide({
+          padding: {
+            top: 21,
+            bottom: 21,
+          },
+        }),
+        {
+          name: 'copy',
+          fn: ({ elements }) => {
+            const rect = elements.reference.getBoundingClientRect();
+            return {
+              x: rect.left,
+              y: rect.top,
+              data: {
+                width: rect.width,
+                height: rect.height,
+              },
+            };
+          },
+        },
+      ],
+    }).then(({ x, y, middlewareData }) => { 
+      Object.assign(floatingSeparator.style, {
+        top: `${y}px`,
+        left: `${x}px`,
+        width: `${middlewareData.copy.width}px`,
+        height: `${middlewareData.copy.height}px`,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible',
+      });
+    });
+  };
+
+  const cleanup = autoUpdate(
+    separator,
+    floatingSeparator,
+    updatePosition,
+    // { animationFrame: true },
+  );
+
+  const extendedCleanup = () => {
+    floatingSeparator?.remove();
+    cleanup();
+  };
+
+  return { 
+    cleanup: extendedCleanup, 
+    updatePosition,
+  };
+}
+
+function cleanupFloatingSeparators() {
+  cleanupFunctions.forEach((cleanup) => cleanup());
+  cleanupFunctions.clear();
+}

packages/super-editor/src/extensions/pagination/pagination.js

@@ -26,7 +26,7 @@ export default defineConfig(({ mode }) => {
       __APP_VERSION__: JSON.stringify(superdocVersion),
     },
     optimizeDeps: {
-      exclude: ['yjs', 'tippy.js']
+      exclude: ['yjs', 'tippy.js', '@floating-ui/dom']
     },
     build: {
       target: 'es2020',

packages/super-editor/vite.config.js

@@ -236,6 +236,10 @@ onMounted(async () => {
 <style>
 .sd-toolbar {
   width: 100%;
+  background: white;
+  position: relative;
+  z-index: 1;
+
 }
 .comments-panel {
   width: 320px;