tiptap/docs/api/marks/underline.md

description	icon
Add a line below your text to make it look more … underlined.	underline

Underline

Use this extension to render text underlined. If you pass <u> tags, or text with inline style attributes setting text-decoration: underline in the editor’s initial content, they all will be rendered accordingly.

Be aware that underlined text in the Internet usually indicates that it’s a clickable link. Don’t confuse your users with underlined text.

::: warning Restrictions The extension will generate the corresponding <u> HTML tags when reading contents of the Editor instance. All text marked underlined, regardless of the method will be normalized to <u> HTML tags. :::

Installation

# with npm
npm install @tiptap/extension-underline

# with Yarn
yarn add @tiptap/extension-underline

Settings

HTMLAttributes

Custom HTML attributes that should be added to the rendered HTML tag.

Underline.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})

Commands

setUnderline()

Marks a text as underlined.

editor.commands.setUnderline()

toggleUnderline()

Toggles an underline mark.

editor.commands.toggleUnderline()

unsetUnderline()

Removes an underline mark.

editor.commands.unsetUnderline()

Keyboard shortcuts

Command	Windows/Linux	macOS
toggleUnderline()	Control U	Cmd U

Source code

packages/extension-underline/

Usage