Skip to content
Tiptap Editor Tools

Commands

The PaginationPlus extension provides a comprehensive set of commands to dynamically control pagination settings, page dimensions, margins, headers, footers, and more.

Command Categories

Section titled “Command Categories”
  • Page Dimensions: Control page height, width, and size
  • Page Styling: Manage page gaps, borders, and backgrounds
  • Margins: Configure page and content margins
  • Headers & Footers: Customize header and footer content and dimensions
  • Page Size: Use predefined page sizes
  • Print: Control print behavior

All Available Commands

Section titled “All Available Commands”
CommandParametersDescription
updatePageHeightheight: numberUpdate page height
updatePageWidthwidth: numberUpdate page width
updatePageSizesize: PageSizeUpdate page size using predefined sizes
updatePageGapgap: numberUpdate gap between pages
updatePageBreakBackgroundcolor: stringUpdate page break background color
updateMarginsmargins: MarginObjectUpdate page margins
updateContentMarginsmargins: ContentMarginObjectUpdate content margins
updateHeaderHeightheight: numberUpdate header height
updateFooterHeightheight: numberUpdate footer height
updateHeaderContentleft: string, right: stringUpdate header HTML content (supports multiline and rich text)
updateFooterContentleft: string, right: stringUpdate footer HTML content (supports multiline and rich text)

Page Dimension Commands

Section titled “Page Dimension Commands”

updatePageHeight

Section titled “updatePageHeight”

Updates the height of pages in pixels.

editor.chain().focus().updatePageHeight(height: number).run()

Parameters:

  • height (number): New page height in pixels

Example:

// Set page height to 1000px
editor.chain().focus().updatePageHeight(1000).run()

updatePageWidth

Section titled “updatePageWidth”

Updates the width of pages in pixels.

editor.chain().focus().updatePageWidth(width: number).run()

Parameters:

  • width (number): New page width in pixels

Example:

// Set page width to 600px
editor.chain().focus().updatePageWidth(600).run()

updatePageSize

Section titled “updatePageSize”

Updates page dimensions using predefined page sizes.

editor.chain().focus().updatePageSize(size: PageSize).run()

Parameters:

  • size (PageSize): Predefined page size object

Example:

import { PAGE_SIZES } from 'tiptap-pagination-plus'


// Set to A4 size
editor.chain().focus().updatePageSize(PAGE_SIZES.A4).run()


// Set to Letter size
editor.chain().focus().updatePageSize(PAGE_SIZES.LETTER).run()

Page Styling Commands

Section titled “Page Styling Commands”

updatePageGap

Section titled “updatePageGap”

Updates the gap between pages in pixels.

editor.chain().focus().updatePageGap(gap: number).run()

Parameters:

  • gap (number): New gap between pages in pixels

Example:

// Set page gap to 30px
editor.chain().focus().updatePageGap(30).run()

updatePageBreakBackground

Section titled “updatePageBreakBackground”

Updates the background color of page gaps.

editor.chain().focus().updatePageBreakBackground(color: string).run()

Parameters:

  • color (string): CSS color value

Example:

// Set page break background to light gray
editor.chain().focus().updatePageBreakBackground('#f0f0f0').run()


// Set to white
editor.chain().focus().updatePageBreakBackground('#ffffff').run()

Margin Commands

Section titled “Margin Commands”

updateMargins

Section titled “updateMargins”

Updates page margins.

editor.chain().focus().updateMargins(margins: MarginObject).run()

Parameters:

  • margins (object): Margin configuration object
    • top (number): Top margin in pixels
    • bottom (number): Bottom margin in pixels
    • left (number): Left margin in pixels
    • right (number): Right margin in pixels

Example:

// Update all margins
editor.chain().focus().updateMargins({
  top: 30,
  bottom: 30,
  left: 60,
  right: 60
}).run()


// Update specific margins
editor.chain().focus().updateMargins({
  top: 20,
  bottom: 20,
  left: 50,
  right: 50
}).run()

updateContentMargins

Section titled “updateContentMargins”

Updates content margins within pages.

editor.chain().focus().updateContentMargins(margins: ContentMarginObject).run()

Parameters:

  • margins (object): Content margin configuration object
    • top (number): Top content margin in pixels
    • bottom (number): Bottom content margin in pixels

Example:

// Update content margins
editor.chain().focus().updateContentMargins({
  top: 15,
  bottom: 15
}).run()

Header & Footer Commands

Section titled “Header & Footer Commands”

updateHeaderHeight

Section titled “updateHeaderHeight”

Updates the height of page headers.

editor.chain().focus().updateHeaderHeight(height: number).run()

Parameters:

  • height (number): New header height in pixels

Example:

// Set header height to 40px
editor.chain().focus().updateHeaderHeight(40).run()

updateFooterHeight

Section titled “updateFooterHeight”

Updates the height of page footers.

editor.chain().focus().updateFooterHeight(height: number).run()

Parameters:

  • height (number): New footer height in pixels

Example:

// Set footer height to 40px
editor.chain().focus().updateFooterHeight(40).run()

updateHeaderContent

Section titled “updateHeaderContent”

Updates header content for left and right sides. Supports multiline content and rich text (HTML).

editor.chain().focus().updateHeaderContent(left: string, right: string).run()

Parameters:

  • left (string): Left side header content (supports HTML, multiline, and rich text)
  • right (string): Right side header content (supports HTML, multiline, and rich text)

Example:

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


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


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


// Clear header content
editor.chain().focus().updateHeaderContent('', '').run()

updateFooterContent

Section titled “updateFooterContent”

Updates footer content for left and right sides. Supports multiline content and rich text (HTML).

