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

[jamAL108]

Hey can you please share where to integrate this pagination Extension as a i tried doing so in extension array but that's not working

[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.

[clemente-xyz]

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

hope the team consider it!!!