### Install Tiptap Pagination Extension

Source: https://github.com/hugs7/tiptap-extension-pagination/blob/main/README.md

This command installs the Tiptap Pagination Extension using npm, making it available for use in your project. It's the first step to integrate the extension into your Tiptap editor setup.

```bash
npm install tiptap-extension-pagination
```

--------------------------------

### Tiptap Pagination Extension Configuration Options

Source: https://github.com/hugs7/tiptap-extension-pagination/blob/main/README.md

This section details the available configuration options for the Tiptap Pagination Extension, which can be passed to the `.configure()` method. These options allow customization of default document properties such as paper size, color, orientation, margins, and page borders.

```APIDOC
PaginationExtension.configure() options:
  defaultPaperSize:
    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:
    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:
    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:
    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:
    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:
    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:
    Type: PageAmendmentOptions
    Description: Options for page amendments such as header and footer configurations.
    Example: { enableHeader: true, enableFooter: false }
```

--------------------------------

### Integrate Tiptap Pagination Extension into React Editor

Source: https://github.com/hugs7/tiptap-extension-pagination/blob/main/README.md

This TypeScript React component demonstrates how to set up a Tiptap editor with the Pagination Extension. It shows the necessary imports, extension configuration, and basic editor initialization with content handling and update listeners. The component allows for dynamic content updates and selection tracking.

```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<T> = Dispatch<T> | ((value: T) => void);

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

const Editor: React.FC<EditorProps> = ({ 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 (
        <Stack direction="column" flexGrow={1} paddingX={2} overflow="auto">
            <EditorContent editor={editor} />
        </Stack>
    );
};

export default Editor;
```

--------------------------------

### Configure Tiptap Pagination Extension

Source: https://github.com/hugs7/tiptap-extension-pagination/blob/main/README.md

This snippet demonstrates how to configure the `PaginationExtension` within your Tiptap extension array. It shows how to set a `defaultPaperSize` and control `pageAmendmentOptions` such as enabling or disabling headers and footers.

```ts
import PaginationExtension from "tiptap-extension-pagination";

// Then in your extension array (within your component)

PaginationExtension.configure({
    defaultPaperSize: "A3",
    pageAmendmentOptions: {
        enableHeader: false,
        enableFooter: false,
    },
}),
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.