TipTap Pagination Plus

tiptap-pagination-plus extension that adds pagination support to your editor with table handling capabilities.

Demo

https://romikmakavana.me/tiptap-pagination/

Installation

1npm install tiptap-pagination-plus

Usage

Basic Setup

1import { Editor } from '@tiptap/core'
2import StarterKit from '@tiptap/starter-kit'
3import { 
4  PaginationPlus,
5  TablePlus,
6  TableRowPlus,
7  TableCellPlus,
8  TableHeaderPlus
9} from 'tiptap-pagination-plus'
10
11const editor = new Editor({
12  extensions: [
13    StarterKit,
14    TablePlus,
15    TableRowPlus,
16    TableCellPlus,
17    TableHeaderPlus,
18    PaginationPlus.configure({
19      pageHeight: 842,        // Height of each page in pixels
20      pageGap: 20,           // Gap between pages in pixels
21      pageBreakBackground: "#f7f7f7",  // Background color for page gaps
22      pageHeaderHeight: 50,   // Height of page header/footer in pixels
23      footerRight: "Made with ❤️ by Romik",
24      footerLeft: "Page {page}",
25      headerLeft: "Header Left",
26      headerRight: "Header Right",
27    }),
28  ],
29})

Table Pagination

Key points for table pagination:

• Tables will automatically split across pages when they exceed the page height
• To split table across pages, you have to use these extensions
• List : TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus

Configuration Options

Option	Type	Default	Description
pageHeight	number	842	Height of each page in pixels
pageGap	number	20	Gap between pages in pixels
pageBreakBackground	string	"#f7f7f7"	Background color for page gaps
pageHeaderHeight	number	50	Height of page header/footer in pixels
footerRight	string	""	Custom text to display in the footer right side
footerLeft	string	""	Custom text to display in the footer left side
headerRight	string	""	Custom text to display in the header right side
headerLeft	string	""	Custom text to display in the header left side

Features

• Automatic page breaks based on content height
• Page numbers in the footer
• Custom header/footer text support
• use {page} variable to display current page number in header/footer text
• Table pagination with header preservation
• Responsive design
• Automatic page height calculation
• Support for nested content

License

MIT