Tiptap Pagination Plus

https://tiptapplus.com/pagination-plus/
Admin
Tiptap Pagination Plus is an extension for the Tiptap rich text editor that provides automatic page...
Tokens:19,526
Snippets:229
Trust Score:4.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Configure Navigation Example

Source: https://tiptapplus.com/pagination-plus/header-footer/interactive

Demonstrates using callbacks to trigger document scrolling or navigation logic.

```javascript
PaginationPlus.configure({
  headerLeft: "Click to go to top",
  headerRight: "Page {page}",


  onHeaderClick: ({ event, pageNumber }) => {
    // Scroll to top of document
    window.scrollTo({ top: 0, behavior: 'smooth' })
  },


  onFooterClick: ({ event, pageNumber }) => {
    // Navigate to table of contents
    console.log(`Navigate to TOC from page ${pageNumber}`)
  }
})
```

--------------------------------

### Install Tiptap Pagination Plus for Tiptap v3

Source: https://tiptapplus.com/pagination-plus/install

Use these commands to install the pagination package for Tiptap v3 environments.

```bash
# Install latest version (supports Tiptap v3)
npm install tiptap-pagination-plus@latest


# Or explicitly install the tiptap-v3 tag
npm install tiptap-pagination-plus@tiptap-v3
```

--------------------------------

### Install Tiptap Table Plus for Tiptap v2

Source: https://tiptapplus.com/pagination-plus/install

Use this command to install the table pagination package for Tiptap v2.

```bash
# Install the tiptap-v2 tag
npm install tiptap-table-plus@tiptap-v2
```

--------------------------------

### Install Tiptap Table Plus for Tiptap v3

Source: https://tiptapplus.com/pagination-plus/install

Use these commands to install the table pagination package for Tiptap v3.

```bash
# Install latest version (supports Tiptap v3)
npm install tiptap-table-plus@latest


# Or explicitly install the tiptap-v3 tag
npm install tiptap-table-plus@tiptap-v3
```

--------------------------------

### Install Tiptap Pagination Plus for Tiptap v2

Source: https://tiptapplus.com/pagination-plus/install

Use this command to install the pagination package for Tiptap v2 environments.

```bash
# Install the tiptap-v2 tag
npm install tiptap-pagination-plus@tiptap-v2
```

--------------------------------

### Implement Page Size Selection UI

Source: https://tiptapplus.com/pagination-plus/page-size

Example of mapping page size options to a selection handler.

```javascript
// Example: Page size selector
const pageSizeOptions = [
  { label: 'A4', value: PAGE_SIZES.A4 },
  { label: 'A3', value: PAGE_SIZES.A3 },
  { label: 'A5', value: PAGE_SIZES.A5 },
  { label: 'Letter', value: PAGE_SIZES.LETTER },
  { label: 'Legal', value: PAGE_SIZES.LEGAL },
  { label: 'Tabloid', value: PAGE_SIZES.TABLOID },
]


function onPageSizeChange(selectedSize: any) {
  editor.chain().focus().updatePageSize(selectedSize).run()
}
```

--------------------------------

### Configure Tiptap V3 Editor

Source: https://tiptapplus.com/pagination-plus/table-resize

Setup for Tiptap V3 using TableKitPlus and PaginationPlus extensions.

```typescript

import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
import { TableKitPlus } from 'tiptap-table-plus';
import { PaginationPlus } from 'tiptap-pagination-plus';
import { editorContent } from "./editorContent";


const editor = useEditor({
  extensions: [
      StarterKit,
      TableKitPlus.configure({
        resizeHandleStyle: {
          background: "gray",
        },
      }),
      PaginationPlus
  ],
  content: editorContent,
});

```

--------------------------------

### Configure Tiptap V2 Editor

Source: https://tiptapplus.com/pagination-plus/table-resize

Setup for Tiptap V2 using TablePlus and PaginationPlus extensions.

```typescript

import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import {
TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus
} from "tiptap-pagination-plus";
import { PaginationPlus } from 'tiptap-pagination-plus';
import { editorContent } from "./editorContent";


const editor = useEditor({
  extensions: [
      StarterKit,
      TablePlus.configure({
        resizeHandleStyle: {
          background: "gray",
        },
      }),
      TableRowPlus,
      TableCellPlus,
      TableHeaderPlus,
      PaginationPlus
  ],
  content: editorContent,
});

```

--------------------------------

### Install Peer Dependencies for Tiptap v2

Source: https://tiptapplus.com/pagination-plus/install

Required Tiptap and ProseMirror dependencies for Tiptap v2 table support.

```bash
npm install @tiptap/extension-table @tiptap/extension-table-cell @tiptap/extension-table-header @tiptap/extension-table-row @tiptap/pm
```

--------------------------------

### Install Peer Dependencies for Tiptap v3

Source: https://tiptapplus.com/pagination-plus/install

Required Tiptap and ProseMirror dependencies for Tiptap v3 table support.

```bash
npm install @tiptap/extension-table @tiptap/pm
```

--------------------------------

### Group Related Commands

Source: https://tiptapplus.com/pagination-plus/commands

Demonstrates chaining multiple editor commands to perform complex document setup or print preparation in a single execution flow.

```typescript
// Group related commands
function setupDocument() {
  editor.chain().focus()
    .updatePageSize(PAGE_SIZES.A4)
    .updateMargins({ top: 30, bottom: 30, left: 60, right: 60 })
    .updateHeaderContent('Document Title', 'Page {page}')
    .updateFooterContent('Confidential', 'Page {page} of {total}')
    .run()
}


function prepareForPrint() {
  editor.chain().focus()
    .updatePageGap(0)
    .updatePageBreakBackground('#ffffff')
    .print()
    .run()
}
```

