Header & Footer

The PaginationPlus extension provides powerful header and footer customization with support for multiline content and rich text (HTML). You can create professional document headers and footers with formatted text, multiple lines, and dynamic page numbers.

Features

Multiline Support: Create headers and footers with multiple lines of text
Rich Text (HTML): Use HTML tags for formatting (bold, italic, colors, etc.)
Dynamic Variables: Use {page} to display current page number
Automatic Height Calculation: Header and footer heights adjust automatically based on content
Left & Right Positioning: Separate content for left and right sides of headers/footers

Basic Usage

Configuration

You can configure headers and footers during editor initialization:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { PaginationPlus } from 'tiptap-pagination-plus'

const editor = new Editor({
  extensions: [
    StarterKit,
    PaginationPlus.configure({
      // Header configuration
      headerLeft: "Document Title",
      headerRight: "Page {page}",

      // Footer configuration
      footerLeft: "Confidential",
      footerRight: "Page {page} of {total}",
    }),
  ],
})

Multiline Support

Headers and footers support multiple lines of text. You can use line breaks (<br>) or HTML block elements to create multiline content.

Example: Multiline Header

PaginationPlus.configure({
  headerLeft: `<h1>Tiptap Pagination Plus</h1>
<p>by Romik Makavana</p>`,
  headerRight: "Page {page}",
})

PaginationPlus.configure({
  footerLeft: `<p><strong>Contact Me :</strong><br>dev.romikmakavana@gmail.com</p>`,
  footerRight: "Made with ❤️ by Romik",
})

Rich Text (HTML) Support

You can use HTML tags to format your header and footer content with rich text styling.

Supported HTML Tags

Text Formatting: <strong>, <b>, <em>, <i>, <u>, <s>
Structure: <p>, <div>, <span>, <h1>-<h6>, <br>
Styling: Inline styles with style attribute
Colors: Use color names or hex codes in styles

Example: Rich Text Header

PaginationPlus.configure({
  headerLeft: `<h1 style="color: #2563eb;">Company Name</h1>
<p style="font-size: 12px; color: #6b7280;">Department</p>`,
  headerRight: `<span style="color: blue; font-weight: bold;">Page {page}</span>`,
})

Example: Rich Text Footer

PaginationPlus.configure({
  footerLeft: `<p><strong>Contact:</strong><br>
<em>dev.romikmakavana@gmail.com</em></p>`,
  footerRight: `<span style="color: #10b981;">Made with ❤️ by Romik</span>`,
})

Dynamic Variables

Page Number Variable

Use {page} to display the current page number:

PaginationPlus.configure({
  headerRight: "Page {page}",
  footerRight: "Page {page}",
})

Example with Rich Text

PaginationPlus.configure({
  footerRight: `<span style="font-weight: bold;">Page {page}</span>`,
})

Complete Examples

Professional Document Header/Footer

PaginationPlus.configure({
  headerLeft: `<h1 style="margin: 0; font-size: 18px;">Company Report</h1>
<p style="margin: 0; font-size: 12px; color: #6b7280;">Q4 2024 Financial Analysis</p>`,
  headerRight: `<span style="font-weight: 600;">Page {page}</span>`,

  footerLeft: `<p style="margin: 0;"><strong>Confidential</strong><br>
<small>Internal Use Only</small></p>`,
  footerRight: `<p style="margin: 0;">Page {page} of {total}<br>
<small>Generated: ${new Date().toLocaleDateString()}</small></p>`,
})

Academic Paper Style

PaginationPlus.configure({
  headerLeft: `<p style="margin: 0;"><strong>Research Paper Title</strong><br>
<em>Author Name</em></p>`,
  headerRight: "Page {page}",

  footerLeft: `<p style="margin: 0; font-size: 10px;">© 2024 All Rights Reserved</p>`,
  footerRight: `<p style="margin: 0; font-size: 10px;">Page {page}</p>`,
})

Business Document Style

PaginationPlus.configure({
  headerLeft: `<div>
<h2 style="margin: 0; color: #1f2937;">Business Proposal</h2>
<p style="margin: 0; font-size: 11px; color: #6b7280;">Proposal #2024-001</p>
</div>`,
  headerRight: `<span style="color: #3b82f6; font-weight: 600;">Page {page}</span>`,

  footerLeft: `<p style="margin: 0;"><strong>Company Name</strong><br>
123 Business St, City, State 12345<br>
Phone: (555) 123-4567</p>`,
  footerRight: `<p style="margin: 0; text-align: right;">Page {page}<br>
<small>Valid until: 12/31/2024</small></p>`,
})

