Superscript

The Superscript mark applies superscript formatting to text. It renders as <sup> and parses <sup> tags and CSS vertical-align: super. Superscript and Subscript are mutually exclusive: applying one automatically removes the other. Not included in StarterKit - must be added separately.

When to use

Use Superscript when you need:

Exponents and ordinals (x², 1ˢᵗ, 2ⁿᵈ)
Trademark and copyright markers (™, ®)
Footnote markers when rendered numerically

Notes:

Superscript and Subscript are mutually exclusive: applying one removes the other on the same range
Not in StarterKit; add explicitly when scientific or legal content is expected

Live Playground

Select text and apply superscript with buttons or keyboard shortcut (Cmd+. / Ctrl+.).

Themed
Headless

With the default theme enabled. Click the superscript toolbar button or use Cmd+. / Ctrl+..

Click to try it out

Plain editor without the theme. The buttons above call toggleSuperscript(), setSuperscript(), and unsetSuperscript() directly.

Click to try it out

Usage

Superscript is not included in StarterKit. Add it separately:

import { Document, Paragraph, Text, Superscript } from '@domternal/core';
import { DomternalEditor, DomternalToolbar } from '@domternal/vanilla';
import '@domternal/theme';

const editorEl = document.getElementById('editor')!;
const toolbarEl = document.createElement('div');
editorEl.before(toolbarEl);

const dm = new DomternalEditor(editorEl, {
  extensions: [Document, Paragraph, Text, Superscript],
  content: '<p>Einstein\'s equation: E=mc<sup>2</sup>.</p>',
});

new DomternalToolbar(toolbarEl, { editor: dm.editor });

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, Superscript } from '@domternal/core';

@Component({
  selector: 'app-editor',
  imports: [DomternalEditorComponent, DomternalToolbarComponent],
  templateUrl: './editor.html',
})
export class EditorComponent {
  editor = signal<Editor | null>(null);
  extensions = [Document, Paragraph, Text, Superscript];
  content = '<p>Einstein\'s equation: E=mc<sup>2</sup>.</p>';
}

@if (editor(); as ed) {
  <domternal-toolbar [editor]="ed" />
}
<domternal-editor
  [extensions]="extensions"
  [content]="content"
  (editorCreated)="editor.set($event)"
/>

import { Domternal } from '@domternal/react';
import { Document, Paragraph, Text, Superscript } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, Superscript]}
      content={"<p>Einstein's equation: E=mc<sup>2</sup>.</p>"}
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

<script setup lang="ts">
import { Domternal } from '@domternal/vue';
import { Document, Paragraph, Text, Superscript } from '@domternal/core';

const extensions = [Document, Paragraph, Text, Superscript];
</script>

<template>
  <Domternal :extensions="extensions" content="<p>Einstein's equation: E=mc<sup>2</sup>.</p>">
    <Domternal.Toolbar />
    <Domternal.Content />
  </Domternal>
</template>

import { Editor, Document, Paragraph, Text, Superscript } from '@domternal/core';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, Superscript],
  content: '<p>Einstein\'s equation: E=mc<sup>2</sup>.</p>',
});

// Toggle superscript programmatically
editor.chain().focus().toggleSuperscript().run();

Schema

Property	Value
ProseMirror name	`superscript`
Type	Mark
HTML tag	`<sup>`
Group	`formatting`
Excludes	`''` (nothing: sub/superscript mutual exclusion lives in the commands, see below)

The two rows work in opposite directions. Superscript excludes nothing itself, but it carries the formatting group, and inline Code declares excludes: 'formatting', so code strips superscript from the range it is applied to and <code><sup>2</sup></code> parses as plain code. See Excluding third-party marks.

Parsing rules

Source	Condition
`<sup>`	Always
CSS `vertical-align`	Value is `super`

Options

Option	Type	Default	Description
`HTMLAttributes`	`Record<string, unknown>`	`{}`	Custom HTML attributes added to the rendered `<sup>` element

import { Superscript } from '@domternal/core';

const CustomSuperscript = Superscript.configure({
  HTMLAttributes: { class: 'my-superscript' },
});

Commands

setSuperscript

Applies superscript formatting to the current selection. Automatically removes subscript from the selection first.

editor.commands.setSuperscript();

unsetSuperscript

Removes superscript formatting from the current selection.

editor.commands.unsetSuperscript();

toggleSuperscript

Toggles superscript formatting on the current selection. Automatically removes subscript before applying superscript.

editor.commands.toggleSuperscript();

// With chaining
editor.chain().focus().toggleSuperscript().run();

Keyboard shortcuts

Key	Action
`Mod-.`	Toggle superscript (`toggleSuperscript`)

Mod is Cmd on macOS and Ctrl on Windows/Linux.

Input rules

Superscript has no input rules. Use the keyboard shortcut or toolbar button to apply formatting.

Superscript registers a button in the toolbar with the name superscript in group format at priority 130.

Item	Type	Command	Icon	Shortcut	Active when
Superscript	`button`	`toggleSuperscript`	`textSuperscript`	`Mod-.`	Superscript mark is active on selection

Exports

import { Superscript } from '@domternal/core';
import type { SuperscriptOptions } from '@domternal/core';

Export	Type	Description
`Superscript`	Mark extension	The superscript mark extension
`SuperscriptOptions`	TypeScript type	Options for `Superscript.configure()`

Source

@domternal/core - Superscript.ts