FrameworkJavaScript

Superscript & subscript: raised and lowered text

One toolbar button with a two-option popover. It toggles superscript (<sup>) or subscript (<sub>) on the selection. The two modes are mutually exclusive, so applying one removes the other. Shortcuts: Cmd/Ctrl+Period for superscript, Cmd/Ctrl+Comma for subscript.

Import

TypeScript

import { SupSub } from '@bloklabs/core/tools';

Save Data

TypeScript

// A mark on a run of the block's text field:
// { "text": "2", "marks": { "sup": true } } or { "text": "2", "marks": { "sub": true } }

JSON

{
  "type": "paragraph",
  "data": {
    "text": [{ "text": "E = mc" }, { "text": "2", "marks": { "sup": true } }]
  }
}

Usage Example

TypeScript

import { Blok } from '@bloklabs/core';
import { Paragraph, SupSub } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    // Paragraph is the default block and is not bundled with the core —
    // without it the editor starts with an "unsupported block" stub.
    paragraph: Paragraph,
    supSub: SupSub,
  },
});