or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-tiptap--extension-subscript

TipTap extension providing subscript text formatting with commands, keyboard shortcuts, and HTML parsing/rendering.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tiptap/extension-subscript@3.4.x

To install, run

npx @tessl/cli install tessl/npm-tiptap--extension-subscript@3.4.0

index.mddocs/

@tiptap/extension-subscript

The @tiptap/extension-subscript package provides subscript text formatting functionality for TipTap rich text editors. This extension allows users to create subscript text with keyboard shortcuts, programmatic commands, and automatic HTML parsing/rendering.

Package Information

  • Package Name: @tiptap/extension-subscript
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tiptap/extension-subscript
  • Peer Dependencies: @tiptap/core, @tiptap/pm

Core Imports

import { Subscript, SubscriptExtensionOptions } from '@tiptap/extension-subscript';

Default import:

import Subscript from '@tiptap/extension-subscript';

CommonJS:

const { Subscript } = require('@tiptap/extension-subscript');

Basic Usage

import { Editor } from '@tiptap/core';
import Subscript from '@tiptap/extension-subscript';

// Create editor with subscript extension
const editor = new Editor({
  extensions: [
    Subscript.configure({
      HTMLAttributes: {
        class: 'my-subscript',
      },
    }),
  ],
  content: '<p>H<sub>2</sub>O is water</p>',
});

// Use programmatic commands
editor.commands.toggleSubscript();
editor.commands.setSubscript();
editor.commands.unsetSubscript();

// Use keyboard shortcut: Mod-,

Capabilities

Extension Class

The main extension class that creates subscript functionality in TipTap editors.

/**
 * TipTap Mark extension that provides subscript text formatting
 */
declare const Subscript: Mark<SubscriptExtensionOptions>;

Configuration Options

Options interface for configuring the subscript extension.

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

Commands

Commands added to the TipTap editor for manipulating subscript marks.

interface Commands<ReturnType> {
  subscript: {
    /**
     * Set a subscript mark on the current selection
     * @example editor.commands.setSubscript()
     */
    setSubscript: () => ReturnType;
    
    /**
     * Toggle a subscript mark on the current selection
     * @example editor.commands.toggleSubscript()
     */
    toggleSubscript: () => ReturnType;
    
    /**
     * Remove subscript mark from the current selection
     * @example editor.commands.unsetSubscript()
     */
    unsetSubscript: () => ReturnType;
  };
}

HTML Parsing and Rendering

Supported HTML Input

The extension automatically parses:

  • <sub> HTML tags: H<sub>2</sub>O
  • CSS vertical-align: sub styles: <span style="vertical-align: sub">2</span>

HTML Output

All subscript content is rendered as <sub> elements with merged HTML attributes:

<sub class="my-subscript">2</sub>

Keyboard Shortcuts

  • Mod-, (Cmd+, on Mac, Ctrl+, on Windows/Linux): Toggles subscript formatting on the current selection

Usage Examples

Basic Subscript Formatting

import { Editor } from '@tiptap/core';
import Subscript from '@tiptap/extension-subscript';

const editor = new Editor({
  extensions: [Subscript],
  content: 'Type H2O and select the 2, then press Cmd-,',
});

// Programmatically apply subscript
editor.chain().focus().setSubscript().run();

Custom HTML Attributes

const editor = new Editor({
  extensions: [
    Subscript.configure({
      HTMLAttributes: {
        class: 'subscript-text',
        'data-type': 'subscript',
      },
    }),
  ],
});

Chemical Formulas and Mathematical Notation

// Perfect for scientific content
const chemistryEditor = new Editor({
  extensions: [Subscript],
  content: `
    <p>Water: H<sub>2</sub>O</p>
    <p>Carbon dioxide: CO<sub>2</sub></p>
    <p>Mathematical notation: x<sub>n</sub></p>
  `,
});

Types

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

type ReturnType = boolean;

interface Mark<T = any> {
  create<O extends Record<string, any>>(config: any): Mark<O>;
  configure(options?: Partial<T>): Mark<T>;
}