Tiptap Pagination Extension

A tiptap extension that allows for pages inside your document

---

Installation

npm install tiptap-extension-pagination

Usage

/**
 * @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 Pagination from "./Extensions/Pagination";

type EditorProps = {
    content: string;
    setContent: DispatchOrFunction<string>;
    editable?: boolean;
};

const Editor: React.FC<EditorProps> = ({ content, setContent, editable = true }) => {
    // ====== Prop Destructuring ======

    // ====== Constants ======

    const extensions = [StarterKit, Pagination, PageNode];

    // ====== State Variables ======

    // ====== Refs ======

    // ====== Memo Hooks ======

    // ====== Effect Hooks ======

    // ====== Hooks ======

    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);
        },
    });

    // ====== Functions ======

    // ====== Event Handlers ======

    /**
     * Handles change in text.
     * @param value - new text value
     * @returns {void}
     */
    const handleChange = (value: string): void => {
        setContent(value);
    };

    // ====== Render Helpers ======

    // ====== Render ======

    return (
        <Stack direction="column" flexGrow={1} paddingX={2} overflow="auto">
            <EditorContent editor={editor} />
        </Stack>
    );
};

export default Editor;

References

Improved from clemente-xyz's comment here in TipTap discussion #5719.