--------------------------------

### Continuous Editing and Printing Workflow

Source: https://tiptapplus.com/pagination-plus/enable-disable

Example of disabling pagination for continuous editing and re-enabling it before printing.

```javascript
editor.chain().focus().disablePagination().run()
// ... edit in continuous mode ...


editor.chain().focus().enablePagination().print().run()
```

--------------------------------

### Configure Simple Document Style Header and Footer

Source: https://tiptapplus.com/pagination-plus/header-footer/examples

A minimal configuration using plain text strings for headers and footers.

```javascript
PaginationPlus.configure({
  headerLeft: "Document Title",
  headerRight: "Page {page}",
  footerLeft: "Confidential",
  footerRight: "Page {page}",
})
```

--------------------------------

### Execute Pagination Commands

Source: https://tiptapplus.com/pagination-plus/example

Demonstrates how to update page sizes, dimensions, margins, and toggle pagination state using chainable commands.

```javascript
// 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()


// Toggle pagination on or off
editor.chain().focus().togglePagination().run()
```

--------------------------------

### Set up a professional document

Source: https://tiptapplus.com/pagination-plus/commands

Configure standard page dimensions, margins, and header/footer content for a professional report.

```javascript
// Set up a professional document
editor.chain().focus()
  .updatePageSize(PAGE_SIZES.A4)
  .updateMargins({ top: 30, bottom: 30, left: 60, right: 60 })
  .updateHeaderContent('Company Report', '2024')
  .updateFooterContent('Confidential', 'Page {page}')
  .updatePageBreakBackground('#ffffff')
  .run()
```

--------------------------------

### Initialize Editor and Trigger Print

Source: https://tiptapplus.com/pagination-plus/page-print

Configure the PaginationPlus extension within the Tiptap editor and use the browser's native print function to output content.

```javascript
// Get the editor instance
const editor = new Editor({
  extensions: [
    StarterKit,
    PaginationPlus.configure({
      // your pagination configuration
    }),
  ],
})


// Print the content
function printContent() {
  window.print()
}
```

--------------------------------

### Initialize PaginationPlus with Header and Footer

Source: https://tiptapplus.com/pagination-plus/header-footer

Configure basic header and footer text using the PaginationPlus extension during editor initialization.

```javascript
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { PaginationPlus } from 'tiptap-pagination-plus'


const editor = new Editor({
  extensions: [
    StarterKit,
    PaginationPlus.configure({
      // Header configuration
      headerLeft: "Document Title",
      headerRight: "Page {page}",


      // Footer configuration
      footerLeft: "Confidential",
      footerRight: "Page {page} of {total}",
    }),
  ],
})
```

--------------------------------

### Configure Table Extensions

Source: https://tiptapplus.com/pagination-plus/table-resize

Initialize the editor with table extensions for Tiptap V3 and V2 respectively.

```javascript
import { Editor } from '@tiptap/core';
import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
import { TableKitPlus } from 'tiptap-table-plus';


const editor = new Editor({
extensions: [
  TableKitPlus.configure({
    resizeHandleStyle: {
      background: "gray", // Customize resize handle appearance
      width: "4px",
      opacity: 0.7,
    },
  }),
],
});
```

```javascript
import { Editor } from '@tiptap/core';
import {
TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus
} from "tiptap-pagination-plus";


const editor = new Editor({
extensions: [
  TablePlus.configure({
    resizeHandleStyle: {
      background: "gray", // Customize resize handle appearance
      width: "4px",
      opacity: 0.7,
    },
  }),
  TableRowPlus,
  TableCellPlus,
  TableHeaderPlus,
],
});
```

--------------------------------

### Implement Print Functionality with PaginationPlus

Source: https://tiptapplus.com/pagination-plus/page-print

A complete HTML structure demonstrating CSS print media queries and the initialization of the PaginationPlus editor extension.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pagination Print Example</title>
  <style>
    @media print {
      .page-break {
        page-break-before: always;
      }
      .no-print {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div id="editor"></div>
  <button onclick="window.print()" class="no-print">
    Print Content
  </button>


  <script>
    const editor = new Editor({
      element: document.querySelector('#editor'),
      extensions: [
        StarterKit,
        PaginationPlus.configure({
          pageHeight: 800,
          pageGap: 50,
          // other configuration options
        }),
      ],
    })
  </script>
</body>
</html>
```

--------------------------------

### Configure Multiline Header and Footer

Source: https://tiptapplus.com/pagination-plus/header-footer/automatic-height

Shows how to define multiline content for both header and footer simultaneously.

```javascript
PaginationPlus.configure({
  headerLeft: `<h1>Title</h1>
<p>Subtitle</p>
<small>Additional Info</small>`,
  footerLeft: `<p>Contact Information<br>
Email: info@example.com<br>
Phone: (555) 123-4567</p>`,
})
```

--------------------------------

### Configure PaginationPlus Options

Source: https://tiptapplus.com/pagination-plus/header-footer/basic-usage

Set header and footer text content using the configuration object.

```javascript
PaginationPlus.configure({
  headerLeft: "My Document",
  headerRight: "Page {page}",
  footerLeft: "Confidential",
  footerRight: "Page {page}",
})
```

--------------------------------

### Configure Pagination for Tiptap V3

Source: https://tiptapplus.com/pagination-plus/example

Initializes the editor with TableKitPlus and PaginationPlus extensions for Tiptap V3.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
import { TableKitPlus } from 'tiptap-table-plus';
import { PaginationPlus, PAGE_SIZES } from 'tiptap-pagination-plus';


const editor = new Editor({
extensions: [
  StarterKit,
  TableKitPlus, // TipTap v3 only - includes 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,
  }),
],
})
```

--------------------------------

### Configure Pagination for Tiptap V2

Source: https://tiptapplus.com/pagination-plus/example

Initializes the editor with individual table extensions and PaginationPlus for Tiptap V2.

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import {
TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus
} from "tiptap-table-plus";
import { PaginationPlus, PAGE_SIZES } from 'tiptap-pagination-plus';


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,
  }),
],
})
```

--------------------------------

### Configuring Page Size in Editor

Source: https://tiptapplus.com/pagination-plus/page-size

Initialize the PaginationPlus extension with specific page dimensions and margins.

```javascript

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


