Page Size

The page size feature allows you to configure and dynamically change the dimensions of your paginated content. This includes predefined standard page sizes and the ability to set custom dimensions.

Features

Predefined Page Sizes: Standard paper sizes (A4, A3, A5, Letter, Legal, Tabloid)
Custom Dimensions: Set any width and height for your pages
Dynamic Updates: Change page size at runtime using commands
Margin Management: Automatic margin adjustments for different page sizes
Print Compatibility: Page sizes optimized for printing

Predefined Page Sizes

The extension includes several predefined page sizes that you can use:

Available Page Sizes

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

// Standard page sizes
PAGE_SIZES.A4      // A4 size (794x1123px)
PAGE_SIZES.A3      // A3 size (1123x1591px)
PAGE_SIZES.A5      // A5 size (419x794px)
PAGE_SIZES.LETTER  // Letter size (818x1060px)
PAGE_SIZES.LEGAL   // Legal size (818x1404px)
PAGE_SIZES.TABLOID // Tabloid size (1060x1635px)

Page Size Details

Size	Dimensions (px)	Use Case
A4	794 x 1123	Standard international documents
A3	1123 x 1591	Large format presentations
A5	419 x 794	Small booklets, flyers
Letter	818 x 1060	Standard US documents
Legal	818 x 1404	Legal documents, contracts
Tabloid	1060 x 1635	Large format printing

Usage

Basic Page Size Configuration

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

const editor = new Editor({
  extensions: [
    StarterKit,
    PaginationPlus.configure({
      pageHeight: PAGE_SIZES.A4.height,
      pageWidth: PAGE_SIZES.A4.width,
      pageGap: 20,
      pageBreakBackground: "#ffffff",
      marginTop: 20,
      marginBottom: 20,
      marginLeft: 50,
      marginRight: 50,
    }),
  ],
})

Using Predefined Page Sizes

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

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

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

Custom Page Dimensions

// Set custom page dimensions
editor.chain().focus()
  .updatePageHeight(1000)
  .updatePageWidth(600)
  .run()

// Set specific dimensions for a custom format
editor.chain().focus()
  .updatePageHeight(800)
  .updatePageWidth(400)
  .run()

Page Size Commands

Available Commands

Command	Parameters	Description
`updatePageSize`	`size: PageSize`	Update page dimensions using predefined page sizes
`updatePageHeight`	`height: number`	Update the height of pages in pixels
`updatePageWidth`	`width: number`	Update the width of pages in pixels

Command Examples

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

// Update height only
editor.chain().focus().updatePageHeight(1000).run()

// Update width only
editor.chain().focus().updatePageWidth(600).run()

// Update both dimensions
editor.chain().focus()
  .updatePageHeight(1000)
  .updatePageWidth(600)
  .run()

Page Size with Margins

When changing page sizes, you may want to adjust margins accordingly:

// Update page size and margins together
editor.chain().focus()
  .updatePageSize(PAGE_SIZES.A4)
  .updateMargins({
    top: 30,
    bottom: 30,
    left: 60,
    right: 60
  })
  .run()

// Custom dimensions with custom margins
editor.chain().focus()
  .updatePageHeight(1000)
  .updatePageWidth(600)
  .updateMargins({
    top: 20,
    bottom: 20,
    left: 40,
    right: 40
  })
  .run()

Responsive Page Sizing

Dynamic Page Size Updates

// Function to handle page size changes
function changePageSize(size: 'A4' | 'A3' | 'A5' | 'LETTER' | 'LEGAL' | 'TABLOID') {
  const pageSize = PAGE_SIZES[size]
  editor.chain().focus().updatePageSize(pageSize).run()
}

// Usage
changePageSize('A4')
changePageSize('LETTER')

Page Size Selection UI

// Example: Page size selector
const pageSizeOptions = [
  { label: 'A4', value: PAGE_SIZES.A4 },
  { label: 'A3', value: PAGE_SIZES.A3 },
  { label: 'A5', value: PAGE_SIZES.A5 },
  { label: 'Letter', value: PAGE_SIZES.LETTER },
  { label: 'Legal', value: PAGE_SIZES.LEGAL },
  { label: 'Tabloid', value: PAGE_SIZES.TABLOID },
]

function onPageSizeChange(selectedSize: any) {
  editor.chain().focus().updatePageSize(selectedSize).run()
}

Print Considerations

Print-Optimized Page Sizes

For best print results, use standard page sizes:

// Print-optimized configuration
PaginationPlus.configure({
  pageHeight: PAGE_SIZES.A4.height,
  pageWidth: PAGE_SIZES.A4.width,
  pageGap: 0, // No gap for print
  pageBreakBackground: "#ffffff",
  marginTop: 20,
  marginBottom: 20,
  marginLeft: 50,
  marginRight: 50,
})

Page Size for Different Use Cases

// Document types and recommended page sizes
const documentTypes = {
  report: PAGE_SIZES.A4,
  presentation: PAGE_SIZES.A3,
  flyer: PAGE_SIZES.A5,
  contract: PAGE_SIZES.LEGAL,
  newsletter: PAGE_SIZES.TABLOID,
  letter: PAGE_SIZES.LETTER,
}

// Apply page size based on document type
function setDocumentType(type: keyof typeof documentTypes) {
  editor.chain().focus().updatePageSize(documentTypes[type]).run()
}

Advanced Configuration

Custom Page Size with Full Configuration

// Custom page size with all options
const customPageSize = {
  height: 1000,
  width: 600,
  margins: {
    top: 30,
    bottom: 30,
    left: 60,
    right: 60
  }
}

editor.chain().focus()
  .updatePageHeight(customPageSize.height)
  .updatePageWidth(customPageSize.width)
  .updateMargins(customPageSize.margins)
  .run()

Page Size Validation

// Validate page size before applying
function validatePageSize(width: number, height: number) {
  const minWidth = 200
  const maxWidth = 2000
  const minHeight = 200
  const maxHeight = 3000

  if (width < minWidth || width > maxWidth) {
    throw new Error(`Width must be between ${minWidth} and ${maxWidth}`)
  }

  if (height < minHeight || height > maxHeight) {
    throw new Error(`Height must be between ${minHeight} and ${maxHeight}`)
  }

  return true
}

// Apply validated page size
function setValidatedPageSize(width: number, height: number) {
  if (validatePageSize(width, height)) {
    editor.chain().focus()
      .updatePageWidth(width)
      .updatePageHeight(height)
      .run()
  }
}

Troubleshooting

Common Page Size Issues

Page size not updating:

Ensure the editor is focused before running commands
Check that the extension is properly configured
Verify the command syntax

Content not fitting:

Check page dimensions are appropriate for content
Verify margin settings
Ensure content doesn’t exceed page boundaries

Print issues:

Use standard page sizes for best print results
Check printer settings match page dimensions
Verify print margins are configured correctly

API Reference

Page Size Types

interface PageSize {
  width: number
  height: number
}

interface PAGE_SIZES {
  A4: PageSize
  A3: PageSize
  A5: PageSize
  LETTER: PageSize
  LEGAL: PageSize
  TABLOID: PageSize
}

Configuration Options

Option	Type	Default	Description
`pageHeight`	number	800	Height of each page in pixels
`pageWidth`	number	789	Width of each page in pixels

Links:

NPM
GitHub