Feature Request: Pagination extension (A4 format content)

[clemente-xyz]

Description

Extension which purpose is to emulate the content into an A4 page format, and automatically split the content for the user when the max height is exceeded.

Until now, Tiptap has no extensions that allow the editor to enter to this "page" format.

Use Case

Many apps with more conventional users (mainly in industries such as lawyers, legal guardians, any anyone which has to work with lots of paper) still need online editors that emulate the content into an A4 page format. Many need to print it out or export it to PDF to be sent to recipients that need to document in A4 format.

Type

New extension

[clemente-xyz]

I have already done some work for my Nextjs app, but it still a bit buggy:

import { Extension } from '@tiptap/core';
import { Node, mergeAttributes } from '@tiptap/core';
import { Node as PMNode } from '@tiptap/pm/model';
import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state';

export const PageNode = Node.create({
  name: 'page',
  group: 'block',
  content: 'block+',
  defining: true,
  isolating: true,

  parseHTML() {
    return [
      {
        tag: 'div[data-page]',
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    return ['div', mergeAttributes(HTMLAttributes, { 'data-page': true, class: 'page' }), 0];
  },

  addNodeView() {
    return () => {
      const dom = document.createElement('div');
      dom.setAttribute('data-page', 'true');
      dom.classList.add('page');
      dom.style.height = '297mm'; // A4 height in mm
      dom.style.width = '210mm'; // A4 width in mm
      dom.style.padding = '25.4mm';
      dom.style.border = '1px solid #ccc';
      dom.style.background = 'white';
      dom.style.overflow = 'hidden';
      dom.style.position = 'relative';

      const contentDOM = document.createElement('div');
      dom.appendChild(contentDOM);

      return {
        dom,
        contentDOM,
      };
    };
  },
});

export const PaginationExtension = Extension.create({
  name: 'pagination',

  addProseMirrorPlugins() {
    return [
      new Plugin({
        key: new PluginKey('pagination'),
        appendTransaction: (transactions, oldState, newState) => {
          const paginationMeta = 'pagination';
          const lastTransaction = transactions[transactions.length - 1];
          const isPaginationTransaction = lastTransaction.getMeta(paginationMeta);

          // Avoid infinite loops and unnecessary processing
          if (isPaginationTransaction || !lastTransaction.docChanged) {
            return null;
          }

          const { schema } = newState;
          const pageType = schema.nodes.page;

          if (!pageType) {
            return null;
          }

          // Collect content nodes, flattening existing pages
          const contentNodes: PMNode[] = [];

          newState.doc.forEach((node) => {
            if (node.type === pageType) {
              node.forEach((child) => contentNodes.push(child));
            } else {
              contentNodes.push(node);
            }
          });

          // Partition content nodes into pages
          const pages = [];
          let currentPageContent: PMNode[] = [];
          let currentHeight = 0;
          const pageHeight = (297 - 25.4 * 2) * 3.77953; // A4 height in mm minus padding, converted to px (1 mm = 3.77953 px)
          const lineHeight = 24; // Line height in px

          for (const node of contentNodes) {
            const nodeHeight = estimateNodeHeight(node, lineHeight);

            if (currentHeight + nodeHeight > pageHeight && currentPageContent.length > 0) {
              // Start a new page
              pages.push(pageType.create({}, currentPageContent));
              currentPageContent = [node];
              currentHeight = nodeHeight;
            } else {
              currentPageContent.push(node);
              currentHeight += nodeHeight;
            }
          }

          if (currentPageContent.length > 0) {
            pages.push(pageType.create({}, currentPageContent));
          }

          const newDoc = schema.topNodeType.create(null, pages);

          // Compare the content of the documents
          if (newDoc.content.eq(newState.doc.content)) {
            return null; // No changes, skip transaction
          }

          const tr = newState.tr.replaceWith(0, newState.doc.content.size, newDoc.content);
          tr.setMeta(paginationMeta, true);

          // Map the selection from oldState to the new document
          const { selection } = oldState;
          const mappedSelection = selection.map(tr.doc, tr.mapping);

          if (mappedSelection) {
            tr.setSelection(mappedSelection);
          } else {
            // Fallback to a safe selection at the end of the document
            tr.setSelection(TextSelection.create(tr.doc, tr.doc.content.size));
          }

          return tr;
        },
      }),
    ];
  },
});

function estimateNodeHeight(node: PMNode, lineHeight: number): number {
  if (node.isTextblock) {
    const lines = node.textContent.split('\n').length || 1;
    return lines * lineHeight;
  } else if (node.type.name === 'image') {
    return 200;
  } else {
    return lineHeight;
  }
}

[bdbch]

Nice job. I was working on something similar at some point but didn't find enough time to put into this in general.

The biggest task is actually calculating if content on a page fits the page's boundaries (in size including margin) and if content needs to be moved to a new page or should be merged back into a previous page.

Do you have a few more insights into this?

[Cassielxd]

You can refer to this implementation https://github.com/Cassielxd/CassieEditor

[clemente-xyz]

@Cassielxd your implementation looks nice, but the code is super hard to follow and adapt to React. I actually submitted an issue on your repo asking for a React extension/adaptation to it: Cassielxd/CassieEditor#5

I spent a lot of time trying to adapt it, but no case

[clemente-xyz]

@bdbch yes. Right now the content split into nodes is working super good, but only for paragraphs, lists, and other simple nodes. The big issue comes with more complex HTML elements such as tables. It's not an easy job to traverse the table element and make a split. Something similar with images.

There are also some buggy behaviors when deleting content and passing to previous page nodes, which I still cant figure out how to solve

[AntonA-DB]

@clemente-xyz your implementation works really smooth. Great job!
Were you able to make the cursor to move to the previous page when you remove content at the top of the page?

[clemente-xyz]

Hey @AntonA-DB thanks for your message!

I was out of time with the project timeline, and had to go with a work around that has no pagination :/

But I would love to continue ue working on it with collaboration

[hugs7]

Hey @clemente-xyz , love your work. @AntonA-DB . I was able to get this working by adding a backspace handler within the Pagination Extension. I also handled the delete key for deleting (forwards) from the end of a page. See my code below. It's still not perfect though - very tricky!

Update: See my next comment with more improvements.

import { Extension } from "@tiptap/core";
import { keymap } from "@tiptap/pm/keymap";
import { Selection } from "@tiptap/pm/state";
import PaginationPlugin from "../Plugins/Pagination";
import { isHighlighting, getResolvedPosition, setSelectionAtPos, setSelection } from "../utils/selection";
import { getPositionNodeType } from "../utils/node";
import {
    getNextParagraph,
    getParagraphNodeAndPosition,
    getPreviousParagraph,
    getThisPageNodePosition,
    isPageNode,
    isPosAtEndOfPage,
    isPosAtLastChildOfPage,
    isPosAtStartOfPage,
    isTextNode,
} from "../utils/pagination";

const PaginationExtension = Extension.create({
    name: "pagination",
    addProseMirrorPlugins() {
        return [
            keymap({
                Enter: (state, dispatch) => {
                    if (!dispatch) {
                        console.warn("No dispatch function provided");
                        return false;
                    }

                    if (isHighlighting(state)) {
                        return false;
                    }

                    const { from } = state.selection;
                    const tr = state.tr;
                    const $pos = getResolvedPosition(state);

                    // Ensure that the position is within a valid block (paragraph)
                    if (getPositionNodeType($pos) !== "paragraph") {
                        console.warn("Not inside a paragraph node");
                        return false;
                    }

                    if (!isPosAtLastChildOfPage(state.doc, $pos)) {
                        return false;
                    }

                    const paragraph = state.schema.nodes.paragraph.create();

                    // Create a new empty paragraph node
                    console.log("Inserting new paragraph at position", from);

                    // if (isPosAtEndOfPage(state.doc, $pos)) {
                    tr.insert(from, paragraph);
                    // } else {
                    // tr.insert(from - 1, paragraph);
                    // }

                    // Find the nearest valid cursor position inside the new paragraph

                    const newPosition = tr.doc.resolve(from + 1);
                    const newSelection = Selection.near(newPosition, 1);

                    // Set the selection to be inside the new paragraph
                    setSelection(tr, newSelection);
                    dispatch(tr);

                    return true;
                },
                Backspace: (state, dispatch) => {
                    if (!dispatch) {
                        console.warn("No dispatch function provided");
                        return false;
                    }

                    if (isHighlighting(state)) {
                        return false;
                    }

                    const { from, to } = state.selection;
                    const tr = state.tr;
                    const $pos = getResolvedPosition(state);

                    // Ensure that the position is within a valid block (paragraph)
                    if (getPositionNodeType($pos) !== "paragraph") {
                        return false;
                    }

                    if (!isPosAtStartOfPage(state.doc, $pos)) {
                        return false;
                    }

                    // Traverse $pos.path to find the nearest page node
                    const thisNodePos = $pos.pos;
                    const thisPageNodePos = getThisPageNodePosition(state.doc, $pos);

                    const thisPageNode = state.doc.nodeAt(thisPageNodePos);
                    const firstChildPos = thisPageNodePos + 1;

                    if (firstChildPos !== thisNodePos - 1) {
                        // Not at the beginning of the page
                        return false;
                    }

                    const prevPageChild = state.doc.childBefore(thisPageNodePos);
                    const prevPageNode = prevPageChild.node;

                    // Confirm that the previous node is a page node
                    if (!prevPageNode) {
                        // Start of document
                        console.log("No previous page node found");
                        return false;
                    }

                    if (prevPageNode.type.name !== "page") {
                        console.warn("Previous node is not a page node");
                        return false;
                    }

                    // Append the content of the current paragraph to the end of the previous paragraph
                    const { paragraphPos, paragraphNode } = getParagraphNodeAndPosition(state.doc, $pos);
                    if (!paragraphNode) {
                        console.warn("No current paragraph node found");
                        return false;
                    }

                    const { prevParagraphPos, prevParagraphNode } = getPreviousParagraph(state.doc, paragraphPos);
                    if (!prevParagraphNode) {
                        console.warn("No previous paragraph node found");
                        return false;
                    }

                    tr.delete(paragraphPos, paragraphPos + paragraphNode.nodeSize);

                    const newContent = prevParagraphNode.content.append(paragraphNode.content);
                    tr.replaceWith(prevParagraphPos, prevParagraphPos + prevParagraphNode.nodeSize, newContent);

                    // Set the selection to the end of the previous paragraph
                    const lastChildPosition = tr.doc.resolve(prevPageNode.content.size);
                    const newSelection = Selection.near(lastChildPosition, 1);
                    console.log("Setting selection to", newSelection);
                    setSelection(tr, newSelection);
                    dispatch(tr);

                    return true;
                },
                Delete: (state, dispatch) => {
                    if (!dispatch) {
                        console.warn("No dispatch function provided");
                        return false;
                    }

                    if (isHighlighting(state)) {
                        return false;
                    }

                    const tr = state.tr;
                    const $pos = getResolvedPosition(state);

                    // Ensure that the position is within a valid block (paragraph)
                    if (getPositionNodeType($pos) !== "paragraph") {
                        console.warn("Not inside a paragraph node");
                        return false;
                    }

                    if (!isPosAtEndOfPage(state.doc, $pos)) {
                        return false;
                    }

                    // We need to remove the current paragraph node and prepend any
                    // content to the next paragraph node (which will now be at the
                    // end of the current page)

                    const thisPos = $pos.pos;
                    const expectedTextNodePos = thisPos - 1;
                    const thisTextNode = state.doc.nodeAt(expectedTextNodePos);
                    if (!thisTextNode) {
                        console.warn("No node found at position", expectedTextNodePos);
                        return false;
                    }

                    if (!isTextNode(thisTextNode)) {
                        const nodeType = thisTextNode.type.name;
                        console.warn("Expected text node before paragraph node. Found", nodeType);
                        return false;
                    }

                    const { paragraphPos, paragraphNode } = getParagraphNodeAndPosition(state.doc, $pos);
                    if (!paragraphNode) {
                        console.warn("No current paragraph node found");
                        return false;
                    }

                    const thisPageChild = state.doc.childAfter(paragraphPos);
                    if (!isPageNode(thisPageChild.node)) {
                        console.warn("No page node found");
                        return false;
                    }

                    const pageNum = thisPageChild.index;
                    const nextPageNode = state.doc.child(pageNum + 1);
                    if (!nextPageNode) {
                        console.log("No next page node found");
                        return false;
                    }

                    const { nextParagraphPos, nextParagraphNode } = getNextParagraph(state.doc, thisPos);
                    if (!nextParagraphNode) {
                        console.log("No first paragraph node found");
                        return false;
                    }

                    tr.delete(nextParagraphPos, nextParagraphPos + nextParagraphNode.nodeSize);

                    const newContent = paragraphNode.content.append(nextParagraphNode.content);
                    tr.replaceWith(paragraphPos, paragraphPos + paragraphNode.nodeSize, newContent);

                    // Set selection
                    setSelectionAtPos(tr, thisPos);

                    dispatch(tr);

                    return true;
                },
            }),
            PaginationPlugin,
        ];
    },
});

export default PaginationExtension;

Some utils referenced above

/**
 * @file /src/components/TipTap/utils/pagination.ts
 * @name Pagination
 * @description Utility functions for paginating the editor content.
 */

import { ResolvedPos } from "@tiptap/pm/model";
import { EditorState, Selection, TextSelection, Transaction } from "@tiptap/pm/state";

/**
 * Check if the editor is currently highlighting text.
 * @param state - The current editor state.
 * @returns True if text is currently highlighted, false otherwise.
 */
export const isHighlighting = (state: EditorState): boolean => {
    const { from, to } = state.selection;
    return from !== to;
};

/**
 * Get the resolved position in the document.
 * @param state - The current editor state.
 * @returns The resolved position in the document.
 */
export const getResolvedPosition = (state: EditorState): ResolvedPos => {
    const { from } = state.selection;
    const $pos = state.doc.resolve(from);
    return $pos;
};

/**
 * Set the selection at the specified anchor and head positions. If head is not provided,
 * it will be set to the anchor position.
 * @param tr - The current transaction.
 * @param anchor - The anchor position.
 * @param head - The head position.
 * @returns The updated transaction.
 */
export const setSelectionAtPos = (tr: Transaction, anchor: number, head?: number): Transaction => {
    const selection = TextSelection.create(tr.doc, anchor, head ?? anchor);
    return setSelection(tr, selection);
};

/**
 * Set the selection to the specified selection object.
 * @param tr - The current transaction.
 * @param selection - The selection object.
 * @returns The updated transaction.
 */
export const setSelection = <S extends Selection>(tr: Transaction, selection: S): Transaction => {
    console.log("Setting selection to", selection.$anchor.pos, "-", selection.$head.pos);
    return tr.setSelection(selection);
};

/**
 * @file /src/components/TipTap/utils/node.ts
 * @name Node
 * @description Utility functions for creating custom nodes in the editor.
 */

import { Node, ResolvedPos } from "@tiptap/pm/model";

/**
 * Get the type of the node at the specified position.
 * @param $pos - The resolved position in the document.
 * @returns The type of the node at the specified position.
 */
export const getPositionNodeType = ($pos: ResolvedPos): string => {
    return $pos.parent.type.name;
};

/**
 * Get the parent node position of the specified type.
 * @param doc - The document node.
 * @param $pos - The resolved position in the document or the absolute position of the node.
 * @param type - The type of the node to search for.
 * @returns The position of the parent node of the specified type.
 */
export const getParentNodePosOfType = (doc: Node, $pos: ResolvedPos | number, type: string): ResolvedPos => {
    // Base case: If the position is a number, resolve it
    if (typeof $pos !== "number") {
        return getParentNodePosOfType(doc, $pos.before(), type);
    }

    const thisPos = doc.resolve($pos);

    // Base case: If the node at the position is of the specified type, return the position
    if (doc.nodeAt($pos)?.type.name === type) {
        return thisPos;
    }

    // Recursive case: Move one level up and check again
    const prevPos = thisPos.before();
    return getParentNodePosOfType(doc, prevPos, type);
};

/**
 * @file /src/components/TipTap/utils/pagination.ts
 * @name Pagination
 * @description Utility functions for paginating the editor content.
 */

import { Node, ResolvedPos } from "@tiptap/pm/model";
import { getParentNodePosOfType, getPositionNodeType } from "./node";
import { Nullable } from "../../../utils/record";

/**
 * Check if the given node is a page node.
 * @param node - The node to check.
 * @returns {boolean} True if the node is a page node, false otherwise.
 */
export const isPageNode = (node: Nullable<Node>): boolean => {
    if (!node) {
        console.warn("No node provided");
        return false;
    }

    return node.type.name === "page";
};

/**
 * Check if the given node is a paragraph node.
 * @param node - The node to check.
 * @returns {boolean} True if the node is a paragraph node, false otherwise.
 */
export const isParagraphNode = (node: Nullable<Node>): boolean => {
    if (!node) {
        console.warn("No node provided");
        return false;
    }

    return node.type.name === "paragraph";
};

/**
 * Check if the given node is a text node.
 * @param node - The node to check.
 * @returns {boolean} True if the node is a text node, false otherwise.
 */
export const isTextNode = (node: Nullable<Node>): boolean => {
    if (!node) {
        console.warn("No node provided");
        return false;
    }

    return node.type.name === "text";
};

/**
 * Get the page node (parent of the current node) position.
 * @param doc - The document node.
 * @param pos - The resolved position in the document or the absolute position of the node.
 * @returns {number} The position of the page node.
 */
export const getThisPageNodePosition = (doc: Node, pos: ResolvedPos | number): number => {
    return getParentNodePosOfType(doc, pos, "page").pos;
};

/**
 * Get the paragraph node position.
 * @param doc - The document node.
 * @param pos - The resolved position in the document or the absolute position of the node.
 * @returns {number} The position of the paragraph node.
 */
export const getThisParagraphNodePosition = (doc: Node, pos: ResolvedPos | number): number => {
    return getParentNodePosOfType(doc, pos, "paragraph").pos;
};

/**
 * Get the page node position and the page node itself.
 * @param doc - The document node.
 * @param pos - The resolved position in the document or the absolute position of the node.
 * @returns {pagePos: number, pageNode: Node} The position and the node of the page.
 */
export const getPageNodeAndPosition = (doc: Node, pos: ResolvedPos | number): { pagePos: number; pageNode: Nullable<Node> } => {
    if (typeof pos === "number") {
        return getPageNodeAndPosition(doc, doc.resolve(pos));
    }

    const pagePos = getThisPageNodePosition(doc, pos);
    const pageNode = doc.nodeAt(pagePos);

    return { pagePos, pageNode };
};

/**
 * Get the paragraph node position and the paragraph node itself.
 * @param doc - The document node.
 * @param pos - The resolved position in the document or the absolute position of the node.
 * @returns {paragraphPos: number, paragraphNode: Node} The position and the node of the paragraph.
 */
export const getParagraphNodeAndPosition = (
    doc: Node,
    pos: ResolvedPos | number
): { paragraphPos: number; paragraphNode: Nullable<Node> } => {
    if (typeof pos === "number") {
        return getParagraphNodeAndPosition(doc, doc.resolve(pos));
    }

    const paragraphPos = getThisParagraphNodePosition(doc, pos);
    const paragraphNode = doc.nodeAt(paragraphPos);

    return { paragraphPos, paragraphNode };
};

/**
 * Get the start of the page position.
 * @param doc - The document node.
 * @param pos - The resolved position in the document or the absolute position of the node.
 * @returns {number} The start position of the page.
 */
export const getStartOfPagePosition = (doc: Node, pos: ResolvedPos | number): number => {
    if (typeof pos === "number") {
        return getStartOfPagePosition(doc, doc.resolve(pos));
    }

    const { pagePos, pageNode } = getPageNodeAndPosition(doc, pos);
    if (!pageNode) {
        console.warn("No page node found");
        return -1;
    }

    return pagePos;
};

/**
 * Get the start of the paragraph position.
 * @param doc - The document node.
 * @param pos - The resolved position in the document or the absolute position of the node.
 * @returns {number} The start position of the paragraph.
 */
export const getStartOfParagraphPosition = (doc: Node, pos: ResolvedPos | number): number => {
    if (typeof pos === "number") {
        return getStartOfParagraphPosition(doc, doc.resolve(pos));
    }

    const { paragraphPos, paragraphNode } = getParagraphNodeAndPosition(doc, pos);
    if (!paragraphNode) {
        console.warn("No paragraph node found");
        return -1;
    }

    return paragraphPos;
};

/**
 * Get the start of the page and paragraph positions.
 * @param doc - The document node.
 * @param pos - The resolved position in the document or the absolute position of the node.
 * @returns {startOfPagePos: number, startOfParagraphPos: number} The start positions of the page and paragraph.
 */
export const getStartOfPageAndParagraphPosition = (
    doc: Node,
    pos: ResolvedPos | number
): { startOfPagePos: number; startOfParagraphPos: number } => {
    const startOfParagraphPos = getStartOfParagraphPosition(doc, pos);
    const startOfPagePos = getStartOfPagePosition(doc, pos);

    return { startOfPagePos, startOfParagraphPos };
};

/**
 * Get the end of the page position.
 * @param doc - The document node.
 * @param pos - The resolved position in the document or the absolute position of the node.
 * @returns {number} The end position of the page.
 */
export const getEndOfPagePosition = (doc: Node, pos: ResolvedPos | number): number => {
    if (typeof pos === "number") {
        return getEndOfPagePosition(doc, doc.resolve(pos));
    }

    const { pagePos, pageNode } = getPageNodeAndPosition(doc, pos);
    if (!pageNode) {
        console.warn("No page node found");
        return -1;
    }

    return pagePos + pageNode.content.size;
};

/**
 * Get the end of the paragraph position.
 * @param doc - The document node.
 * @param pos - The resolved position in the document or the absolute position of the node.
 * @returns {number} The end position of the paragraph.
 */
export const getEndOfParagraphPosition = (doc: Node, $pos: ResolvedPos | number): number => {
    if (typeof $pos === "number") {
        return getEndOfParagraphPosition(doc, doc.resolve($pos));
    }

    const { paragraphPos, paragraphNode } = getParagraphNodeAndPosition(doc, $pos);
    if (!paragraphNode) {
        console.warn("No paragraph node found");
        return -1;
    }

    return paragraphPos + paragraphNode.content.size;
};

/**
 * Get the end of the page and paragraph positions.
 * @param doc - The document node.
 * @param pos - The resolved position in the document or the absolute position of the node.
 * @returns {endOfPagePos: number, endOfParagraphPos: number} The end positions of the page and paragraph.
 */
export const getEndOfPageAndParagraphPosition = (
    doc: Node,
    $pos: ResolvedPos | number
): { endOfPagePos: number; endOfParagraphPos: number } => {
    const endOfParagraphPos = getEndOfParagraphPosition(doc, $pos);
    const endOfPagePos = getEndOfPagePosition(doc, $pos);

    return { endOfPagePos, endOfParagraphPos };
};

/**
 * Check if the editor is currently highlighting text.
 * @param state - The current editor state.
 * @returns True if text is currently highlighted, false otherwise.
 */
const isPosMatchingStartOfPageCondition = (doc: Node, $pos: ResolvedPos | number, checkExactStart: boolean): boolean => {
    // Resolve position if given as a number
    if (typeof $pos === "number") {
        return isPosMatchingStartOfPageCondition(doc, doc.resolve($pos), checkExactStart);
    }

    // Ensure that the position is within a valid block (paragraph)
    if (getPositionNodeType($pos) !== "paragraph") {
        console.warn("Not inside a paragraph node");
        return false;
    }

    // Get positions for paragraph and page
    const { startOfPagePos, startOfParagraphPos } = getStartOfPageAndParagraphPosition(doc, $pos);
    if (startOfPagePos < 0) {
        console.warn("Invalid page position");
        return false;
    }

    if (startOfParagraphPos < 0) {
        console.warn("Invalid paragraph position");
        return false;
    }

    // Determine the condition to check
    const isFirstParagraph = startOfPagePos + 1 === startOfParagraphPos;
    if (checkExactStart) {
        // Check if position is exactly at the start of the page
        // First position of page will always be 1 more than the paragraph position
        const isPosAtStartOfParagraph = $pos.pos - 1 === startOfParagraphPos;
        if (isFirstParagraph && isPosAtStartOfParagraph) {
            console.log("At the start of the page");
            return true;
        }
        console.log("Not at the start of the page");
        return false;
    } else {
        // Check if position is at the first child of the page
        if (isFirstParagraph) {
            console.log("In the first child of the page");
            return true;
        }
        console.log("Not in the first child of the page");
        return false;
    }
};

/**
 * Check if the given position is at the start of the page or the first child of the page.
 * @param doc - The document node.
 * @param $pos - The resolved position in the document or the absolute position of the node.
 * @returns {boolean} True if the condition is met, false otherwise.
 */
export const isPosAtStartOfPage = (doc: Node, $pos: ResolvedPos | number): boolean => {
    return isPosMatchingStartOfPageCondition(doc, $pos, true);
};

/**
 * Check if the given position is at the first paragraph child of the page.
 * @param doc - The document node.
 * @param pos - The resolved position in the document or the absolute position of the node.
 * @returns {boolean} True if the position is at the start of the page, false otherwise.
 */
export const isPosAtFirstChildOfPage = (doc: Node, $pos: ResolvedPos | number): boolean => {
    return isPosMatchingStartOfPageCondition(doc, $pos, false);
};

/**
 * Check if the given position is at the end of the page or the last child of the page.
 * @param doc - The document node.
 * @param $pos - The resolved position in the document or the absolute position of the node.
 * @param checkExactEnd - Whether to check for the exact end of the page (true) or the last child of the page (false).
 * @returns {boolean} True if the condition is met, false otherwise.
 */
const isPosMatchingEndOfPageCondition = (doc: Node, $pos: ResolvedPos | number, checkExactEnd: boolean): boolean => {
    // Resolve position if given as a number
    if (typeof $pos === "number") {
        return isPosMatchingEndOfPageCondition(doc, doc.resolve($pos), checkExactEnd);
    }

    // Ensure that the position is within a valid block (paragraph)
    if (getPositionNodeType($pos) !== "paragraph") {
        console.warn("Not inside a paragraph node");
        return false;
    }

    // Get positions for paragraph and page
    const { endOfParagraphPos, endOfPagePos } = getEndOfPageAndParagraphPosition(doc, $pos);
    if (endOfParagraphPos < 0) {
        console.warn("Invalid end of paragraph position");
        return false;
    }

    if (endOfPagePos < 0) {
        console.warn("Invalid end of page position");
        return false;
    }

    // Determine the condition to check
    if (checkExactEnd) {
        // Check if position is exactly at the end of the page
        if ($pos.pos === endOfPagePos) {
            console.log("At the end of the page");
            return true;
        }
        console.log("Not at the end of the page");
        return false;
    } else {
        // Check if position is at the last child of the page
        if (endOfParagraphPos + 1 === endOfPagePos) {
            console.log("In the last child of the page");
            return true;
        }
        console.log("Not in the last child of the page");
        return false;
    }
};

/**
 * Check if the given position is exactly at the end of the page.
 * @param doc - The document node.
 * @param pos - The resolved position in the document or the absolute position of the node.
 * @returns {boolean} True if the position is at the end of the page, false otherwise.
 */
export const isPosAtEndOfPage = (doc: Node, $pos: ResolvedPos | number): boolean => {
    return isPosMatchingEndOfPageCondition(doc, $pos, true);
};

/**
 * Check if the given position is at the last paragraph child of the page.
 * @param doc - The document node.
 * @param pos - The resolved position in the document or the absolute position of the node.
 * @returns {boolean} True if the position is at the end of the page, false otherwise.
 */
export const isPosAtLastChildOfPage = (doc: Node, $pos: ResolvedPos | number): boolean => {
    return isPosMatchingEndOfPageCondition(doc, $pos, false);
};

/**
 * Get the previous paragraph node.
 * @param doc - The document node.
 * @param pos - The position in the document.
 * @returns {Node} The previous paragraph node.
 */
export const getPreviousParagraph = (doc: Node, pos: number): { prevParagraphPos: number; prevParagraphNode: Nullable<Node> } => {
    let prevParagraphPos = pos;
    let prevParagraphNode = null;
    while (prevParagraphNode === null && prevParagraphPos > 0) {
        prevParagraphPos -= 1;
        const node = doc.nodeAt(prevParagraphPos);
        if (!node) {
            continue;
        }

        if (isParagraphNode(node)) {
            prevParagraphNode = node;
            prevParagraphPos = prevParagraphPos;
        }
    }

    return { prevParagraphPos, prevParagraphNode };
};

/**
 * Get the next paragraph node.
 * @param doc - The document node.
 * @param pos - The position in the document.
 * @returns {Node} The next paragraph node.
 */
export const getNextParagraph = (doc: Node, pos: number): { nextParagraphPos: number; nextParagraphNode: Nullable<Node> } => {
    const documentLength = doc.nodeSize;
    let nextParagraphPos = pos;
    let nextParagraphNode = null;
    while (nextParagraphNode === null && nextParagraphPos < documentLength) {
        nextParagraphPos += 1;
        const node = doc.nodeAt(nextParagraphPos);
        if (!node) {
            continue;
        }

        if (isParagraphNode(node)) {
            nextParagraphNode = node;
            nextParagraphPos = nextParagraphPos;
        }
    }

    return { nextParagraphPos, nextParagraphNode };
};

[hugs7]

I've made some further improvements and am pretty confident about the handling between pages now. The code is a bit long to put here so I've made this into an extension. Check if out if you are interested.

https://github.com/hugs7/tiptap-extension-pagination

[hugs7]

#5960

[caseybeck10]

Great job, this is the first well-documented pagination solution that I've seen online. I echo your need for a comprehensive pagination plugin. As you said, there are so many sectors in which being able to see editable content in pages is essential.

Have you tested cases in which the number of pages reaches 100, 200 or higher? That's generally where the existing solutions begin to slow down.

[clemente-xyz]

not yet. Did you test it out? Im struggling with some minor issues:

1. Deleting content from one page to the previous dont make the cursor jump to the previous page (needs to be done manually).
2. Initial content that comes in "flat format" (not paginated into page nodes) is not properly being parsed into page nodes (all loads into a single page and I have to press Enter or edit the content to make the proper page splitting).
3. Tables not being properly handled: they should be split into multiple tables when overflowing a page content, and right now they are treated a a single big element, hence moved completely to a new page (leaving available empty content on the previous page with no use)

Would be nice to hear some feedback on those issues, as well as recommendations of changes!

[caseybeck10]

I've copied the code and played around with it, but haven't been able to thoroughly test it as of yet. You're right, there are definitely some issues with pasting content, specifically when the pasted text overflows onto the next page.

I'll take a good look at the code tonight and see what I can do. Would you be interested in placing the up-to-date code in a public github repo? I'm in need of a pagination solution for my app & have been researching the current landscape for a while now. I'd certainly be interested in helping build a robust one.

If you haven't seen already; there's a recent forum post that outlines a paginated JS editor built on prosemirror called BadonWriter: https://discuss.prosemirror.net/t/a-new-text-editor-with-pagination/6667/7

There's a live demo on the website. Might be worth playing around with to get some inspiration. The author mentioned that they'd be open-sourcing in the near future. May be worth talking to them too?

[clemente-xyz]

oh this is great. I just posted a reply so the authors can have a look in here. Hope the project gets open sourced and is easy to lookup for references on how to improve this Tiptap extension

@bdbch any updates from your side?

[clemente-xyz]

Hi guys. Any progress by your side? For me has been a hell, and right now trying out a Collabora Online server to just embedded it to the app

[hugs7]

@jamAL108 I believe you need to add the PageNode to the extension array as well.
There isn't a React example in the docs but you can figure this out from the Vue example: https://tiptap.dev/docs/editor/extensions/custom-extensions/node-views/examples

[dylandamsma]

There's an open source Vue + TipTap based solution that has pagination built in. They also open-sourced the pagination code, but after a quick look - I am not going to try deciphering it.

https://editor.umodoc.com/en/docs - check out their git repo too

However, it might be of help to you.

[bdbch]

Thanks @dylandamsma - already checked it out and I actually have a draft of the pagination working now. We just need to find some time to work on it (hopefully soon).

[dylandamsma]

I am very excited about the prospect of pagination being added to TipTap.

In the meantime, for those who need to understand how their tiptap document renders to PDF, I've hacked together an editor that renders the direct - paginated - pdf preview. Then I am using custom line break plugin that just uses CSS to kick the content to the next page. That way you can get reasonable close to final PDF export.

I am using html2pdf - and wrap the HTML output from tiptap in the same CSS I am using for the editor.

Something like this:

    const htmlTemplate = `
        <!DOCTYPE HTML>
        <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="/assets/pdf.css">
        </head>
        <body>
            ${tiptapHtmlOutput}
        </body>
        </html>
    `;

Then I send the combined html to the pdfjs viewer. I added some debounce to the tiptap updateContent, so that it doesn't happen constantly. The outcome is something like below. This is a very quick example.

This could be improved by a custom Tiptap to HTML renderer.

[ChuanfengZhang]

Thanks @dylandamsma - already checked it out and I actually have a draft of the pagination working now. We just need to find some time to work on it (hopefully soon).

I hope you'll have some time to check out Synology Office's document product. I think it's the best Prosemirror-based editor with pagination support I've come across so far. Maybe it could give you some inspiration.
hugs7/tiptap-extension-pagination#49 (comment)

[clemente-xyz]

guys, i asked for the feature on #5793 (comment) :)

hope the team consider it!!!

[babayan777]

Hi guys, need same implementation for me also, using tiptap with automatically page-breaks (like in Google-Docs) any demo or updates ?

[clemente-xyz]

Hey @bdbch thanks a lot for the detailed update 🙏

We haven't touched our Tiptap online editor since some months, and the last update we did was exactly adding page breaks as simple decorators - it's kind of functional, but still a workaround.

Now our customer base is really growing (mostly gov institutions and lawyers), and we are really getting pushed for a more "Word-like" online editor with proper pagination (A4 format).

In the short term we will have to come back to this to re-work on our solution.

Any updates from the Tiptap team and roadmap?

[RomikMakavana]

https://romikmakavana.me/tiptap-pagination/ @clemente-xyz

[dan-cooke]

Hey @bdbch thanks for this update,

I have been working on a pagination extension for TipTap for nearly a year now on and off, and I have come to basically the same conclusion as you. As you have identified there are seemingly only two ways (that I can see for now) of achieving pagination

1. Node based pagination
2. Pure CSS pagination

I just wanted to chime in on some points:

Seems to work fine but takes a lot of work to get right, will not work with splitting nodes (specially nodes like tables)
It will actually work with Table nodes, you just need a crazy complex node manipulation algorithm that determies the point of the split within the table. But handling this for uneven sized cells and merged rows etc. is extremely complex. Theres another library i'm sure you have seen :
https://github.com/todorstoev/prosemirror-pagination

Following the example implementation here and a lot of modifications, I managed to get a semi-working pagination that supports table breaks. But don't even get me started on things like images that span the length of a page

If Tip Tap do end up supporting Pagination - I would really prefer it be this Node based solution, I left another comment on this discussion about the issues with solutions like @RomikMakavana 's and others (Pure CSS based), as you have also identified.

[clemente-xyz]

Completely agree here.

For us has been a complete challenge to get pagination to work properly on tiptap. We gave up at some point because of other business priorities, and ended up with just manually inserted page breaks.

I would love the tiptap team to commit to the development of this extension (node-based)

[clemente-xyz]

BTW @dan-cooke , do you have any demo of your solution?

[17Amir17]

I took a swing at this https://pagination-demo-ashy.vercel.app/
LMK what u think

[RomikMakavana]

@17Amir17
As I can see your pagination, that is really good work, that how you split table node, thats really impressive.

But, there is same issue with other, can how you divided Page, there is miss placement of paragraph and padding issue for page area let me give you details with screenshots

1. Paragraph should be should right after previous node, it's not working
   • https://quickss.in/s/Mcr7S07
2. If content is longer than page then it should break content to next page
   • but you have added just absolute position blank area,
   • Issue : line gets disappear below absolute blank line area.
   • Page does not have proper blank area on top/bottom (padding)
   • https://quickss.in/s/pNPJpUK

Also, these issue is not able to solve, there is some reason
you can check detail understanding here
https://romik-mk.medium.com/tiptap-pagination-problems-solutions-31f1a0b51e08

Thank you

[arnaugomez]

Impressive, awesome job. There are some issues you might want to check (for example, top padding of the first page is not shown) but It looks super cool. Is it closed source or could you share the source code?

[17Amir17]

Hey guys thanks so much for your feedback!
Unfortunately I am unable to open source this yet at is contains some parts that are internal to my company
However, I can say that this implementation is very similar to what is discussed here https://discuss.prosemirror.net/t/a-new-text-editor-with-pagination/6667/3

If you are looking into implementing this on your app I'd recommend starting out with a very simple editor and try handle simple paragraphs first and only then, and also putting time into some dev tools to help debug. @RomikMakavana and @arnaugomez there are a bunch of bugs that would be very hard to solve without.
Here is an example of what I am working with:

Screen.Recording.2025-04-10.at.12.34.21.mov

[RomikMakavana]

@17Amir17
https://discuss.prosemirror.net/t/a-new-text-editor-with-pagination/6667/3
this discussion is very, I was really searching for something like this
How they break page is very unique and performant.
I am trying to debug, it this work, then main hurdle is resolve,
Thank you very much Its very useful.

[RomikMakavana]

Here is tiptap pagination with example
https://romikmakavana.me/tiptap-pagination/

Thank you

[RomikMakavana]

Hello everyone
Here is tiptap pagination with example
https://romikmakavana.me/tiptap-pagination/

Screen.Recording.2025-05-22.at.1.04.20.PM.mov

Thank you

[zhuyihe]

Hello everyone Here is tiptap pagination with example https://romikmakavana.me/tiptap-pagination/

Thank you

Can a table be cut from the middle of a cell to prevent excessive cell content?

[frontBOI]

thanks for your work @RomikMakavana

[RomikMakavana]

@frontBOI welcome !!

[khaimkhani]

@RomikMakavana Thanks for this, looks great. Have you thought about potentially extending this to support 2 column text on a single page while retaining the inserted Table (page-wide or single column width) functionality? any limitations to that?

[RomikMakavana]

@khaimkhani
Surely it is possible, just one limitation, column's container should have max height of page.

[dan-cooke]

Hi @RomikMakavana this is cool thanks for submitting this - looks like you've went for the float: clear technique, which is a pure CSS pagination. This works great visually but in practice this is not the best solution, there are many edge cases that I just want to make others aware of before going down this route:

1. Breaks are not content aware - what does this mean? basically if you want to later export your document to PDF or Word, you are screwed - you will have to manually calculate page breaks based on content heights at this point, and there is very little chance of that lining up perfectly with what your users are seeing in the editor. Its also not trivial / possible - to insert things like page breaks, editable headers footers, editable page numbers. When I say editable, I mean directly editable like any other ProseMirror content. Of course you could get around this by having nested editors or something, but not trivial.
2. How do we handle content that spans more than a page? You've implemented a custom table component (as is required when doing this CSS technique) to semi handle this, but what about custom nodes or images etc? In MS word if you insert an image that is longer than the page height it dynamically updates juist that page's height to match this.
3. No ability to handle dynamic page metadata, ie. different page color (this is possible, I have this working on my project with a similar technique, but its not ideal), page height + width (this is much more difficult it requires setting your page float to a min and max width and restricting content based on that), different margins, etc etc. the list goes on - with this CSS approach you have to assume all pages are going to have the exact same (or very similar) properties.

Just thought I'd leave my two cents here as I've spent well over 500 hours on ProseMirror + TipTap pagination at this point, and I can confidently say it is one of, if not the most, difficult programming tasks i've ever worked on.

The ultimate solution for pagination needs to be based in the PM schema and take into account nodes themselves, ie. a page needs to be a node with attributes. There are a few community solutions that go down this route but they are extremely unperformant for large documents, and I have yet to see one that is feature complete (handling all the "standard" schema nodes)

[RomikMakavana]

Hello @dan-cooke ,

First of all thank you very much to mention all this.
I'm already aware about all these hurdles,

I am working on these too,
All these are possible to done, but at some point,
First of all we have to accept, we are doing pagination with html, at some point, there is also limitation.

Google doc was also build with html and dom, but after sometime, they move to canvas based
https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html

Surly, I am working on these points, and will share solution.
But there are many more points to work on first, like custom page break, etc...

Thank you

[dan-cooke]

Not that I can share unfortunately, our solution is probably closest to the one posted here by Romik His is actually much simpler (in a good way) think we over engineered a little to support coloured pages and horizontal pages I’m going to try with a node based approach one last time next month, if that fails I am thinking about starting a new open source project for these page based word processors based on canvas (like MS word or Google docs)

…

On Thu, 19 Jun 2025 at 15:55, Clemente ***@***.***> wrote: BTW @dan-cooke <https://github.com/dan-cooke> , do you have any demo of your solution? — Reply to this email directly, view it on GitHub <#5719 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFOCQ53QC4K4ZVDQ7UJO4G33ELFOJAVCNFSM6AAAAABPW2X3TKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGNJSGEZTCOI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[clemente-xyz]

Ok cool. We will come back to this also in some weeks. Please let me know if you move to a another open source project! I would love to collaborate

[JoPadOfficiel]

Hello,
Could someone please help me by providing a complete and functional solution that includes a text editor and pagination, similar to this project: https://pagination-demo-ashy.vercel.app/?
I'm working on a project where I need this functionality. I’ve tried implementing pagination myself, but I haven’t been successful.
I’d like to know if anyone has the source code for that project, or a similar solution that also includes PDF export functionality. That’s exactly what I’m looking for.
Thank you in advance for your help!

[bdbch]

@Cassielxd this has nothing to do with Tiptap or Editors.

[RomikMakavana]

@JoPadOfficiel
https://romikmakavana.me/tiptap-pagination/
https://github.com/RomikMakavana/tiptap-pagination/