Font Size Plugin

The FontSizePlugin provides a font size selector with preset sizes, custom input, and keyboard shortcuts for stepping through sizes.

Usage

import { FontSizePlugin } from '@notectl/core/plugins/font-size';

new FontSizePlugin()
// or with custom config:
new FontSizePlugin({
  sizes: [12, 14, 16, 20, 24, 32, 48],
  defaultSize: 16,
})

Configuration

interface FontSizeConfig {
  /** Preset sizes shown in the dropdown. Sorted and deduplicated automatically. */
  readonly sizes?: number[];
  /** Base font size (no mark applied). Default: 16 */
  readonly defaultSize?: number;
  /** Your own CSS class per pixel size in class-based HTML. See "Custom CSS Classes". */
  readonly styleClasses?: Readonly<Record<number, string>>;
  /** Custom locale strings. */
  readonly locale?: FontSizeLocale;
}

Default Preset Sizes

When sizes is not specified:

8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 64, 72, 96

Custom CSS Classes

Available from notectl 2.4.0.

Class-based HTML export writes font sizes as generated notectl-s-* classes. Map the sizes of your type scale to its classes with styleClasses, keyed by pixel size:

new FontSizePlugin({
  sizes: [14, 18, 24],
  styleClasses: { 14: 'text-sm', 18: 'text-lg', 24: 'text-xl' },
});
// Exported: <span class="text-lg">…</span>

Keys are whole pixel numbers; '18px' or 1.5 are rejected with an explanation. Text with a size and a color gets both classes (class="text-red text-lg"). Import and paste read the classes back without a styleMap. See Custom CSS Classes for the rules shared by all formatting plugins.

Commands

Command	Description	Returns
setFontSize	Reserved — font size is applied via the toolbar popup	false
removeFontSize	Remove font size mark (reset to default)	boolean
increaseFontSize	Step up to next preset size	boolean
decreaseFontSize	Step down to previous preset size	boolean

editor.executeCommand('increaseFontSize');
editor.executeCommand('decreaseFontSize');
editor.executeCommand('removeFontSize');

Keyboard Shortcuts

Shortcut	Action
Ctrl+Shift++ / Cmd+Shift++	Increase font size
Ctrl+Shift+_ / Cmd+Shift+_	Decrease font size

Toolbar

The font size plugin renders as a combobox showing the current size. The dropdown includes:

1. A number input for custom sizes (1-400)
2. A scrollable list of preset sizes
3. Full keyboard navigation (arrow keys, Enter, Escape)

The currently active size is highlighted in the list. If the cursor is on text with no font size mark, the default size is shown.

Mark Spec

Mark	Attributes	Renders As
fontSize	size: string (e.g., "24px")	<span style="font-size: 24px">

Font-size-aware nodes

Marks only apply to text, so they cannot size atomic nodes such as a formula. The size control is therefore node-aware: when the selection targets a node whose schema spec declares a fontSize attribute (for example a formula), the size is written to that attribute instead of a mark, and a range that mixes text and such nodes sizes both in one transaction. This is generic — any node or inline node that declares a fontSize attribute participates.

Default Size Behavior

When the user selects the defaultSize, the font size mark is removed rather than applied. This keeps the document clean — text at the default size has no unnecessary marks.

Stepping Logic

The increaseFontSize and decreaseFontSize commands find the current font size at the cursor, locate it in the sorted preset list, and move to the next/previous entry. If the current size is not in the preset list, the commands snap to the nearest preset.