CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tiptap--extension-underline

A Tiptap extension that provides underline text formatting functionality with commands and keyboard shortcuts

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Tiptap Extension Underline

The @tiptap/extension-underline package provides underline text formatting functionality for Tiptap editors. This extension adds underline mark support with keyboard shortcuts, commands, and HTML parsing/rendering capabilities.

Package Information

  • Package Name: @tiptap/extension-underline
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tiptap/extension-underline

Core Imports

import { Underline } from "@tiptap/extension-underline";

Default import:

import Underline from "@tiptap/extension-underline";

For named imports with types:

import { Underline, UnderlineOptions } from "@tiptap/extension-underline";

Mixed imports (default + named):

import Underline, { UnderlineOptions } from "@tiptap/extension-underline";

CommonJS:

const { Underline } = require("@tiptap/extension-underline");

CommonJS default:

const Underline = require("@tiptap/extension-underline").default;

Basic Usage

import { Editor } from "@tiptap/core";
import { Underline } from "@tiptap/extension-underline";

// Add underline extension to editor
const editor = new Editor({
  extensions: [
    Underline,
    // other extensions...
  ],
});

// Use commands to apply underline formatting
editor.commands.setUnderline();      // Apply underline
editor.commands.toggleUnderline();   // Toggle underline
editor.commands.unsetUnderline();    // Remove underline

// Check if text is underlined
const isUnderlined = editor.isActive('underline');

Architecture

The underline extension follows Tiptap's standard mark extension pattern:

  • Mark Extension: Extends the base Mark class from @tiptap/core
  • Command Integration: Registers commands with the editor's command system
  • HTML Processing: Handles parsing and rendering of underline HTML elements
  • Keyboard Shortcuts: Provides Mod-u and Mod-U shortcuts for toggling underline
  • Type Safety: Full TypeScript support with proper type definitions

Capabilities

Extension Configuration

Configure the underline extension with custom HTML attributes.

interface UnderlineOptions {
  /**
   * HTML attributes to add to the underline element.
   * @default {}
   * @example { class: 'foo' }
   */
  HTMLAttributes: Record<string, any>;
}

Usage with custom options:

import { Underline } from "@tiptap/extension-underline";

const editor = new Editor({
  extensions: [
    Underline.configure({
      HTMLAttributes: {
        class: 'custom-underline',
        'data-type': 'emphasis',
      },
    }),
  ],
});

Underline Extension

The main extension class that provides underline functionality.

/**
 * This extension allows you to create underline text.
 * @see https://www.tiptap.dev/api/marks/underline
 */
const Underline: Mark<UnderlineOptions>;

Commands

The extension adds the following commands to the editor's command interface:

Set Underline

Apply underline mark to the current selection.

/**
 * Set an underline mark
 * @example editor.commands.setUnderline()
 */
setUnderline(): boolean;

Toggle Underline

Toggle underline mark on the current selection.

/**
 * Toggle an underline mark  
 * @example editor.commands.toggleUnderline()
 */
toggleUnderline(): boolean;

Unset Underline

Remove underline mark from the current selection.

/**
 * Unset an underline mark
 * @example editor.commands.unsetUnderline()
 */
unsetUnderline(): boolean;

Keyboard Shortcuts

The extension provides built-in keyboard shortcuts:

  • Mod-u: Toggle underline (Ctrl-u on Windows/Linux, Cmd-u on Mac)
  • Mod-U: Toggle underline (Ctrl-Shift-u on Windows/Linux, Cmd-Shift-u on Mac)

HTML Processing

The extension handles HTML parsing and rendering:

HTML Parsing: Recognizes the following HTML as underline marks:

  • <u> tags
  • Elements with text-decoration: underline CSS style

HTML Rendering: Outputs underlined text as:

<u>underlined text</u>

With custom HTML attributes:

<u class="custom-underline" data-type="emphasis">underlined text</u>

Types

/**
 * Configuration options for the underline extension
 */
interface UnderlineOptions {
  /**
   * HTML attributes to add to the underline element.
   * @default {}
   */
  HTMLAttributes: Record<string, any>;
}

/**
 * Underline extension commands added to the editor
 */
interface Commands<ReturnType> {
  underline: {
    setUnderline: () => ReturnType;
    toggleUnderline: () => ReturnType;
    unsetUnderline: () => ReturnType;
  };
}

Usage Examples

Basic Text Formatting

import { Editor } from "@tiptap/core";
import { Underline } from "@tiptap/extension-underline";

const editor = new Editor({
  extensions: [Underline],
  content: '<p>This text has <u>underlined</u> content.</p>',
});

// Apply underline to current selection
editor.commands.setUnderline();

// Check if current selection is underlined
if (editor.isActive('underline')) {
  console.log('Text is underlined');
}

Custom Styling

const editor = new Editor({
  extensions: [
    Underline.configure({
      HTMLAttributes: {
        class: 'fancy-underline',
        style: 'text-decoration-color: blue;',
      },
    }),
  ],
});

Programmatic Control

// Toggle underline on button click
document.getElementById('underline-button')?.addEventListener('click', () => {
  editor.commands.toggleUnderline();
});

// Remove all underline formatting
document.getElementById('clear-underline')?.addEventListener('click', () => {
  editor.commands.unsetUnderline();
});

docs

index.md

tile.json