A Tiptap extension for pagination
npm install tiptap-pagination-breakstiptap-pagination-breaks is a Tiptap extension that enables automatic pagination and page breaks within your Tiptap editor. Perfect for applications that require document-like editing features with defined page heights and visual page breaks.
bash
npm install tiptap-pagination-breaks
`
or
`
yarn add tiptap-pagination-breaks
`
Usage
To use this extension, include it in your Tiptap editor setup:
`bash
import { Pagination } from 'tiptap-pagination-breaks';
import { Editor } from '@tiptap/core';
const editor = new Editor({
extensions: [
Pagination.configure({
pageHeight: 1056, // default height of the page
pageWidth: 816, // default width of the page
pageMargin: 96, // default margin of the page
}),
// other extensions
],
});
`
$3
You can dynamically update pagination options through the provided command:
`bash
editor.commands.setPaginationOptions({
pageHeight: 900,
pageMargin: 80
});
`
$3
Ensure you have a global style to define how the page break will look visually:
`bash
.page-break {
height: 20px;
width: 100%;
border-top: 1px dashed #ccc;
margin: 10px 0;
}
``