const editor = new Editor({
  extensions: [
    StarterKit,
    PaginationPlus.configure({
      pageHeight: PAGE_SIZES.A4.height,
      pageWidth: PAGE_SIZES.A4.width,
      pageGap: 20,
      pageBreakBackground: "#ffffff",
      marginTop: 20,
      marginBottom: 20,
      marginLeft: 50,
      marginRight: 50,
    }),
  ],
})


```

--------------------------------

### PaginationPlus.configure()

Source: https://tiptapplus.com/pagination-plus/header-footer/basic-usage

Configures the header and footer content for the PaginationPlus extension during editor initialization.

```APIDOC
## PaginationPlus.configure()

### Description
Configures the layout and content of headers and footers within the editor. Supports static text, HTML strings, and dynamic variables like {page} and {total}.

### Parameters
- **headerLeft** (string) - Optional - Content displayed on the left side of the header.
- **headerRight** (string) - Optional - Content displayed on the right side of the header.
- **footerLeft** (string) - Optional - Content displayed on the left side of the footer.
- **footerRight** (string) - Optional - Content displayed on the right side of the footer.
- **customHeader** (function) - Optional - Define different headers for specific pages.
- **customFooter** (function) - Optional - Define different footers for specific pages.
- **onHeaderClick** (function) - Optional - Callback function triggered when the header is clicked.
- **onFooterClick** (function) - Optional - Callback function triggered when the footer is clicked.

### Example
```javascript
PaginationPlus.configure({
  headerLeft: "My Document",
  headerRight: "Page {page}",
  footerLeft: "Confidential",
  footerRight: "Page {page}",
})
```
```

--------------------------------

### Configuration Options

Source: https://tiptapplus.com/pagination-plus/page-size

Available configuration settings for customizing page dimensions.

```APIDOC
## Configuration Options

### pageHeight
- **Type**: number
- **Default**: 800
- **Description**: Height of each page in pixels.

### pageWidth
- **Type**: number
- **Default**: 789
- **Description**: Width of each page in pixels.
```

--------------------------------

### Configure Automatic Header Height

Source: https://tiptapplus.com/pagination-plus/header-footer/automatic-height

Demonstrates setting a multiline header using the configuration object.

```javascript
// The header will automatically adjust its height to fit this content
PaginationPlus.configure({
  headerLeft: `<h1>Long Document Title</h1>
<p>Subtitle Line 1</p>
<p>Subtitle Line 2</p>
<p>Additional Information</p>`,
})
```

--------------------------------

### Apply Text Formatting

Source: https://tiptapplus.com/pagination-plus/header-footer/rich-text

Use standard HTML tags like strong, em, u, and s for basic text styling.

```javascript
PaginationPlus.configure({
  headerLeft: `<p><strong>Bold Text</strong> and <em>Italic Text</em></p>`,
  footerLeft: `<p><u>Underlined</u> and <s>Strikethrough</s></p>`,
})
```

--------------------------------

### Configure Business Document Style Header and Footer

Source: https://tiptapplus.com/pagination-plus/header-footer/examples

Implements a professional business proposal layout with company contact information and styled page indicators.

```javascript
PaginationPlus.configure({
  headerLeft: `<div>
<h2 style="margin: 0; color: #1f2937;">Business Proposal</h2>
<p style="margin: 0; font-size: 11px; color: #6b7280;">Proposal #2024-001</p>
</div>`,
  headerRight: `<span style="color: #3b82f6; font-weight: 600;">Page {page}</span>`,


  footerLeft: `<p style="margin: 0;"><strong>Company Name</strong><br>
123 Business St, City, State 12345<br>
Phone: (555) 123-4567</p>`,
  footerRight: `<p style="margin: 0; text-align: right;">Page {page}<br>
<small>Valid until: 12/31/2024</small></p>`,
})
```

--------------------------------

### Prepare document for printing

Source: https://tiptapplus.com/pagination-plus/commands

Adjust page gaps, margins, and background settings specifically for print output.

```javascript
// Prepare for printing
editor.chain().focus()
  .updatePageSize(PAGE_SIZES.A4)
  .updatePageGap(0)
  .updatePageBreakBackground('#ffffff')
  .updateMargins({ top: 20, bottom: 20, left: 50, right: 50 })
  .print()
  .run()
