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.

When to use

Use Underline when you need:

A standard <u> mark with Cmd+U
Form-style editing for legal documents, contracts, or signature lines where underlining carries meaning
Pasted content with explicit underlines (from Word, Google Docs) to survive

Skip it if:

Your content is editorial or web-style where underlines conflict with link styling
You can use stronger emphasis (Bold) or color highlights (Highlight) instead, which read better on screen

Live Playground

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

Themed
Headless

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

Click to try it out

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:

import { Document, Paragraph, Text, Underline } from '@domternal/core';
import { DomternalEditor, DomternalToolbar } from '@domternal/vanilla';
import '@domternal/theme';

const editorEl = document.getElementById('editor')!;
const toolbarEl = document.createElement('div');
editorEl.before(toolbarEl);

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

new DomternalToolbar(toolbarEl, { editor: dm.editor });

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>';
}

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

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>
  );
}

<script setup lang="ts">
import { Domternal } from '@domternal/vue';
import { Document, Paragraph, Text, Underline } from '@domternal/core';

const extensions = [Document, Paragraph, Text, Underline];
</script>

<template>
  <Domternal :extensions="extensions" content="<p>This is <u>underlined</u> text.</p>">
    <Domternal.Toolbar />
    <Domternal.Content />
  </Domternal>
</template>

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.

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