Skip to main content
The Underline extension adds support for underlined text formatting with keyboard shortcuts and commands.

​
Installation

npm install @prosekit/extensions

​
Usage

Add the underline extension to your editor: 
import { defineUnderline } from '@prosekit/extensions/underline'
import { createEditor } from '@prosekit/core'

const editor = createEditor({
  extensions: [
    // ... other extensions
    defineUnderline(),
  ],
})

​
API Reference

​
defineUnderline()

Defines the complete underline extension including:
  • Mark specification for <u> HTML tag
  • Commands for toggling underline
  • Keyboard shortcuts
Returns: UnderlineExtension

​
Commands

​
toggleUnderline

Toggles underline formatting on the current selection or at the cursor position. 
editor.commands.toggleUnderline()

​
Keyboard Shortcuts

ShortcutAction
Mod-uToggle underline formatting
Mod is Cmd on macOS and Ctrl on Windows/Linux.

​
HTML Output

Underlined text is rendered as <u> elements: 
<u>Underlined text</u>

​
Parsing

The extension recognizes the following HTML elements and styles when parsing content:
  • <u> tag
  • <underline> tag
  • Elements with text-decoration: underline
  • Elements with text-decoration-line: underline

​
Advanced Configuration

If you need more control, you can use the individual components: 
import { 
  defineUnderlineSpec,
  defineUnderlineCommands,
  defineUnderlineKeymap
} from '@prosekit/extensions/underline'

const editor = createEditor({
  extensions: [
    defineUnderlineSpec(),      // Just the mark definition
    defineUnderlineCommands(),  // Just the commands
    defineUnderlineKeymap(),    // Just the keyboard shortcuts
  ],
})
These functions are marked as @internal in the source code and may change in future versions.
  • Bold - Bold text formatting
  • Italic - Italic text formatting
  • Strike - Strikethrough text formatting
  • Code - Inline code formatting