```

--------------------------------

### Configure Initial Pagination State

Source: https://tiptapplus.com/pagination-plus/enable-disable

Set the default pagination state when registering the extension. The default value is true.

```javascript
PaginationPlus.configure({
  enabled: false, // start with pagination off
})
```

--------------------------------

### Configure Interactive Header and Footer

Source: https://tiptapplus.com/pagination-plus/header-footer/interactive

Use the configure method to define custom HTML for headers and attach event listeners for click interactions.

```javascript
PaginationPlus.configure({
  headerLeft: `<span style="cursor: pointer; text-decoration: underline; color: #2563eb;">Click me</span>`,
  headerRight: "Page {page}",


  onHeaderClick: ({ event, pageNumber }) => {
    console.log(`Clicked on page ${pageNumber}`)
  }
})
```

--------------------------------

### Resize Handle Style Options

Source: https://tiptapplus.com/pagination-plus/table-resize

Detailed properties available within the resizeHandleStyle configuration object.

```APIDOC
## Resize Handle Style Options

### Description
Properties used to customize the visual appearance of the table resize handles.

### Options
- **background** (string) - Default: "#007bff" - Background color of resize handles.
- **width** (string) - Default: "4px" - Width of resize handles.
- **opacity** (number) - Default: 0.8 - Opacity of resize handles.
- **borderRadius** (string) - Default: "2px" - Border radius of resize handles.
- **hoverOpacity** (number) - Default: 1.0 - Opacity when hovering over handles.
```

--------------------------------

### Accessing Predefined Page Sizes

Source: https://tiptapplus.com/pagination-plus/page-size

Import and access standard page size constants provided by the library.

```javascript

import { PAGE_SIZES } from 'tiptap-pagination-plus'


// Standard page sizes
PAGE_SIZES.A4      // A4 size (794x1123px)
PAGE_SIZES.A3      // A3 size (1123x1591px)
PAGE_SIZES.A5      // A5 size (419x794px)
PAGE_SIZES.LETTER  // Letter size (818x1060px)
PAGE_SIZES.LEGAL   // Legal size (818x1404px)
PAGE_SIZES.TABLOID // Tabloid size (1060x1635px)


```

--------------------------------

### Table Configuration

Source: https://tiptapplus.com/pagination-plus/table-resize

Configures the table extension with custom resize handle styles for Tiptap V2 or V3.

```APIDOC
## Table Configuration

### Description
Configures the table extension to enable resizing and customize the appearance of resize handles.

### Configuration Options
- **resizeHandleStyle** (object) - Optional - Custom styling for resize handles.

### Usage Example (Tiptap V3)
```javascript
TableKitPlus.configure({
  resizeHandleStyle: {
    background: "gray",
    width: "4px",
    opacity: 0.7,
  },
});
```

### Usage Example (Tiptap V2)
```javascript
TablePlus.configure({
  resizeHandleStyle: {
    background: "gray",
    width: "4px",
    opacity: 0.7,
  },
});
```
```

--------------------------------

### enablePagination

Source: https://tiptapplus.com/pagination-plus/enable-disable

Turns the pagination feature on.

```APIDOC
## enablePagination

### Description
Turns pagination on.

### Usage
`editor.chain().focus().enablePagination().run()`
```

--------------------------------

### PaginationPlus.configure

Source: https://tiptapplus.com/pagination-plus/header-footer/interactive

Configures the pagination component with interactive header and footer elements. The callbacks receive an object containing the MouseEvent and the page number.

```APIDOC
## PaginationPlus.configure

### Description
Configures the PaginationPlus instance with custom header/footer text or HTML and defines callback functions for click interactions.

### Parameters
- **headerLeft** (string) - Optional - Content for the left header section.
- **headerRight** (string) - Optional - Content for the right header section.
- **footerLeft** (string) - Optional - Content for the left footer section.
- **footerRight** (string) - Optional - Content for the right footer section.
- **onHeaderClick** (function) - Optional - Callback triggered when the header is clicked. Receives an object with `event` (MouseEvent) and `pageNumber` (number).
- **onFooterClick** (function) - Optional - Callback triggered when the footer is clicked. Receives an object with `event` (MouseEvent) and `pageNumber` (number).

### Usage Example
```javascript
PaginationPlus.configure({
  headerLeft: "Click to go to top",
  onHeaderClick: ({ event, pageNumber }) => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
});
```
```

--------------------------------

### PaginationPlus Commands

Source: https://tiptapplus.com/pagination-plus/commands

A list of available commands for controlling pagination settings, dimensions, and styling.

```APIDOC
## Commands

### updatePageHeight
- **Parameters**: height (number)
- **Description**: Update page height.

### updatePageWidth
- **Parameters**: width (number)
- **Description**: Update page width.

### updatePageSize
- **Parameters**: size (PageSize)
- **Description**: Update page size using predefined sizes.

### updatePageGap
- **Parameters**: gap (number)
- **Description**: Update gap between pages.

### updatePageBreakBackground
- **Parameters**: color (string)
- **Description**: Update page break background color.

### updateMargins
- **Parameters**: margins (MarginObject)
- **Description**: Update page margins.

### updateContentMargins
- **Parameters**: margins (ContentMarginObject)
- **Description**: Update content margins.

### updateHeaderHeight
- **Parameters**: height (number)
- **Description**: Update header height.

### updateFooterHeight
- **Parameters**: height (number)
- **Description**: Update footer height.

### updateHeaderContent
- **Parameters**: left (string), right (string)
- **Description**: Update header HTML content (supports multiline and rich text).

### updateFooterContent
- **Parameters**: left (string), right (string)
- **Description**: Update footer HTML content (supports multiline and rich text).

### togglePagination
- **Description**: Toggle pagination on or off.

### enablePagination
- **Description**: Explicitly enable pagination.

