Skip to content
ProseKit

Subscript

The subscript mark is used to represent text that is subscripted (lowered below the baseline). It will be rendered as <sub> element in HTML.

'use client'

import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'

import { createEditor, type NodeJSON } from 'prosekit/core'
import { ProseKit } from 'prosekit/react'
import { useMemo } from 'react'

import { sampleContent } from '../../sample/sample-doc-sub-sup'

import { defineExtension } from './extension'
import Toolbar from './toolbar'

interface EditorProps {
  initialContent?: NodeJSON
}

export default function Editor(props: EditorProps) {
  const defaultContent = props.initialContent ?? sampleContent
  const editor = useMemo(() => {
    const extension = defineExtension()
    return createEditor({ extension, defaultContent })
  }, [defaultContent])

  return (
    <ProseKit editor={editor}>
      <div className="box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-[canvas] text-black dark:text-white">
        <Toolbar />
        <div className="relative w-full flex-1 box-border overflow-y-auto">
          <div ref={editor.mount} className="ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500"></div>
        </div>
      </div>
    </ProseKit>
  )
}

Commands

Section titled “Commands”

toggleSubscript

Section titled “toggleSubscript”
editorconst editor: Editor<SubscriptExtension>.commands
Editor<SubscriptExtension>.commands: ToCommandAction<{
    toggleSubscript: [];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.toggleSubscript
toggleSubscript: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

Input Rules

Section titled “Input Rules”

Input rules are not included by default. You can add them manually using defineMarkInputRule from prosekit/extensions/input-rule:

import { canUseRegexLookbehindconst canUseRegexLookbehind: () => boolean
Checks if the browser supports [regex lookbehind assertion](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Lookbehind_assertion).
, unionfunction union<const E extends readonly Extension[]>(...exts: E): Union<E> (+1 overload)
Merges multiple extensions into one. You can pass multiple extensions as
arguments or a single array containing multiple extensions.
@throwsIf no extensions are provided.@example```ts
function defineFancyNodes() {
  return union(
    defineFancyParagraph(),
    defineFancyHeading(),
  )
}
```@example```ts
function defineFancyNodes() {
  return union([
    defineFancyParagraph(),
    defineFancyHeading(),
  ])
}
```
 } from 'prosekit/core'
import { defineMarkInputRulefunction defineMarkInputRule(options: MarkInputRuleOptions): PlainExtension
Defines an input rule for automatically adding inline marks when a given
pattern is typed.
 } from 'prosekit/extensions/input-rule'
import { defineSubscriptfunction defineSubscript(): SubscriptExtension } from 'prosekit/extensions/subscript'

const extensionconst extension: Union<readonly [SubscriptExtension, PlainExtension]> = unionunion<readonly [SubscriptExtension, PlainExtension]>(exts_0: SubscriptExtension, exts_1: PlainExtension): Union<readonly [SubscriptExtension, PlainExtension]> (+1 overload)
Merges multiple extensions into one. You can pass multiple extensions as
arguments or a single array containing multiple extensions.
@throwsIf no extensions are provided.@example```ts
function defineFancyNodes() {
  return union(
    defineFancyParagraph(),
    defineFancyHeading(),
  )
}
```@example```ts
function defineFancyNodes() {
  return union([
    defineFancyParagraph(),
    defineFancyHeading(),
  ])
}
```
(
  defineSubscriptfunction defineSubscript(): SubscriptExtension(),
  defineMarkInputRulefunction defineMarkInputRule(options: MarkInputRuleOptions): PlainExtension
Defines an input rule for automatically adding inline marks when a given
pattern is typed.
({
    regexMarkInputRuleOptions.regex: RegExp
The regular expression to match against, which should end with `$` and has
exactly one capture group. All other matched text outside the capture group
will be deleted.
: canUseRegexLookbehindfunction canUseRegexLookbehind(): boolean
Checks if the browser supports [regex lookbehind assertion](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Lookbehind_assertion).
()
      ? /(?<=\s|^)~([^\s~]|[^\s~][^~]*[^\s~])~$/
      : /~([^\s~]|[^\s~][^~]*[^\s~])~$/,
    typeMarkInputRuleOptions.type: string | MarkType
The type of mark to set.
: 'subscript',
  }),
)

Typing ~text~ followed by a space will automatically convert the text to subscript.

API Reference

Section titled “API Reference”