Question: How to update header and footer values?

[waqarilyas]

How do i update headers and footers from toolbar? I want to give the user option to select pre defined headers and footers from toolbar. How can i achieve this ?

[hugs7]

Hey @waqarilyas . Thanks for your question.

You can set margins like so. I usually put these in a hook (I called mine usePagination) which you can then use in your editor component.

import {
    MarginConfig,
    DEFAULT_PAGE_MARGIN_CONFIG,
} from "tiptap-extension-pagination";
import { useEditorContext } from "@/contexts/EditorContext";
// ^^ You can either use a context hook to get editor everywhere or pass it as a prop. Context is just cleaner
// If you use a context hook you can define your editor inside it. See bottom of my comment

export const usePagination = (): UsePaginationReturn => {

    const editor = useEditorContext();


    const [pageMargins, setPageMargins] = useState<MarginConfig>(DEFAULT_PAGE_MARGIN_CONFIG);


  /**
     * Handles setting the page margins of the editor
     * @param newMargins - the page margins to set the editor to
     * @returns {void}
     */
    const handleSetPageMargins = (newMargins: MarginConfig): void => {
        if (editor?.commands.setDocumentPageMargins(newMargins)) {
            setPageMargins(newMargins);
        }
    };


  return { handleSetPageMargins }

Then in your editor, you can do something like. I actually have a component called <MenuBar /> which has <RibbonContent /> in which I reference this but it can really go anywhere so long as you have access to the editor

export const RibbonContent = () => {
      //  ....
      const { handleSetPageMargins } = usePagination()
      // ^^^ Reference my hook above
      // ...
      // I am using MUI although my UI for setting page margins isn't great atm

     return (
            // ......
                         <LayoutMarginDialog
                                isOpen={dialog === "pageMargins"}
                                setOpen={(isOpen: boolean) => setDialog(isOpen ? "pageMargins" : "")}
                                pageMargins={pageMargins}
                                handleSave={handleSetPageMargins}
                            />
     );
};

Important: The idea is you need to keep track of the page margins in local state as well as telling the editor to update (with editor.commands.....). Since the editor will never change page margins by itself (only user will change), in this case you can do it in the event callback as above. However, for something like bold/italics, we know this will change as the user moves his/her cursor. So that needs to be handled in a use effect hook like so

export const useParagraph = () => {
    const [isItalic, setIsItalic] = useState<boolean>(false);
    // ^^ Keep track of local state

   /**
     * Handles toggling italic text
     * @param value - The new value of the italic text
     * @returns {void}
     */
    const handleToggleItalic = (value: boolean): void => {
        editor?.chain().focus().toggleItalic().run();
        setIsItalic(value as boolean);
    };

    // But you also need to have (I created a helper for this)

    useEditorIsActive("italic", setIsItalic);

   return { handleToggleItalic };
};

where

import { Dispatch, useEffect } from "react";
import { useEditorContext } from "@/contexts/EditorContext";

export const useEditorIsActive = (name: string, dispatch: Dispatch<boolean>) => {
    const editor = useEditorContext();

    useEffect(() => {
        if (!editor) return;

        dispatch(editor.isActive(name));
        //        ^^^^^^^^^^ this allows you to get certain properties from the editor state
        // and update your local state.
    }, [editor?.isActive(name)]);

};

Then for your UI you can do something like having a toggleable icon with italics icon where the value is simply isItalic and has an onChange handler handleToggleItalic. You might also want to set disabled state to disabled: !editor?.can().chain().focus().toggleItalic().run()

I define my menubar in an object rather than jsx but I had this

// ...
                               {
                                    type: "iconToggle",
                                    disabled: !editor?.can().chain().focus().toggleItalic().run(),
                                    label: "Italic",
                                    value: isItalic,
                                    onChange: (value: any) => handleToggleItalic(value as boolean),
                                    children: <BiItalic />,
                                },
// ...

The editor context if you want to use it

// EditorContext.tsx
import React, { createContext, useContext } from "react";
import { useEditor, Editor } from "@tiptap/react";
import { getEditorExtensions } from "@/utils"; // I have a need for a callback function to get extensions but you can just define them directly in the context here
import { EditorProps, Nullable } from "@/types";
// Some of these types are my own but hopefully self explanatory

const EditorContext = createContext<Nullable<Editor>>(null);

export const EditorProvider = ({ children, ...editorProps }: { children: React.ReactNode } & EditorProps) => {
    const { setContent, chartComponent, getExpressionValue, editable } = editorProps;
     // Don't worry too much about chart/expression here. ^^

    const editor = useEditor({
        extensions: getEditorExtensions(chartComponent, getExpressionValue),
        //     I need to inject some functions and components into my editor 
       //      but for most usecases you can simply define the array directly here

        onUpdate({ editor }) {
            const editorContent = editor.getJSON();
            handleChange(editorContent);
        },
        onSelectionUpdate({ editor }) {
            const selection = editor.state.selection;
            console.log(selection.from, "-", selection.to);
        },
        editable,
    });

    /**
     * Handles change in text.
     * @param {Object} editorContent - The JSON object representing the content.
     * @returns {void}
     */
    const handleChange = (editorContent: Object): void => {
        const json = JSON.stringify(editorContent);
        setContent(json);
    };

    return <EditorContext.Provider value={editor}>{children}</EditorContext.Provider>;
};

export const useEditorContext = () => {
    const context = useContext(EditorContext);
    if (!context) {
        throw new Error("useEditorContext must be used within an EditorProvider");
    }
    return context;
};

Does that help? I know it's fairly complex and tbh I don't fully understand everything about Tiptap - it's a big system to learn!

[hugs7]

You're right tho - I don't have an editor command for setting header/footer node heights or width. Will have to work on this.

The way it works though is both header and footer store two values:

• pageEndOffset
• height

Page end offset stores the distance in mm between the top of the page and the top of the header or the bottom of the footer and the bottom of the page. Height then stores the height of each respective node.