### disablePagination
- **Description**: Explicitly disable pagination.
```

--------------------------------

### Configure Print-Optimized Page Sizes

Source: https://tiptapplus.com/pagination-plus/page-size

Sets standard A4 dimensions with zero gaps and specific margins for optimal print output.

```javascript
// Print-optimized configuration
PaginationPlus.configure({
  pageHeight: PAGE_SIZES.A4.height,
  pageWidth: PAGE_SIZES.A4.width,
  pageGap: 0, // No gap for print
  pageBreakBackground: "#ffffff",
  marginTop: 20,
  marginBottom: 20,
  marginLeft: 50,
  marginRight: 50,
})
```

--------------------------------

### Implement Custom Actions

Source: https://tiptapplus.com/pagination-plus/header-footer/interactive

Performs clipboard operations using the page number context.

```javascript
PaginationPlus.configure({
  headerLeft: "📋 Click to copy page",
  headerRight: "Page {page}",


  onHeaderClick: ({ event, pageNumber }) => {
    // Copy page number to clipboard
    navigator.clipboard.writeText(`Page ${pageNumber}`)
    console.log(`Page ${pageNumber} copied to clipboard`)
  }
})
```

--------------------------------

### Configure Page Number Variable

Source: https://tiptapplus.com/pagination-plus/header-footer/dynamic-variables

Use the {page} placeholder to dynamically display the current page number in headers and footers.

```javascript
PaginationPlus.configure({
  headerRight: "Page {page}",
  footerRight: "Page {page}",
})
```

--------------------------------

### Configure Report Style Header and Footer

Source: https://tiptapplus.com/pagination-plus/header-footer/examples

Applies a report-oriented layout with specific font sizes and colors for professional documentation.

```javascript
PaginationPlus.configure({
  headerLeft: `<h1 style="margin: 0; font-size: 20px;">Annual Report 2024</h1>
<p style="margin: 0; font-size: 11px; color: #6b7280;">Financial Year Summary</p>`,
  headerRight: `<span style="color: #3b82f6;">Page {page}</span>`,


  footerLeft: `<p style="margin: 0; font-size: 10px;"><strong>Confidential Report</strong><br>
For Internal Use Only</p>`,
  footerRight: `<p style="margin: 0; font-size: 10px;">Page {page}<br>
<small>Generated: ${new Date().toLocaleDateString()}</small></p>`,
})
```

--------------------------------

### Configure Multiline Header

Source: https://tiptapplus.com/pagination-plus/header-footer/multiline

Uses template literals to inject HTML elements into the headerLeft configuration.

```javascript
PaginationPlus.configure({
  headerLeft: `<h1>Tiptap Pagination Plus</h1>
<p>by Romik Makavana</p>`,
  headerRight: "Page {page}",
})
```

--------------------------------

### Configure Invoice Style Header and Footer

Source: https://tiptapplus.com/pagination-plus/header-footer/examples

Applies a professional invoice layout using HTML templates for header and footer sections.

```javascript
PaginationPlus.configure({
  headerLeft: `<h2 style="margin: 0;">INVOICE</h2>
<p style="margin: 0; font-size: 12px;">Invoice #INV-2024-001<br>
Date: ${new Date().toLocaleDateString()}</p>`,
  headerRight: `<span style="font-weight: 600;">Page {page}</span>`,


  footerLeft: `<p style="margin: 0;"><strong>Payment Terms:</strong><br>
Net 30 days</p>`,
  footerRight: `<p style="margin: 0;">Page {page}<br>
<small>Thank you for your business!</small></p>`,
})
```

--------------------------------

### Chain multiple editor commands

Source: https://tiptapplus.com/pagination-plus/commands

Execute a sequence of layout and content updates on the editor instance using the chain API.

```javascript
// Chain multiple commands
editor.chain().focus()
  .updatePageSize(PAGE_SIZES.A4)
  .updateMargins({ top: 30, bottom: 30, left: 60, right: 60 })
  .updateHeaderContent('Document Title', 'Page {page}')
  .updateFooterContent('Confidential', 'Page {page} of {total}')
  .updatePageBreakBackground('#f0f0f0')
  .run()
```

```javascript
// Chain with multiline and rich text
editor.chain().focus()
  .updatePageSize(PAGE_SIZES.A4)
  .updateMargins({ top: 30, bottom: 30, left: 60, right: 60 })
  .updateHeaderContent(
    '<h1>Company Report</h1><p>Q4 2024</p>',
    '<span style="color: blue;">Page {page}</span>'
  )
  .updateFooterContent(
    '<p><strong>Confidential</strong><br><small>Internal Use Only</small></p>',
    'Page {page} of {total}'
  )
  .run()
```

--------------------------------

### Configure interactive header and footer callbacks

Source: https://tiptapplus.com/pagination-plus/header-footer/interactive

Use the onHeaderClick and onFooterClick properties within the PaginationPlus configuration to trigger custom logic when users interact with these elements.

```javascript
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { PaginationPlus } from 'tiptap-pagination-plus'


