Subscript

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

Live Playground

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

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

Click to try it out

Plain editor without the theme. The buttons above call toggleSubscript(), setSubscript(), and unsetSubscript() directly.

Click to try it out

Usage

Subscript is not included in StarterKit. Add it separately:

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

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

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

const editor = new Editor({
  element: editorEl,
  extensions: [Document, Paragraph, Text, Subscript],
  content: '<p>Water is H<sub>2</sub>O.</p>',
});

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

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, Subscript } 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, Subscript];
  content = '<p>Water is H<sub>2</sub>O.</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, Subscript } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, Subscript]}
      content="<p>Water is H<sub>2</sub>O.</p>"
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

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

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, Subscript],
  content: '<p>Water is H<sub>2</sub>O.</p>',
});

// Toggle subscript programmatically
editor.chain().focus().toggleSubscript().run();

Schema

Property	Value
ProseMirror name	`subscript`
Type	Mark
HTML tag	`<sub>`

Parsing rules

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

Options

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

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

const CustomSubscript = Subscript.configure({
  HTMLAttributes: { class: 'my-subscript' },
});

Commands

setSubscript

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

editor.commands.setSubscript();

unsetSubscript

Removes subscript formatting from the current selection.

editor.commands.unsetSubscript();

toggleSubscript

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

editor.commands.toggleSubscript();

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

Keyboard shortcuts

Key	Action
`Mod-,`	Toggle subscript (`toggleSubscript`)

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

Input rules

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

Subscript registers a button in the toolbar with the name subscript in group format at priority 140.

Item	Type	Command	Icon	Shortcut	Active when
Subscript	`button`	`toggleSubscript`	`textSubscript`	`Mod-,`	Subscript mark is active on selection

Exports

import { Subscript } from '@domternal/core';
import type { SubscriptOptions } from '@domternal/core';

Export	Type	Description
`Subscript`	Mark extension	The subscript mark extension
`SubscriptOptions`	TypeScript type	Options for `Subscript.configure()`

Source

@domternal/core - Subscript.ts