Print Plugin

The PrintPlugin adds print functionality to the editor. It renders a clean print preview via a hidden iframe — stripping the toolbar, selection highlights, and interactive elements — so only the document content is printed.

Usage

import { PrintPlugin } from '@notectl/core';

new PrintPlugin()
// or with custom config:
new PrintPlugin({
  defaults: { title: 'My Document', margin: '2cm' },
  keyBinding: 'Mod-Shift-P',
  showToolbarItem: true,
})

Configuration

PrintPluginConfig

interface PrintPluginConfig {
  /** Default options applied to every print() call. */
  readonly defaults?: PrintOptions;
  /** Keyboard shortcut (default: 'Mod-P' = Ctrl+P / Cmd+P). */
  readonly keyBinding?: string;
  /** Show toolbar button (default: true). */
  readonly showToolbarItem?: boolean;
}

PrintOptions

interface PrintOptions {
  /** Page title shown in the browser print dialog. */
  readonly title?: string;
  /** Additional CSS appended to the print stylesheet. */
  readonly customCSS?: string;
  /** Header HTML inserted at the top of the print document. */
  readonly header?: string | (() => string);
  /** Footer HTML inserted at the bottom of the print document. */
  readonly footer?: string | (() => string);
  /** Page margins as CSS value (e.g. '2cm'). */
  readonly margin?: string;
  /** Force page break before these block types. */
  readonly pageBreakBefore?: readonly NodeTypeName[];
  /** Exclude these block types from print output. */
  readonly excludeBlockTypes?: readonly NodeTypeName[];
  /** Print background colors and images. */
  readonly printBackground?: boolean;
  /** Page orientation. */
  readonly orientation?: 'portrait' | 'landscape';
  /** Paper size for @page CSS rule. Overrides default A4. */
  readonly paperSize?: PaperSize;
}

Commands

Command	Description	Returns
print	Open the browser print dialog with clean editor content	boolean

editor.executeCommand('print');

Keyboard Shortcuts

Shortcut	Action
Ctrl+P / Cmd+P	Print

The shortcut can be customized via keyBinding in the plugin config.

PrintService API

The plugin registers a PrintService accessible via the service key. Use this for programmatic access without the toolbar button.

import { PRINT_SERVICE_KEY } from '@notectl/core';

// Get the service from the editor
const printService = editor.getService(PRINT_SERVICE_KEY);

// Open browser print dialog
printService.print({ title: 'Invoice', margin: '1.5cm' });

// Generate print-ready HTML string (for server-side PDF generation)
const html: string = printService.toHTML({
  title: 'Report',
  orientation: 'landscape',
  customCSS: '.highlight { background: yellow; }',
});

Methods

Method	Signature	Description
print	(options?: PrintOptions) => void	Opens the browser print dialog with clean content
toHTML	(options?: PrintOptions) => string	Returns a complete HTML document string for server-side PDF generation

Events

The plugin emits events before and after printing, allowing you to modify options or cancel the print.

import { BEFORE_PRINT, AFTER_PRINT } from '@notectl/core';

// Modify options or cancel before printing
editor.on(BEFORE_PRINT, (event) => {
  event.options = { ...event.options, title: 'Custom Title' };
  // event.cancelled = true; // cancel the print
});

// Access the generated HTML after printing
editor.on(AFTER_PRINT, (event) => {
  console.log('Printed HTML length:', event.html.length);
});

Event	Payload	Description
BEFORE_PRINT	{ options: PrintOptions, cancelled: boolean }	Fired before print. Mutate options or set cancelled = true.
AFTER_PRINT	{ html: string }	Fired after HTML generation with the final HTML string.

WYSIWYG Print with Paper Size

When the editor has a paperSize configured, the print output automatically matches the editor layout pixel-for-pixel:

• The @page rule uses the correct paper size keyword (e.g. A4, letter)
• Page margins are set to zero with document margins applied as content padding
• Typography (font, size, line height) is preserved from the editor

No extra configuration is needed — the editor injects paperSize into the print options automatically via the BEFORE_PRINT event.

import { createEditor, PaperSize, PrintPlugin } from '@notectl/core';

const editor = await createEditor({
  paperSize: PaperSize.DINA4,
  toolbar: [[new PrintPlugin()]],
});

// Ctrl+P / Cmd+P — print output matches the editor 1:1

Configuration Examples

Headless (no toolbar button)

new PrintPlugin({ showToolbarItem: false })

The PrintService is still available via editor.getService(PRINT_SERVICE_KEY) for programmatic use.

Custom margins and orientation

new PrintPlugin({
  defaults: {
    margin: '1.5cm',
    orientation: 'landscape',
    printBackground: true,
  },
})

Headers and footers

new PrintPlugin({
  defaults: {
    header: '<div style="text-align:center;font-size:10px">Confidential</div>',
    footer: () => `<div style="text-align:right;font-size:9px">Printed: ${new Date().toLocaleDateString()}</div>`,
  },
})

Exclude block types and force page breaks

new PrintPlugin({
  defaults: {
    excludeBlockTypes: ['horizontal_rule'],
    pageBreakBefore: ['heading'],
  },
})

Print Content Preparation

The plugin automatically prepares content for print:

• Clones the editor content (original DOM is never modified)
• Removes contenteditable, selection classes, and placeholder text
• Collects all editor styles including adopted stylesheets and theme tokens
• Applies block filters (exclusion, page breaks)
• Inserts header/footer elements

CSS Customization

Use data-notectl-no-print on any element to exclude it from print output:

<div data-notectl-no-print>This won't appear in print</div>

The plugin generates @media print rules that handle code block wrapping, image page breaks, and table layout. Additional styles can be injected via customCSS.

Requirements

The PrintPlugin requires the editor to be inside a ShadowRoot (which is the default when using <notectl-editor>). If the editor is used outside a ShadowRoot, the print service will be a no-op.