CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tiptap--extension-superscript

TipTap mark extension for creating superscript text formatting with keyboard shortcuts and HTML parsing.

—

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

TipTap Extension Superscript

The TipTap Extension Superscript provides superscript text formatting functionality for TipTap editors. It creates a mark extension that allows users to format text as superscript with keyboard shortcuts, HTML parsing, and programmatic commands.

Package Information

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

Core Imports

import { Superscript } from "@tiptap/extension-superscript";

For default import:

import Superscript from "@tiptap/extension-superscript";

For CommonJS:

const { Superscript } = require("@tiptap/extension-superscript");

Basic Usage

import { Editor } from "@tiptap/core";
import { Superscript } from "@tiptap/extension-superscript";

// Add to editor extensions
const editor = new Editor({
  extensions: [
    Superscript.configure({
      HTMLAttributes: {
        class: 'my-superscript-class',
      },
    }),
  ],
  content: '<p>E=mc<sup>2</sup></p>',
});

// Use commands programmatically
editor.commands.setSuperscript();
editor.commands.toggleSuperscript();
editor.commands.unsetSuperscript();

// Use keyboard shortcut: Cmd/Ctrl + .

Capabilities

Superscript Mark Extension

Creates a TipTap mark extension for superscript text formatting.

/**
 * Superscript mark extension for TipTap editors
 * Extends Mark.create with SuperscriptExtensionOptions
 */
const Superscript: Mark<SuperscriptExtensionOptions>;

Extension Configuration

Configure the superscript extension with HTML attributes and other options.

/**
 * Configuration options for the Superscript extension
 */
interface SuperscriptExtensionOptions {
  /**
   * HTML attributes to add to the superscript element
   * @default {}
   * @example { class: 'foo' }
   */
  HTMLAttributes: Record<string, any>;
}

Editor Commands

The extension adds three commands to the TipTap editor's command interface.

/**
 * Set a superscript mark on the current selection
 * @returns Command execution result
 * @example editor.commands.setSuperscript()
 */
setSuperscript(): boolean;

/**
 * Toggle a superscript mark on the current selection
 * @returns Command execution result  
 * @example editor.commands.toggleSuperscript()
 */
toggleSuperscript(): boolean;

/**
 * Unset/remove a superscript mark from the current selection
 * @returns Command execution result
 * @example editor.commands.unsetSuperscript()
 */
unsetSuperscript(): boolean;

HTML Parsing

The extension automatically parses HTML content containing superscript formatting.

Supported HTML Elements:

  • <sup> tags - Standard HTML superscript elements
  • Elements with vertical-align: super CSS style

HTML Rendering:

  • Renders superscript marks as <sup> elements
  • Merges configured HTMLAttributes with element attributes

Keyboard Shortcuts

Default Shortcut:

  • Cmd + . (Mac) / Ctrl + . (Windows/Linux) - Toggles superscript formatting

Usage Examples

Basic Superscript

import { Editor } from "@tiptap/core";
import { Superscript } from "@tiptap/extension-superscript";

const editor = new Editor({
  extensions: [Superscript],
  content: '<p>Water is H<sub>2</sub>O and E=mc<sup>2</sup></p>',
});

// Toggle superscript on selected text
editor.commands.toggleSuperscript();

Custom HTML Attributes

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

Programmatic Text Formatting

// Select text and apply superscript
editor
  .chain()
  .focus()
  .setTextSelection({ from: 1, to: 5 })
  .setSuperscript()
  .run();

// Remove superscript from selection
editor
  .chain()
  .focus()
  .setTextSelection({ from: 1, to: 5 })
  .unsetSuperscript()
  .run();

Types

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

/**
 * Superscript mark extension instance
 * Created using Mark.create<SuperscriptExtensionOptions>
 */
declare const Superscript: Mark<SuperscriptExtensionOptions>;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tiptap/extension-superscript@3.4.x
Publish Source
CLI
Badge
tessl/npm-tiptap--extension-superscript badge