Community Extension: multi-page-view

[Abhishek79201]

Description

I'm trying to build a multi-page text editor using TipTap (ProseMirror under the hood). My goal is to replicate something like Microsoft Word or Google Docs, where each page:

Has a fixed width (8.5" * 96 = 816px).
Has a fixed height (11" * 96 = 1056px).
Respects margins at the top, bottom, left, and right.
Visually shows page breaks when the content overflows onto the next page.
What I've Tried:

I measure each top-level block in the document using nodeDOM(nodeStart).getBoundingClientRect().
Whenever adding the next block would exceed the USABLE_HEIGHT_PX, I insert a custom “spacer” node into the document to simulate a page break.
I also have a PaginationPlugin that adds decorations (dashed lines) at those breakpoints.
The entire editor is wrapped in a container that stacks multiple “page backgrounds” (white rectangles with box-shadows).
Then I rely on absolute positioning for the editable text so it flows over multiple backgrounds.
I run the pagination logic on onUpdate with a small setTimeout or ResizeObserver to recalc page breaks.
Issues I'm Facing:

Flicker (Layout Jank): On every keystroke, the insertion/removal of “spacer” nodes causes multiple layout reflows. The page count changes frequently, causing flicker in the UI.
Accuracy of Page Breaks: Because I measure the DOM and then immediately modify it by inserting spacers, the measurements can sometimes be off, or cause new page breaks in an unexpected spot.
Performance: In larger documents, recalculating on every change (especially if it’s just a short keystroke) is expensive.
Key Questions:

How can I reduce flicker and repeated reflow while still getting accurate page breaks?
Is there a “best practice” for simulating or implementing true multi-page layout in TipTap/ProseMirror?
Would a “hidden measuring layer” approach or a purely decorative approach (no actual “spacer” nodes in the doc) be better? If so, how can I handle cursor/selection properly across pages?
Any suggestions to chunk the document into separate blocks for each page without losing continuity of content or selection?
My Current Code: Below is a simplified version showing how I’m currently doing it. I have some constants for page dimensions, a SpacerNode, a PageBreakExtension, a PaginationPlugin, plus a helper to calculate page breaks based on measured heights, and the main component.

### Installation

"use client";
import React, { useState, useEffect, useCallback } from "react";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import { Extension, Node } from "@tiptap/core";
import { Plugin, PluginKey } from "prosemirror-state";
import { Decoration, DecorationSet } from "prosemirror-view";

// --------------------
// 1) PAGE CONSTANTS (Letter size @ 96 DPI)
// --------------------
const INCH_TO_PX = 96;
const PAGE_WIDTH_IN = 8.5; 
const PAGE_HEIGHT_IN = 11; 

const TOP_MARGIN_IN = 0.5;
const BOTTOM_MARGIN_IN = 1.0;
const LEFT_MARGIN_IN = 1.5;
const RIGHT_MARGIN_IN = 1.0;

const PAGE_WIDTH_PX = PAGE_WIDTH_IN * INCH_TO_PX;  // 816
const PAGE_HEIGHT_PX = PAGE_HEIGHT_IN * INCH_TO_PX; // 1056
const TOP_MARGIN_PX = TOP_MARGIN_IN * INCH_TO_PX;   // 48
const BOTTOM_MARGIN_PX = BOTTOM_MARGIN_IN * INCH_TO_PX; // 96
const LEFT_MARGIN_PX = LEFT_MARGIN_IN * INCH_TO_PX; // 144
const RIGHT_MARGIN_PX = RIGHT_MARGIN_IN * INCH_TO_PX; // 96

const USABLE_HEIGHT_PX = PAGE_HEIGHT_PX - TOP_MARGIN_PX - BOTTOM_MARGIN_PX; 
// ~1056 - (48 + 96) = 912

// --------------------
// 2) A SpacerNode (I inject these to represent page breaks)
// --------------------
const SpacerNode = Node.create({
  name: "spacer",
  group: "block",
  atom: true,
  addAttributes() {
    return {
      lines: { default: 9 }, // default ~9 lines tall
    };
  },
  parseHTML() {
    return [{ tag: "div[data-spacer]" }];
  },
  renderHTML({ node }) {
    // 12pt font * 1.2 line height * 9 lines
    const height = node.attrs.lines * 12 * 1.2;
    return [
      "div",
      {
        "data-spacer": "",
        style: `height: ${height}px; margin: 24px 0; background: rgba(0,0,0,0.05);`,
      },
    ];
  },
});

// --------------------
// 3) PAGE BREAK EXTENSION
// --------------------
const PageBreakExtension = Extension.create({
  name: "pageBreak",
  addCommands() {
    return {
      addPageBreak:
        () =>
        ({ commands }) => {
          return commands.insertContent({ type: "pageBreak" });
        },
    };
  },
});

// --------------------
// 4) PAGINATION PLUGIN
//    - Adds dashed line decorations where page breaks occur
// --------------------
const PaginationPlugin = new Plugin({
  key: new PluginKey("pagination"),
  state: {
    init() {
      return { pageBreaks: [] };
    },
    apply(tr, oldState) {
      const meta = tr.getMeta("pagination");
      if (meta?.pageBreaks) {
        return { pageBreaks: meta.pageBreaks };
      }
      return oldState;
    },
  },
  props: {
    decorations(state) {
      const { pageBreaks } = this.getState(state);
      if (!pageBreaks?.length) return null;

      const decorations = pageBreaks.map((pos) =>
        Decoration.widget(pos, () => {
          const hr = document.createElement("hr");
          hr.style.width = "100%";
          hr.style.border = "none";
          hr.style.borderTop = "1px dashed gray";
          hr.style.margin = "48px  0";
          return hr;
        })
      );

      return DecorationSet.create(state.doc, decorations);
    },
  },
});

// --------------------
// 5) HELPER: Calculate page-break positions
// --------------------
function calculatePageBreakPositions(editor, maxPageHeight) {
  if (!editor?.view) return [];
  const doc = editor.state.doc;
  let currentHeight = 0;
  const pageBreakPositions = [];
  let pos = 0;

  doc.forEach((node) => {
    const nodeStart = pos;
    pos += node.nodeSize;

    // skip spacer nodes in calculation
    if (node.type.name === "spacer") return;

    const dom = editor.view.nodeDOM(nodeStart);
    if (!dom) return;
    const rect = dom.getBoundingClientRect();

    if (currentHeight + rect.height > maxPageHeight) {
      pageBreakPositions.push(nodeStart);
      currentHeight = rect.height;
    } else {
      currentHeight += rect.height;
    }
  });

  return pageBreakPositions;
}

// --------------------
// 6) MAIN COMPONENT
// --------------------
export default function MultiPageEditor() {
  const [totalPages, setTotalPages] = useState(1);

  const editor = useEditor({
    extensions: [
      StarterKit,
      SpacerNode,
      PageBreakExtension,
      PaginationPlugin,
    ],
    content: `<p>Type your text here...</p>`,
    onUpdate: ({ editor }) => refreshPageBreaks(editor),
  });

  const refreshPageBreaks = useCallback((editorInstance) => {
    setTimeout(() => {
      const breaks = calculatePageBreakPositions(editorInstance, USABLE_HEIGHT_PX);
      const tr = editorInstance.state.tr;

      // Remove existing spacers
      editorInstance.state.doc.descendants((node, pos) => {
        if (node.type.name === "spacer") {
          tr.delete(pos, pos + node.nodeSize);
        }
      });

      // Insert new spacers at break points
      breaks.forEach((pos) => {
        tr.insert(pos, editorInstance.schema.nodes.spacer.create());
      });

      tr.setMeta("pagination", { pageBreaks: breaks });
      editorInstance.view.dispatch(tr);

      setTotalPages(breaks.length + 1);
    }, 0);
  }, []);

  useEffect(() => {
    if (!editor) return;
    const ro = new ResizeObserver(() => refreshPageBreaks(editor));
    ro.observe(editor.view.dom);
    return () => ro.disconnect();
  }, [editor, refreshPageBreaks]);

  return (
    <div
      style={{
        overflowY: "auto",
        height: "90vh",
        background: "#ccc",
        padding: "20px 0",
      }}
    >
      <span className="text-black-500 font-bold text-5xl fixed">
        totalPages: {totalPages}
      </span>
      <div
        style={{
          position: "relative",
          width: `${PAGE_WIDTH_PX}px`,
          margin: "0 auto",
        }}
      >
        {/* Render page backgrounds */}
        {Array.from({ length: totalPages }).map((_, index) => (
          <div
            key={index}
            style={{
              height: `${PAGE_HEIGHT_PX}px`,
              marginBottom: "20px",
              background: "#fff",
              boxShadow: "0 0 6px rgba(0,0,0,0.2)",
              padding: `${TOP_MARGIN_PX}px ${RIGHT_MARGIN_PX}px ${BOTTOM_MARGIN_PX}px ${LEFT_MARGIN_PX}px`,
              boxSizing: "border-box",
            }}
          />
        ))}

        {/* Editor content overlay */}
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            minHeight: `${totalPages * PAGE_HEIGHT_PX}px`,
            padding: `${TOP_MARGIN_PX}px ${RIGHT_MARGIN_PX}px ${BOTTOM_MARGIN_PX}px ${LEFT_MARGIN_PX}px`,
            fontFamily: "'Courier Prime', monospace",
            fontSize: "12pt",
            lineHeight: "1.2em",
            boxSizing: "border-box",
          }}
        >
          <EditorContent editor={editor} />
        </div>
      </div>
    </div>
  );
}

Usage

you have to create react project and paste this code

Type

Other

Other

Any guidance or example code to help me:

Avoid flicker from repeated DOM measurements + doc changes.
Possibly measure in a hidden layer and then just visually split pages in the final layout (instead of physically inserting “spacer” nodes).
Or any other approach that yields a stable, multi-page doc view?
Thanks in advance for any help!