https://github.com/hugs7/tiptap-extension-pagination
An extension for the Tiptap editor allowing for pagination
https://github.com/hugs7/tiptap-extension-pagination
community editor rich-text tiptap tiptap-editor tiptap-extension tiptap-plugin tiptap-v2
Last synced: about 2 months ago
JSON representation
An extension for the Tiptap editor allowing for pagination
- Host: GitHub
- URL: https://github.com/hugs7/tiptap-extension-pagination
- Owner: hugs7
- License: mit
- Created: 2024-12-24T07:28:11.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-03-01T00:41:56.000Z (about 2 months ago)
- Last Synced: 2025-03-01T00:44:50.182Z (about 2 months ago)
- Topics: community, editor, rich-text, tiptap, tiptap-editor, tiptap-extension, tiptap-plugin, tiptap-v2
- Language: TypeScript
- Homepage:
- Size: 463 KB
- Stars: 12
- Watchers: 4
- Forks: 5
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-tiptap - tiptap-extension-pagination
README
# Tiptap Pagination Extension
A tiptap extension that allows for pages inside your document
---
## Installation
```bash
npm install tiptap-extension-pagination
```
## Usage
```tsx
/**
* @file /src/Tiptap/Editor.tsx
* @name Editor
* @description Example Tiptap editor with pagination plugin.
*/
import React from "react";
import { Stack } from "@mui/material";
import { EditorContent, useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import PaginationExtension, { PageNode, HeaderFooterNode, BodyNode } from "tiptap-extension-pagination";
type DispatchOrFunction = Dispatch | ((value: T) => void);
type EditorProps = {
content: string;
setContent: DispatchOrFunction;
editable?: boolean;
};
const Editor: React.FC = ({ content, setContent, editable = true }) => {
const extensions = [
StarterKit,
PaginationExtension.configure({ ... }), // See configuration options below.
PageNode,
HeaderFooterNode,
BodyNode];
const editor = useEditor({
extensions,
content,
onUpdate({ editor }) {
const editorContent = editor.getHTML();
handleChange(editorContent);
},
editable,
onSelectionUpdate({ editor }) {
const { state } = editor;
const { selection } = state;
const { $from, $to } = selection;
console.log("Selection updated:", $from.pos, $to.pos);
},
});
// ====== Event Handlers ======
/**
* Handles change in text.
*
* @param value - new text value
* @returns {void}
*/
const handleChange = (value: string): void => {
setContent(value);
};
// ====== Render ======
return (
);
};
export default Editor;
```
# Configuration
This extension comes with a number of configuration options to tailor the editor to your usage. If specified, these configuration options should be placed with the `.configuration()` method when specifying the `PaginationExtension` in your extension array. See below example.
### `defaultPaperSize: PaperSize`
- **Type**: `PaperSize`
- **Description**: The default paper size for the document. This is only the default setting for new documents, and can be customized in the editor.
- **Default**: `"A4"`
- **Example**: `"A3"`
### `defaultPaperColour: string`
- **Type**: `string`
- **Description**: The default paper color for the document. This is only the default setting for new documents, and can be customized in the editor. Should be specified as hex code.
- **Default**: `"#fff"`
- **Example**: `"#f0f0f0"`
### `useDeviceThemeForPaperColour: boolean`
- **Type**: `boolean`
- **Description**: Whether to use the device theme to set the paper color. If enabled, the default paper color option will be ignored.
- **Default**: `false`
- **Example**: `true | false`
### `defaultPaperOrientation: PaperOrientation`
- **Type**: `PaperOrientation`
- **Description**: The default paper orientation for the document. This is only the default setting for new documents, and can be customized in the editor.
- **Default**: `"portrait"`
- **Example**: `"portrait" | "landscape"`
### `defaultMarginConfig: MarginConfig`
- **Type**: `MarginConfig`
- **Description**: The default margin configuration for the document. This is only the default setting for new documents, and can be customized in the editor. Margins are specified in millimetres (mm)
- **Default**: `{ top: 25.4, right: 25.4, bottom: 25.4, left: 25.4 }`
- **Example**: `{ top: 10, right: 10, bottom: 10, left: 10 }`
### `defaultPageBorders: BorderConfig`
- **Type**: `BorderConfig`
- **Description**: The default border configuration for the document. This controls the thickness of the borders on the page (in pixels). This is only the default setting for new documents, and can be customized in the editor.
- **Default**: `{ top: 1, right: 1, bottom: 1, left: 1 }`
- **Example**: `{ top: 2, right: 2, bottom: 2, left: 2 }`
### `pageAmendmentOptions: PageAmendmentOptions`
- **Type**: `PageAmendmentOptions`
- **Description**: Options for page amendments such as header and footer configurations.
- **Example**: `{ enableHeader: true, enableFooter: false }`
## Example Configuration
You can specify as little or as much of the configuration as you like. For example:
```ts
import PaginationExtension from "tiptap-extension-pagination";
// Then in your extension array (within your component)
PaginationExtension.configure({
defaultPaperSize: "A3",
pageAmendmentOptions: {
enableHeader: false,
enableFooter: false,
},
}),
```
# References
Improved from [clemente-xyz](https://github.com/clemente-xyz)'s comment [here](https://github.com/ueberdosis/tiptap/discussions/5719#discussioncomment-11352489) in TipTap discussion [#5719](https://github.com/ueberdosis/tiptap/discussions/5719).