Example

Basic Setup

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { PaginationPlus, PAGE_SIZES } from 'tiptap-pagination-plus';
import { PaginationTable } from 'tiptap-table-plus';

const {
    TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus
} = PaginationTable;

const editor = new Editor({
  extensions: [
    StarterKit,
    TablePlus,
    TableRowPlus,
    TableCellPlus,
    TableHeaderPlus,
    PaginationPlus.configure({
        pageHeight: 842,
        pageWidth: 789,
        pageGap: 20,
        pageGapBorderSize: 1,
        pageGapBorderColor: "#e5e5e5",
        pageBreakBackground: "#F7F7F8",
        pageHeaderHeight: 25,
        pageFooterHeight: 25,
        footerRight: "Made with ❤️ by Romik",
        footerLeft: "Page {page}",
        headerLeft: "Header Left",
        headerRight: "Header Right",
        marginTop: 30,
        marginBottom: 50,
        marginLeft: 70,
        marginRight: 70,
        contentMarginTop: 30,
        contentMarginBottom: 30,
      }),
  ],
})

Using Commands

// Example: Using predefined page sizes
editor.chain().focus().updatePageSize(PAGE_SIZES.A4).run()

// Example: Dynamic updates
editor.chain().focus()
  .updatePageHeight(1000)
  .updatePageWidth(600)
  .updateMargins({ top: 30, bottom: 30, left: 60, right: 60 })
  .updateHeaderContent('Document Title', 'Page {page}')
  .updateFooterContent('Confidential', 'Page {page} of {total}')
  .run()

// Update page background color
editor.chain().focus().updatePageBreakBackground('#f0f0f0').run()

---

Links:

• NPM
• GitHub