Commands

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

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

Command	Parameters	Description
updatePageHeight	height: number	Update page height
updatePageWidth	width: number	Update page width
updatePageSize	size: PageSize	Update page size using predefined sizes
updatePageGap	gap: number	Update gap between pages
updatePageBreakBackground	color: string	Update page break background color
updateMargins	margins: MarginObject	Update page margins
updateContentMargins	margins: ContentMarginObject	Update content margins
updateHeaderHeight	height: number	Update header height
updateFooterHeight	height: number	Update footer height
updateHeaderContent	left: string, right: string	Update header content
updateFooterContent	left: string, right: string	Update footer content

Page Dimension Commands

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

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

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

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

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

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

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

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

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

Updates header content for left and right sides.

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

Parameters:

• left (string): Left side header content
• right (string): Right side header content

Example:

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

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

updateFooterContent

Updates footer content for left and right sides.

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

Parameters:

• left (string): Left side footer content
• right (string): Right side footer content

Example:

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

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

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()

Command Examples by Use Case

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()

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

// 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

// 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

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

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

// 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

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:

• NPM
• GitHub