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.ts'

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

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.
: new RegExp
var RegExp: RegExpConstructor
new (pattern: RegExp | string, flags?: string) => RegExp (+2 overloads)
(
      (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).
() ? Stringvar String: StringConstructor
Allows manipulation and formatting of text strings and determination and location of substrings within strings.
.raw
StringConstructor.raw(template: {
    raw: readonly string[] | ArrayLike<string>;
}, ...substitutions: any[]): string
String.raw is usually used as a tag function of a Tagged Template String. When called as
such, the first argument will be a well formed template call site object and the rest
parameter will contain the substitution values. It can also be called directly, for example,
to interleave strings and values from your own tag function, and in this case the only thing
it needs from the first argument is the raw property.
@paramtemplate A well-formed template string call site representation.@paramsubstitutions A set of substitution values.
`(?<=\s|^)` : '')
        + Stringvar String: StringConstructor
Allows manipulation and formatting of text strings and determination and location of substrings within strings.
.raw
StringConstructor.raw(template: {
    raw: readonly string[] | ArrayLike<string>;
}, ...substitutions: any[]): string
String.raw is usually used as a tag function of a Tagged Template String. When called as
such, the first argument will be a well formed template call site object and the rest
parameter will contain the substitution values. It can also be called directly, for example,
to interleave strings and values from your own tag function, and in this case the only thing
it needs from the first argument is the raw property.
@paramtemplate A well-formed template string call site representation.@paramsubstitutions A set of substitution values.
`~([^\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”