FontSize adds font size styling via the TextStyle carrier mark. It provides a dropdown with 6 default sizes, setFontSize and unsetFontSize commands, and a dynamic label that shows the current font size in the toolbar trigger. The trigger reads both inline and computed styles, so it always reflects the actual rendered size. The size list is fully customizable, and any size is accepted from pasted HTML regardless of the configured list.

Not included in StarterKit. Add it separately.

Requires the TextStyle mark, which is automatically included as a dependency.

Live Playground

Select some text and pick a size from the dropdown. The dropdown trigger label updates to show the font size at the cursor position.

With the default theme. The toolbar shows a font size dropdown with a dynamic label and 6 size options.

Click to try it out

Usage

import { Editor, Document, Paragraph, Text, FontSize } from '@domternal/core';
import '@domternal/theme';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, FontSize],
  content: '<p>Select text and pick a size from the toolbar dropdown.</p>',
});

With the full theme and ToolbarController, FontSize renders as a dropdown with a dynamic label that shows the current font size. The label reads both inline marks and computed styles.

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, FontSize } from '@domternal/core';

@Component({
  selector: 'app-editor',
  imports: [DomternalEditorComponent, DomternalToolbarComponent],
  templateUrl: './editor.html',
})
export class EditorComponent {
  editor = signal<Editor | null>(null);
  extensions = [Document, Paragraph, Text, FontSize];
  content = '<p>Select text and pick a size from the toolbar dropdown.</p>';
}

@if (editor(); as ed) {
  <domternal-toolbar [editor]="ed" />
}
<domternal-editor
  [extensions]="extensions"
  [content]="content"
  (editorCreated)="editor.set($event)"
/>

The Angular toolbar auto-renders the font size dropdown with a dynamic label and active state highlighting on the current size.

import { Domternal } from '@domternal/react';
import { Document, Paragraph, Text, FontSize } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, FontSize]}
      content="<p>Select text and pick a size from the toolbar dropdown.</p>"
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

import { Editor, Document, Paragraph, Text, FontSize } from '@domternal/core';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, FontSize],
});

// Set a specific size
editor.commands.setFontSize('24px');

// Remove size (reset to default)
editor.commands.unsetFontSize();

// Check if a specific size is active
editor.isActive('textStyle', { fontSize: '24px' }); // true/false

FontSize works identically without a theme. Build your own size picker UI and call the commands programmatically.

Options

Option	Type	Default	Description
`fontSizes`	`string[]`	`['12px', '14px', '16px', '18px', '24px', '32px']`	Size values shown in the toolbar dropdown. Commands accept any size regardless of this list.
`showReset`	`boolean`	`false`	Show a reset button at the end of the dropdown that calls `unsetFontSize()`

Default sizes

The default list includes 6 sizes:

12px, 14px, 16px, 18px, 24px, 32px

Custom sizes

FontSize.configure({
  fontSizes: ['10px', '13px', '16px', '20px', '28px', '36px', '48px'],
  showReset: true,
})

Empty list

Passing an empty array disables the toolbar dropdown entirely. No toolbar items are registered, but the commands still work.

FontSize.configure({ fontSizes: [] }) // no toolbar, commands only

Commands

setFontSize

Sets the font size on the current selection. Accepts any CSS size value as a string.

editor.commands.setFontSize('24px');

// With chaining
editor.chain().focus().setFontSize('32px').run();

Under the hood, this calls setMark('textStyle', { fontSize }) to apply the size attribute on the TextStyle carrier mark.

unsetFontSize

Removes the font size from the current selection, resetting it to the browser default. Also cleans up empty <span> wrappers via removeEmptyTextStyle().

editor.commands.unsetFontSize();

Keyboard shortcuts

FontSize does not register any keyboard shortcuts.

Input rules

FontSize does not register any input rules.

FontSize registers a dropdown with dynamicLabel in the toolbar.

Dropdown	Icon	Group	Priority	Display mode
`fontSize`	`textSize`	textStyle	100	text

Dynamic label

The dropdown trigger uses dynamicLabel mode with computedStyleProperty: 'font-size' and dynamicLabelFallback: '16px': instead of showing a fixed icon, it displays the current font size as text. The trigger label updates as the cursor moves through differently-sized text.

Cursor position	Trigger shows
Text with `font-size: 24px`	`24px`
Text with `font-size: 32px`	`32px`
Text with no explicit size	Computed size (e.g. `16px`)
Custom size not in list	Computed size from DOM

The label resolution follows this order:

If a dropdown item is active (cursor in text matching a configured size), show that item’s label
Otherwise, read the computed font-size at the cursor position (inline style first, then inherited)
If nothing found, show the dynamicLabelFallback value (16px)

Each size in the fontSizes array becomes a dropdown item:

Property	Value
`name`	`fontSize-{size}` (e.g., `fontSize-24px`)
`command`	`setFontSize`
`commandArgs`	`[size]`
`isActive`	`{ name: 'textStyle', attributes: { fontSize: size } }`
`icon`	`textSize`
`label`	Size value (e.g., `24px`)
`priority`	`200 - index` (first size = 200, last = 195)

Reset button

When showReset: true, a reset button is added at the end of the dropdown:

Property	Value
`name`	`unsetFontSize`
`command`	`unsetFontSize`
`icon`	`textSize`
`label`	`–`
`priority`	`0` (always last)

How it works

Carrier mark pattern

FontSize does not define its own mark. It injects a fontSize attribute into the TextStyle mark using addGlobalAttributes():

addGlobalAttributes() {
  return [{
    types: ['textStyle'],
    attributes: {
      fontSize: {
        default: null,
        parseHTML: (element) => element.style.fontSize || null,
        renderHTML: (attributes) => {
          if (!attributes.fontSize) return null;
          return { style: `font-size: ${attributes.fontSize}` };
        },
      },
    },
  }];
}

This means FontSize, TextColor, FontFamily, and Highlight all share the same <span> wrapper:

<span style="font-size: 24px; color: #e03131; font-family: Georgia">styled text</span>

Automatic dependency

FontSize declares TextStyle as both a dependency (dependencies: ['textStyle']) and includes it via addExtensions(). You do not need to add TextStyle separately.

Computed style vs inline style

FontSize reads computed styles at the cursor position, not just inline styles. This is different from FontFamily:

Extension	Style reading	Why
FontFamily	Inline only	Prevents showing browser default font (e.g. “Times New Roman”)
FontSize	Inline + computed	Always shows a meaningful size value

The Angular toolbar reads computed styles via getComputedStyleAtCursor(), which checks inline style first (explicit marks), then falls back to window.getComputedStyle() (inherited/default sizes).

Empty mark cleanup

When you call unsetFontSize(), it:

Sets the fontSize attribute to null via setMark('textStyle', { fontSize: null })
Calls removeEmptyTextStyle() to check if the TextStyle mark has any remaining non-null attributes
If all attributes are null (no font-size, no color, no font-family, no background-color), removes the <span> wrapper entirely

HTML rendering

Font sizes render as inline styles on <span> elements:

<!-- With size -->
<span style="font-size: 24px">Large text</span>

<!-- No size (default) - no span wrapper -->
Normal text

No validation

The fontSizes option only controls the toolbar dropdown. The commands and parser accept any font size string. Pasted HTML with sizes like 48px or 0.875rem is preserved even if those sizes are not in the configured list.

Exports

import { FontSize } from '@domternal/core';
import type { FontSizeOptions } from '@domternal/core';

Export	Type	Description
`FontSize`	Extension	The font size extension
`FontSizeOptions`	TypeScript type	Options for `FontSize.configure()`

Source

@domternal/core - FontSize.ts