Community Extension: Pagination

[hugs7]

Description

Allows for pagination (pages) within the editor. Improved version from this comment by clemente-xyz

Installation

npm install tiptap-extension-pagination

NPM Package: tiptap-extension-pagination

Usage

See example below

/**
 * @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];

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

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

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

export default Editor;

Type

Other

Other

Extension, Plugin and Node all in one.

[hugs7]

I messed up the npm publish - have to wait 24 hours and will republish then

[hugs7]

Have republished