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

[nperez0111]

Hi @hugs7, this looks promising!
I do wonder what sort of issues this extension has at the moment?

I've seen others take this same approach with page-based nodes and I'm uncertain that I really can see this working for all scenarios. Especially in a collaborative environment which is a major focus for Tiptap.

[hugs7]

Thankyou. I suppose it's less about the issues and more about what features I'd need to develop before it could be perhaps considered ready. Namely header/footer support, page orientation, background colour, images behind text, layout of pages in the editor (e.g. ability to have pages side by side like in Word), stuff like that. I have implemented paper size support though so you can choose A4, A3, letter, etc!

One of the other things I'd like to do is implement sections so you can have e.g. a section of pages which are portrait A4, followed by another section with landscape A3. Following this, footers and headers be different across sections.

The last remaining issue with selection is #8 which I'll fix when I can.

Regarding the collaboration extension, I would need to test this but I like to believe there is always a way! I'm using this for a personal project so happy to keep working on it and update here as I develop more.