Using Commands

You can dynamically update header and footer content using commands:

Basic Command Usage

// Update header content
editor.chain().focus()
  .updateHeaderContent('Document Title', 'Page {page}')
  .run()

// Update footer content
editor.chain().focus()
  .updateFooterContent('Confidential', 'Page {page} of {total}')
  .run()

Multiline Content with Commands

// Update header with multiline content
editor.chain().focus()
  .updateHeaderContent(
    '<h1>Tiptap Pagination Plus</h1><p>by Romik Makavana</p>',
    'Page {page}'
  )
  .run()

// Update footer with multiline content
editor.chain().focus()
  .updateFooterContent(
    '<p><strong>Contact Me :</strong><br>dev.romikmakavana@gmail.com</p>',
    'Made with ❤️ by Romik'
  )
  .run()

Rich Text with Commands

// Update with rich text formatting
editor.chain().focus()
  .updateHeaderContent(
    '<strong>Company Name</strong><br><small>Department</small>',
    '<span style="color: blue;">Page {page}</span>'
  )
  .updateFooterContent(
    '<em>Confidential</em>',
    'Page {page}'
  )
  .run()

Styling Tips

Consistent Spacing

Use CSS margins and padding for consistent spacing:

headerLeft: `<p style="margin: 0; padding: 0;">Title</p>`,

Color Schemes

Match your document’s color scheme:

headerLeft: `<h1 style="color: #2563eb;">Title</h1>`,
footerRight: `<span style="color: #6b7280;">Page {page}</span>`,

Font Sizes

Use appropriate font sizes for hierarchy:

headerLeft: `<h1 style="font-size: 18px;">Main Title</h1>
<p style="font-size: 12px;">Subtitle</p>`,

Automatic Height Calculation

The extension automatically calculates header and footer heights based on your content. This means:

No Manual Height Setting: You don’t need to manually set heights for multiline content
Dynamic Adjustment: Heights adjust automatically when content changes
Responsive: Works with any amount of content

Example: Automatic Height

// The header will automatically adjust its height to fit this content
PaginationPlus.configure({
  headerLeft: `<h1>Long Document Title</h1>
<p>Subtitle Line 1</p>
<p>Subtitle Line 2</p>
<p>Additional Information</p>`,
})

Best Practices

1. Use Semantic HTML

// Good: Semantic structure
headerLeft: `<h1>Title</h1><p>Subtitle</p>`

// Avoid: Non-semantic
headerLeft: `<div><div>Title</div></div>`

2. Keep It Simple

// Good: Clear and readable
footerRight: "Page {page}"

// Avoid: Overly complex
footerRight: `<div style="position:relative;transform:rotate(0deg);"><span style="display:inline-block;width:100%;height:100%;">Page {page}</span></div>`

3. Use Consistent Styling

// Apply consistent styles across headers and footers
const headerStyle = "font-size: 14px; color: #1f2937;"
const footerStyle = "font-size: 12px; color: #6b7280;"

headerLeft: `<p style="${headerStyle}">Title</p>`,
footerLeft: `<p style="${footerStyle}">Info</p>`,

4. Test with Different Content Lengths

Make sure your headers and footers look good with:

Short content
Long content
Multiline content
Different page numbers

Common Patterns

Simple Page Numbers

headerRight: "Page {page}",
footerRight: "Page {page}",

Page Numbers with Total

footerRight: "Page {page} of {total}",

Document Metadata

headerLeft: `<p><strong>Document Title</strong><br>
<small>Version 1.0 | Date: ${new Date().toLocaleDateString()}</small></p>`,

Troubleshooting

Content Not Displaying

Ensure HTML is properly formatted
Check for unclosed tags
Verify special characters are escaped if needed

Height Issues

The extension calculates heights automatically
If content is cut off, check your margin settings
Ensure page height is sufficient for content

Styling Not Applied

Use inline styles for best compatibility
Avoid external CSS classes (not supported)
Test with simple styles first, then add complexity

Links:

NPM
GitHub