tessl/npm-tiptap--extension-superscript

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

—

Pending

Overview

Eval results

Files

TipTap Extension Superscript

Name: tessl/npm-tiptap--extension-superscript
Author: tessl

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>;

Install with Tessl CLI

npx tessl i tessl/npm-tiptap--extension-superscript

Workspace: tessl
Visibility: Public
Created: 6 months ago
Last updated: about 1 month ago
Describes: pkg:npm/@tiptap/extension-superscript@3.4.x
Badge