Clear Formatting

ClearFormatting adds a toolbar button that removes all formatting marks (bold, italic, underline, strike, code, subscript, superscript, text color, font family, font size, highlight) from the current selection. Marks with isFormatting: false (like Link) are preserved. It uses the built-in unsetAllMarks command.

Not included in StarterKit. Add it separately.

Live Playground

Select some formatted text and click the clear formatting button to remove all formatting at once. Try selecting everything with Cmd/Ctrl+A to see all the formatting stripped in one click.

Vanilla JS/TS

With the default theme. The toolbar shows the clear formatting button.

Click to try it out

Angular

Click to try it out

Vanilla JS preview - Angular components produce the same output

React

Click to try it out

Vanilla JS preview - React components produce the same output

Headless

Plain editor without the theme. The button above calls unsetAllMarks() directly.

Click to try it out

Usage

Vanilla JS/TS

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

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, Bold, Italic, ClearFormatting],
  content: '<p>Select <strong>bold</strong> or <em>italic</em> text and click the clear formatting button.</p>',
});

With the full theme and ToolbarController, ClearFormatting renders as a button with the T̸ icon in the utilities group.

Angular

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, Bold, Italic, ClearFormatting } 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, Bold, Italic, ClearFormatting];
  content = '<p>Select <strong>bold</strong> or <em>italic</em> text and click the clear formatting button.</p>';
}

editor.html

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

The toolbar auto-renders the clear formatting button.

React

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

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, Bold, Italic, ClearFormatting]}
      content="<p>Select <strong>bold</strong> or <em>italic</em> text and click the clear formatting button.</p>"
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

Headless

import { Editor, Document, Paragraph, Text, Bold, Italic, ClearFormatting } from '@domternal/core';

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

// Remove all formatting marks from the current selection
editor.commands.unsetAllMarks();

ClearFormatting itself does not add any commands. It provides a toolbar button that calls the built-in unsetAllMarks command, which is always available.

Options

ClearFormatting has no configurable options.

Commands

ClearFormatting does not register its own commands. The toolbar button calls the built-in unsetAllMarks command.

unsetAllMarks (built-in)

Removes all formatting marks from the current selection. Returns false if the selection is empty (collapsed cursor).

editor.commands.unsetAllMarks();

This command:

1. Iterates through all mark types in the schema
2. Skips marks where isFormatting: false (Link by default)
3. Removes matching marks from every range in the selection
4. Clears stored marks (prevents formatting from carrying to the next typed character)

Note

Link is preserved by default because it has isFormatting: false. This means clearing formatting on linked text removes bold, italic, etc. but keeps the link intact. You can override this with Link.configure({ isFormatting: true }).

Keyboard shortcuts

ClearFormatting does not register any keyboard shortcuts.

Input rules

ClearFormatting does not register any input rules.

Toolbar items

Button	Icon	Group	Priority
clearFormatting	textTSlash	utilities	200

The button calls unsetAllMarks when clicked. It has no active state or shortcut.

How it works

ClearFormatting is a minimal extension. Its only purpose is to register a toolbar button:

addToolbarItems(): ToolbarItem[] {
  return [{
    type: 'button',
    name: 'clearFormatting',
    command: 'unsetAllMarks',
    icon: 'textTSlash',
    label: 'Clear Formatting',
    group: 'utilities',
    priority: 200,
  }];
}

The actual formatting removal logic lives in the built-in unsetAllMarks command (defined in markCommands.ts), which is available to all editors regardless of whether ClearFormatting is installed. ClearFormatting simply provides a convenient toolbar button for it.

What gets removed

Mark	Removed	Why
Bold	Yes	isFormatting: true (default)
Italic	Yes	isFormatting: true (default)
Underline	Yes	isFormatting: true (default)
Strike	Yes	isFormatting: true (default)
Code	Yes	isFormatting: true (default)
TextStyle (color, font, size, highlight)	Yes	isFormatting: true (default)
Subscript	Yes	isFormatting: true (default)
Superscript	Yes	isFormatting: true (default)
Link	No	isFormatting: false

Exports

import { ClearFormatting } from '@domternal/core';

Export	Type	Description
ClearFormatting	Extension	The clear formatting extension

Source

@domternal/core - ClearFormatting.ts