const editor = new Editor({
  extensions: [
    StarterKit,
    PaginationPlus.configure({
      headerLeft: "Document Title",
      headerRight: "Page {page}",
      footerLeft: "Confidential",
      footerRight: "Page {page}",


      // Handle header clicks
      onHeaderClick: ({ event, pageNumber }) => {
        console.log(`Header clicked on page ${pageNumber}`)
        // Your custom logic here
      },


      // Handle footer clicks
      onFooterClick: ({ event, pageNumber }) => {
        console.log(`Footer clicked on page ${pageNumber}`)
        // Your custom logic here
      }
    }),
  ],
})
```

--------------------------------

### Combine Per-Page and Interactive Configuration

Source: https://tiptapplus.com/pagination-plus/header-footer/examples

Implements conditional logic within click handlers and provides specific header overrides for individual pages.

```javascript
PaginationPlus.configure({
  headerLeft: "Document Title",
  headerRight: "Page {page}",
  footerLeft: "Default Footer",
  footerRight: "Page {page}",


  // Custom header for page 2
  customHeader: {
    2: {
      headerLeft: `<span style="cursor: pointer; color: #2563eb;">Chapter 2 - Click me</span>`,
      headerRight: "Page {page}"
    }
  },


  onHeaderClick: ({ event, pageNumber }) => {
    if (pageNumber === 2) {
      console.log('Chapter 2 header clicked!')
      // Navigate to chapter 2 content
    } else {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
})
```

--------------------------------

### Configure Multiline Footer

Source: https://tiptapplus.com/pagination-plus/header-footer/multiline

Demonstrates embedding contact information with line breaks in the footer.

```javascript
PaginationPlus.configure({
  footerLeft: `<p><strong>Contact Me :</strong><br>dev.romikmakavana@gmail.com</p>`,
  footerRight: "Made with ❤️ by Romik",
})
```

--------------------------------

### Configure Professional Document Header and Footer

Source: https://tiptapplus.com/pagination-plus/header-footer/examples

Use the configure method to define custom HTML templates for document headers and footers, including support for dynamic page numbering and date injection.

```javascript
PaginationPlus.configure({
  headerLeft: `<h1 style="margin: 0; font-size: 18px;">Company Report</h1>
<p style="margin: 0; font-size: 12px; color: #6b7280;">Q4 2024 Financial Analysis</p>`,
  headerRight: `<span style="font-weight: 600;">Page {page}</span>`,


  footerLeft: `<p style="margin: 0;"><strong>Confidential</strong><br>
<small>Internal Use Only</small></p>`,
  footerRight: `<p style="margin: 0;">Page {page} of {total}<br>
<small>Generated: ${new Date().toLocaleDateString()}</small></p>`,
})
```

--------------------------------

### Use Line Breaks in Header and Footer

Source: https://tiptapplus.com/pagination-plus/header-footer/multiline

Utilizes <br> tags to force line breaks within a single configuration string.

```javascript
PaginationPlus.configure({
  headerLeft: `<p>Company Name<br>Department<br>Location</p>`,
  footerLeft: `<p>Contact Information<br>Email: info@example.com<br>Phone: (555) 123-4567</p>`,
})
```

--------------------------------

### Updating Page Size Dynamically

Source: https://tiptapplus.com/pagination-plus/page-size

Use the updatePageSize command to switch between predefined page formats at runtime.

```javascript

// Set page size to A4
editor.chain().focus().updatePageSize(PAGE_SIZES.A4).run()


// Set page size to Letter
editor.chain().focus().updatePageSize(PAGE_SIZES.LETTER).run()


// Set page size to A3
editor.chain().focus().updatePageSize(PAGE_SIZES.A3).run()


```

--------------------------------

### Common Header and Footer Patterns

Source: https://tiptapplus.com/pagination-plus/header-footer/dynamic-variables

Standard configurations for displaying page numbers with or without additional text.

```javascript
headerRight: "Page {page}",
footerRight: "Page {page}",
```

```javascript
headerRight: "Page {page}",
footerRight: "Page {page} of Document",
```

--------------------------------

### Configure Interactive Header and Footer

Source: https://tiptapplus.com/pagination-plus/header-footer/examples

Defines click handlers for header and footer elements using HTML strings for content.

```javascript
PaginationPlus.configure({
  headerLeft: `<span style="cursor: pointer; text-decoration: underline; color: #2563eb;">Click to go to top</span>`,
  headerRight: "Page {page}",
  footerLeft: "Confidential",
  footerRight: `<span style="cursor: pointer;">Page {page} - Click for info</span>`,


  onHeaderClick: ({ event, pageNumber }) => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  },


  onFooterClick: ({ event, pageNumber }) => {
    alert(`You are on page ${pageNumber}`)
  }
})
```

--------------------------------

### Apply Custom Page Size and Margins

Source: https://tiptapplus.com/pagination-plus/page-size

Defines a custom page size object and applies it to the editor using chainable commands.

```javascript
// Custom page size with all options
const customPageSize = {
  height: 1000,
  width: 600,
  margins: {
    top: 30,
    bottom: 30,
    left: 60,
    right: 60
  }
}


editor.chain().focus()
  .updatePageHeight(customPageSize.height)
  .updatePageWidth(customPageSize.width)
  .updateMargins(customPageSize.margins)
  .run()
```

--------------------------------

### Configure Per-Page Headers and Footers

Source: https://tiptapplus.com/pagination-plus/header-footer/per-page-customization

Use the customHeader and customFooter objects to map specific page numbers to custom layout configurations.

```javascript
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { PaginationPlus } from 'tiptap-pagination-plus'


const editor = new Editor({
  extensions: [
    StarterKit,
    PaginationPlus.configure({
      // Default header/footer for all pages
      headerLeft: "Default Header",
      headerRight: "Page {page}",
      footerLeft: "Default Footer",
      footerRight: "Page {page}",


      // Custom header for page 2
      customHeader: {
        2: {
          headerLeft: "Chapter 2",
          headerRight: "Page {page}"
        }
      },


      // Custom footer for page 3
      customFooter: {
        3: {
          footerLeft: "Special Footer",
          footerRight: "Page {page}"
        }
      }
    }),
  ],
})
```

--------------------------------

### Apply HTML Formatting to Variables

Source: https://tiptapplus.com/pagination-plus/header-footer/dynamic-variables

Wrap variables in HTML tags to apply custom styling to the output.

```javascript
PaginationPlus.configure({
  footerRight: `<span style="font-weight: bold;">Page {page}</span>`,
})
```

--------------------------------

### Define Pagination Interfaces

Source: https://tiptapplus.com/pagination-plus/commands

Interfaces for configuring page margins and dimensions. These are required for setting up pagination constraints.

```typescript
interface MarginObject {
  top: number
  bottom: number
  left: number
  right: number
}


interface ContentMarginObject {
  top: number
  bottom: number
}


interface PageSize {
  width: number
  height: number
}
```

--------------------------------

### Pagination Command Methods

Source: https://tiptapplus.com/pagination-plus/enable-disable

Commands to toggle, enable, or disable pagination within the editor chain.

```javascript
editor.chain().focus().togglePagination().run()
```

```javascript
editor.chain().focus().enablePagination().run()
```

```javascript
editor.chain().focus().disablePagination().run()
```

--------------------------------

### Define Page Size Interfaces

Source: https://tiptapplus.com/pagination-plus/page-size

Interfaces for defining custom page dimensions and standard page size constants.

```typescript
interface PageSize {
  width: number
  height: number
}


interface PAGE_SIZES {
  A4: PageSize
  A3: PageSize
  A5: PageSize
  LETTER: PageSize
  LEGAL: PageSize
  TABLOID: PageSize
}
```

--------------------------------

### Create custom page format

Source: https://tiptapplus.com/pagination-plus/commands

Define specific page dimensions and content margins for non-standard document layouts.

```javascript
// Create custom page format
editor.chain().focus()
  .updatePageHeight(1000)
  .updatePageWidth(600)
  .updateMargins({ top: 25, bottom: 25, left: 40, right: 40 })
  .updateContentMargins({ top: 10, bottom: 10 })
  .updateHeaderHeight(35)
  .updateFooterHeight(35)
  .run()
```

--------------------------------

### Update page size dynamically

Source: https://tiptapplus.com/pagination-plus/commands

Implement a helper function to switch between predefined page sizes based on user input.

```typescript
// Function to update page size based on user selection
function updatePageSize(size: string) {
  const pageSizes = {
    'A4': PAGE_SIZES.A4,
    'A3': PAGE_SIZES.A3,
    'A5': PAGE_SIZES.A5,
    'LETTER': PAGE_SIZES.LETTER,
    'LEGAL': PAGE_SIZES.LEGAL,
    'TABLOID': PAGE_SIZES.TABLOID,
  }


  editor.chain().focus().updatePageSize(pageSizes[size]).run()
}


// Usage
updatePageSize('A4')
updatePageSize('LETTER')
```

--------------------------------

### Configure Chapter Page Headers

Source: https://tiptapplus.com/pagination-plus/header-footer/per-page-customization

Define unique headers for multiple specific pages by adding entries to the customHeader object.

```javascript
PaginationPlus.configure({
  headerLeft: "Main Document",
  headerRight: "Page {page}",


  customHeader: {
    5: {
      headerLeft: "Chapter 1: Introduction",
      headerRight: "Page {page}"
    },
    15: {
      headerLeft: "Chapter 2: Main Content",
      headerRight: "Page {page}"
    },
    25: {
      headerLeft: "Chapter 3: Conclusion",
      headerRight: "Page {page}"
    }
  }
})
```

--------------------------------

### Configure Per-Page Custom Headers

Source: https://tiptapplus.com/pagination-plus/header-footer/examples

Defines default headers and footers while overriding specific pages using the customHeader configuration object.

```javascript
PaginationPlus.configure({
  // Default header/footer
  headerLeft: "Main Document",
  headerRight: "Page {page}",
  footerLeft: "Confidential",
  footerRight: "Page {page}",


  // Custom header for cover page
  customHeader: {
    1: {
      headerLeft: "",
      headerRight: ""
    }
  },


  // Custom header for chapter pages
  customHeader: {
    5: {
      headerLeft: "Chapter 1: Introduction",
      headerRight: "Page {page}"
    },
    15: {
      headerLeft: "Chapter 2: Main Content",
      headerRight: "Page {page}"
    }
  }
})
```

--------------------------------

### Define Callback Parameters

Source: https://tiptapplus.com/pagination-plus/header-footer/interactive

Structure of the callback object received by onHeaderClick and onFooterClick.

```javascript
onHeaderClick: ({ event, pageNumber }) => {
  // event: MouseEvent - The original click event
  // pageNumber: number - The page number (1, 2, 3, etc.)
}
```

--------------------------------

### Validate Command Parameters

Source: https://tiptapplus.com/pagination-plus/commands

Ensures input values for page height and margins meet required constraints before executing editor commands.

```typescript
// Validate command parameters
function safeUpdatePageHeight(height: number) {
  if (height < 200 || height > 3000) {
    console.error('Page height must be between 200 and 3000 pixels')
    return
  }


  editor.chain().focus().updatePageHeight(height).run()
}


function safeUpdateMargins(margins: any) {
  if (!margins || typeof margins !== 'object') {
    console.error('Margins must be an object')
    return
  }


  const { top, bottom, left, right } = margins
  if (typeof top !== 'number' || typeof bottom !== 'number' ||
      typeof left !== 'number' || typeof right !== 'number') {
    console.error('All margin values must be numbers')
    return
  }


  editor.chain().focus().updateMargins(margins).run()
}
```

--------------------------------

### Use HTML Block Elements

Source: https://tiptapplus.com/pagination-plus/header-footer/multiline

Uses block-level tags like <h1>, <p>, and <small> to structure multiline content.

```javascript
PaginationPlus.configure({
  headerLeft: `<h1>Document Title</h1>
<p>Subtitle or Description</p>
<small>Additional Information</small>`,
})
```

--------------------------------

### Configure Academic Paper Style Header and Footer

Source: https://tiptapplus.com/pagination-plus/header-footer/examples

Uses HTML templates for a research paper layout with author details and page numbering.

```javascript
PaginationPlus.configure({
  headerLeft: `<p style="margin: 0;"><strong>Research Paper Title</strong><br>
<em>Author Name</em></p>`,
  headerRight: "Page {page}",


  footerLeft: `<p style="margin: 0; font-size: 10px;">© 2024 All Rights Reserved</p>`,
  footerRight: `<p style="margin: 0; font-size: 10px;">Page {page}</p>`,
})
```

--------------------------------

### Configure Company Letterhead Style Header and Footer

Source: https://tiptapplus.com/pagination-plus/header-footer/examples

Provides a branded letterhead layout with company name, address, and copyright information.

```javascript
PaginationPlus.configure({
  headerLeft: `<h1 style="margin: 0; color: #2563eb;">Company Name</h1>
<p style="margin: 0; font-size: 12px;">123 Business Street<br>
City, State 12345</p>`,
  headerRight: `<span style="color: #6b7280;">Page {page}</span>`,


  footerLeft: `<p style="margin: 0; font-size: 10px;">© 2024 Company Name. All rights reserved.</p>`,
  footerRight: `<p style="margin: 0; font-size: 10px;">Page {page}</p>`,
})
```

--------------------------------

### PageSize Interface

Source: https://tiptapplus.com/pagination-plus/page-size

Defines the structure for page dimensions used within the pagination system.

```APIDOC
## Interface: PageSize

### Description
Represents the dimensions of a page.

### Properties
- **width** (number) - The width of the page.
- **height** (number) - The height of the page.
```

--------------------------------

### Set Font Sizes

Source: https://tiptapplus.com/pagination-plus/header-footer/rich-text

Use font-size in inline styles to establish visual hierarchy.

```css
headerLeft: `<h1 style="font-size: 18px;">Main Title</h1>
<p style="font-size: 12px;">Subtitle</p>`,
```

--------------------------------

### Execute Different Actions Per Page

Source: https://tiptapplus.com/pagination-plus/header-footer/interactive

Uses a switch statement to execute unique logic based on the specific page number.

```javascript
PaginationPlus.configure({
  headerLeft: "Interactive Header",
  headerRight: "Page {page}",


  onHeaderClick: ({ event, pageNumber }) => {
    switch(pageNumber) {
      case 1:
        // Action for first page
        console.log('First page clicked')
        break
      case 2:
        // Action for second page
        console.log('Second page clicked')
        break
      default:
        // Default action
        console.log(`Page ${pageNumber} clicked`)
    }
  }
})
```

--------------------------------

### Customize Resize Handle Styles

Source: https://tiptapplus.com/pagination-plus/table-resize

Apply custom CSS properties to the resize handles using the resizeHandleStyle configuration object.

```javascript
TableKitPlus.configure({
resizeHandleStyle: {
  background: "#007bff", // Handle color
  width: "4px",          // Handle width
  opacity: 0.8,          // Handle opacity
  borderRadius: "2px",   // Handle border radius
  hoverOpacity: 1.0,     // Opacity on hover
},
})
```

```javascript
import {
TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus
} from "tiptap-pagination-plus";


TablePlus.configure({
resizeHandleStyle: {
  background: "#007bff", // Handle color
  width: "4px",          // Handle width
  opacity: 0.8,          // Handle opacity
  borderRadius: "2px",   // Handle border radius
  hoverOpacity: 1.0,     // Opacity on hover
},
})
```

--------------------------------

### Apply Document-Specific Page Sizes

Source: https://tiptapplus.com/pagination-plus/page-size

Maps document types to predefined page size constants and provides a function to update the editor state.

```typescript
// Document types and recommended page sizes
const documentTypes = {
  report: PAGE_SIZES.A4,
  presentation: PAGE_SIZES.A3,
  flyer: PAGE_SIZES.A5,
  contract: PAGE_SIZES.LEGAL,
  newsletter: PAGE_SIZES.TABLOID,
  letter: PAGE_SIZES.LETTER,
}


// Apply page size based on document type
function setDocumentType(type: keyof typeof documentTypes) {
  editor.chain().focus().updatePageSize(documentTypes[type]).run()
}
```

--------------------------------

### Update Page Size and Margins

Source: https://tiptapplus.com/pagination-plus/page-size

Adjust page dimensions and margins simultaneously using the editor chain.

```javascript
// Update page size and margins together
editor.chain().focus()
  .updatePageSize(PAGE_SIZES.A4)
  .updateMargins({
    top: 30,
    bottom: 30,
    left: 60,
    right: 60
  })
  .run()


// Custom dimensions with custom margins
editor.chain().focus()
  .updatePageHeight(1000)
  .updatePageWidth(600)
  .updateMargins({
    top: 20,
    bottom: 20,
    left: 40,
    right: 40
  })
  .run()
```
Tokens:
Raw