Underline

The Underline mark applies underline formatting to text. It renders as <u> and parses <u> tags and CSS text-decoration: underline. Included in StarterKit by default.

Live Playground

Select text and apply underline with buttons or keyboard shortcut (Cmd+U / Ctrl+U).

Vanilla JS/TS

With the default theme enabled. Click the U toolbar button or use Cmd+U / Ctrl+U.

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 buttons above call toggleUnderline(), setUnderline(), and unsetUnderline() directly.

Click to try it out

Usage

Underline is included in StarterKit, so it works out of the box. To use it standalone:

Vanilla JS/TS

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

const editorEl = document.getElementById('editor')!;

// Toolbar
const toolbar = document.createElement('div');
toolbar.className = 'dm-toolbar';
toolbar.innerHTML = `<div class="dm-toolbar-group">
  <button class="dm-toolbar-button" data-mark="underline">${defaultIcons.textUnderline}</button>
</div>`;
editorEl.before(toolbar);

// Editor
const editor = new Editor({
  element: editorEl,
  extensions: [Document, Paragraph, Text, Underline],
  content: '<p>This is <u>underlined</u> text.</p>',
});

// Toggle underline on click
toolbar.addEventListener('click', (e) => {
  const btn = (e.target as Element).closest<HTMLButtonElement>('[data-mark]');
  if (btn) editor.chain().focus().toggleUnderline().run();
});

Angular

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, Underline } 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, Underline];
  content = '<p>This is <u>underlined</u> text.</p>';
}

editor.html

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

React

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

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, Underline]}
      content="<p>This is <u>underlined</u> text.</p>"
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

Headless

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

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, Underline],
  content: '<p>This is <u>underlined</u> text.</p>',
});

// Toggle underline programmatically
editor.chain().focus().toggleUnderline().run();

To disable Underline in StarterKit:

StarterKit.configure({ underline: false })

Schema

Property	Value
ProseMirror name	underline
Type	Mark
HTML tag	<u>

Parsing rules

Source	Condition
<u>	Always
CSS text-decoration	Value includes underline

The text-decoration style check uses includes('underline'), so compound values like underline dotted are also matched.

Options

Option	Type	Default	Description
HTMLAttributes	Record<string, unknown>	{}	Custom HTML attributes added to the rendered <u> element

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

const CustomUnderline = Underline.configure({
  HTMLAttributes: { class: 'my-underline' },
});

Commands

setUnderline

Applies underline formatting to the current selection.

editor.commands.setUnderline();

unsetUnderline

Removes underline formatting from the current selection.

editor.commands.unsetUnderline();

toggleUnderline

Toggles underline formatting on the current selection. Applies underline if not active, removes it if active.

editor.commands.toggleUnderline();

// With chaining
editor.chain().focus().toggleUnderline().run();

Keyboard shortcuts

Key	Action
Mod-U	Toggle underline (toggleUnderline)

Mod is Cmd on macOS and Ctrl on Windows/Linux.

Input rules

Underline has no input rules. Use the keyboard shortcut or toolbar button to apply formatting.

Toolbar items

Underline registers a button in the toolbar with the name underline in group format at priority 180.

Item	Type	Command	Icon	Shortcut	Active when
Underline	button	toggleUnderline	textUnderline	Mod-U	Underline mark is active on selection

Exports

import { Underline } from '@domternal/core';
import type { UnderlineOptions } from '@domternal/core';

Export	Type	Description
Underline	Mark extension	The underline mark extension
UnderlineOptions	TypeScript type	Options for Underline.configure()

Source

@domternal/core - Underline.ts