editor.chain().focus().updateFooterContent(left: string, right: string).run()

Parameters:

  • left (string): Left side footer content (supports HTML, multiline, and rich text)
  • right (string): Right side footer content (supports HTML, multiline, and rich text)

Example:

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


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


// Update footer content with rich text formatting
editor.chain().focus().updateFooterContent(
  '<em>Confidential</em>',
  '<span style="font-weight: bold;">Page {page}</span>'
).run()


// Clear footer content
editor.chain().focus().updateFooterContent('', '').run()

Command Chaining

Section titled “Command Chaining”

Commands can be chained together for complex operations:

// Chain multiple commands
editor.chain().focus()
  .updatePageSize(PAGE_SIZES.A4)
  .updateMargins({ top: 30, bottom: 30, left: 60, right: 60 })
  .updateHeaderContent('Document Title', 'Page {page}')
  .updateFooterContent('Confidential', 'Page {page} of {total}')
  .updatePageBreakBackground('#f0f0f0')
  .run()


// Chain with multiline and rich text
editor.chain().focus()
  .updatePageSize(PAGE_SIZES.A4)
  .updateMargins({ top: 30, bottom: 30, left: 60, right: 60 })
  .updateHeaderContent(
    '<h1>Company Report</h1><p>Q4 2024</p>',
    '<span style="color: blue;">Page {page}</span>'
  )
  .updateFooterContent(
    '<p><strong>Confidential</strong><br><small>Internal Use Only</small></p>',
    'Page {page} of {total}'
  )
  .run()

Command Examples by Use Case

Section titled “Command Examples by Use Case”

Document Setup

Section titled “Document Setup”
// Set up a professional document
editor.chain().focus()
  .updatePageSize(PAGE_SIZES.A4)
  .updateMargins({ top: 30, bottom: 30, left: 60, right: 60 })
  .updateHeaderContent('Company Report', '2024')
  .updateFooterContent('Confidential', 'Page {page}')
  .updatePageBreakBackground('#ffffff')
  .run()
Section titled “Print Preparation”
// Prepare for printing
editor.chain().focus()
  .updatePageSize(PAGE_SIZES.A4)
  .updatePageGap(0)
  .updatePageBreakBackground('#ffffff')
  .updateMargins({ top: 20, bottom: 20, left: 50, right: 50 })
  .print()
  .run()

Custom Format

Section titled “Custom Format”
// Create custom page format
editor.chain().focus()
  .updatePageHeight(1000)
  .updatePageWidth(600)
  .updateMargins({ top: 25, bottom: 25, left: 40, right: 40 })
  .updateContentMargins({ top: 10, bottom: 10 })
  .updateHeaderHeight(35)
  .updateFooterHeight(35)
  .run()

Dynamic Updates

Section titled “Dynamic Updates”
// Function to update page size based on user selection
function updatePageSize(size: string) {
  const pageSizes = {
    'A4': PAGE_SIZES.A4,
    'A3': PAGE_SIZES.A3,
    'A5': PAGE_SIZES.A5,
    'LETTER': PAGE_SIZES.LETTER,
    'LEGAL': PAGE_SIZES.LEGAL,
    'TABLOID': PAGE_SIZES.TABLOID,
  }


  editor.chain().focus().updatePageSize(pageSizes[size]).run()
}


// Usage
updatePageSize('A4')
updatePageSize('LETTER')

Error Handling

Section titled “Error Handling”

Command Validation

Section titled “Command Validation”
// Validate command parameters
function safeUpdatePageHeight(height: number) {
  if (height < 200 || height > 3000) {
    console.error('Page height must be between 200 and 3000 pixels')
    return
  }


  editor.chain().focus().updatePageHeight(height).run()
}


function safeUpdateMargins(margins: any) {
  if (!margins || typeof margins !== 'object') {
    console.error('Margins must be an object')
    return
  }


  const { top, bottom, left, right } = margins
  if (typeof top !== 'number' || typeof bottom !== 'number' ||
      typeof left !== 'number' || typeof right !== 'number') {
    console.error('All margin values must be numbers')
    return
  }


  editor.chain().focus().updateMargins(margins).run()
}

Best Practices

Section titled “Best Practices”

Command Organization

Section titled “Command Organization”
// Group related commands
function setupDocument() {
  editor.chain().focus()
    .updatePageSize(PAGE_SIZES.A4)
    .updateMargins({ top: 30, bottom: 30, left: 60, right: 60 })
    .updateHeaderContent('Document Title', 'Page {page}')
    .updateFooterContent('Confidential', 'Page {page} of {total}')
    .run()
}


function prepareForPrint() {
  editor.chain().focus()
    .updatePageGap(0)
    .updatePageBreakBackground('#ffffff')
    .print()
    .run()
}

Command State Management

Section titled “Command State Management”
// Track command state
let currentPageSize = PAGE_SIZES.A4
let currentMargins = { top: 30, bottom: 30, left: 60, right: 60 }


function updatePageSizeWithState(size: PageSize) {
  currentPageSize = size
  editor.chain().focus().updatePageSize(size).run()
}


function updateMarginsWithState(margins: MarginObject) {
  currentMargins = margins
  editor.chain().focus().updateMargins(margins).run()
}

API Reference

Section titled “API Reference”

Command Types

Section titled “Command Types”
interface MarginObject {
  top: number
  bottom: number
  left: number
  right: number
}


interface ContentMarginObject {
  top: number
  bottom: number
}


interface PageSize {
  width: number
  height: number
}

Links:

tiptapplus.com is not an official Tiptap website and has no business affiliation with Tiptap.