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.

Live Playground

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

Vanilla JS/TS

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

Click to try it out

Angular

Click to try it out

Vanilla JS preview - Angular components produce the same output

React

Click to try it out

Vanilla JS preview - React components produce the same output

Headless

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:

Vanilla JS/TS

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

const editorEl = document.getElementById('editor')!;

// Toolbar with superscript button
const toolbar = document.createElement('div');
toolbar.className = 'dm-toolbar';
toolbar.innerHTML = `<div class="dm-toolbar-group">
  <button class="dm-toolbar-button" data-mark="superscript">${defaultIcons.textSuperscript}</button>
</div>`;
editorEl.before(toolbar);

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

toolbar.addEventListener('click', (e) => {
  const btn = (e.target as Element).closest<HTMLButtonElement>('[data-mark]');
  if (btn) editor.chain().focus().toggleSuperscript().run();
});

Angular

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

editor.html

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

React

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

Headless

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>

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

Note

The mutual exclusion between Superscript and Subscript is handled in the commands (not at the schema level) so that can() dry-run checks work correctly for toolbar disabled states.

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.

Toolbar items

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