Superscript is the 'sup' value of Plate's script mark. ScriptPlugin owns both script positions, so switching to subscript replaces the value instead of coordinating two boolean marks.
BasicMarksKit includes ScriptPlugin, the superscript input rule, and a mod+period shortcut.
'use client';
import {
BoldRules,
CodeRules,
HighlightRules,
ItalicRules,
MarkComboRules,
ScriptRules,
StrikethroughRules,
UnderlineRules,
} from '@platejs/basic-nodes';
import {
BoldPlugin,
CodePlugin,
HighlightPlugin,
ItalicPlugin,
KbdPlugin,
ScriptPlugin,
StrikethroughPlugin,
UnderlinePlugin,
} from '@platejs/basic-nodes/react';
import { CodeLeaf } from '@/components/editor/code';
import { HighlightLeaf } from '@/components/editor/highlight';
import { KbdLeaf } from '@/components/editor/kbd';
export const BasicMarksKit = [
BoldPlugin.configure({
inputRules: [
BoldRules.markdown({ variant: '*' }),
BoldRules.markdown({ variant: '_' }),
MarkComboRules.markdown({ variant: 'boldItalic' }),
MarkComboRules.markdown({ variant: 'boldUnderline' }),
MarkComboRules.markdown({ variant: 'boldItalicUnderline' }),
MarkComboRules.markdown({ variant: 'italicUnderline' }),
],
}),
ItalicPlugin.configure({
inputRules: [
ItalicRules.markdown({ variant: '*' }),
ItalicRules.markdown({ variant: '_' }),
],
}),
UnderlinePlugin.configure({
inputRules: [UnderlineRules.markdown()],
}),
CodePlugin.configure({
component: CodeLeaf,
inputRules: [CodeRules.markdown()],
shortcuts: { toggle: { keys: 'mod+e' } },
}),
StrikethroughPlugin.configure({
inputRules: [StrikethroughRules.markdown()],
shortcuts: { toggle: { keys: 'mod+shift+x' } },
}),
ScriptPlugin.configure({
inputRules: [
ScriptRules.markdown({ value: 'sub' }),
ScriptRules.markdown({ value: 'sup' }),
],
shortcuts: {
subscript: {
keys: 'mod+comma',
handler: ({ editor }) => {
editor.plugin(ScriptPlugin).update.toggle('sub');
},
},
superscript: {
keys: 'mod+period',
handler: ({ editor }) => {
editor.plugin(ScriptPlugin).update.toggle('sup');
},
},
},
}),
HighlightPlugin.configure({
component: HighlightLeaf,
inputRules: [
HighlightRules.markdown({ variant: '==' }),
HighlightRules.markdown({ variant: '≡' }),
],
shortcuts: { toggle: { keys: 'mod+shift+h' } },
}),
KbdPlugin.configure({ component: KbdLeaf }),
] as const;'use client';
import {
BoldRules,
CodeRules,
HighlightRules,
ItalicRules,
MarkComboRules,
ScriptRules,
StrikethroughRules,
UnderlineRules,
} from '@platejs/basic-nodes';
import {
BoldPlugin,
CodePlugin,
HighlightPlugin,
ItalicPlugin,
KbdPlugin,
ScriptPlugin,
StrikethroughPlugin,
UnderlinePlugin,
} from '@platejs/basic-nodes/react';
import { CodeLeaf } from '@/components/editor/code';
import { HighlightLeaf } from '@/components/editor/highlight';
import { createPlateEditor } from 'platejs/react';
import { BasicMarksKit } from '@/components/editor/basic-marks';
export const editor = createPlateEditor({
plugins: [...BasicMarksKit],
});import { createPlateEditor } from 'platejs/react';
import { BasicMarksKit } from '@/components/editor/basic-marks';
export const editor = createPlateEditor({
Pass the shared plugin and the superscript value to MarkToolbarButton.
import { ScriptPlugin } from '@platejs/basic-nodes/react';
import { SuperscriptIcon } from 'lucide-react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function SuperscriptToolbarButton() {
return (
<MarkToolbarButton
plugin={ScriptPlugin}
value="sup"
tooltip="Superscript"
>
<SuperscriptIcon />
</MarkToolbarButton>
);
}Install the mark package.
Add the shared script plugin and configure only the input rule you need.
import { ScriptRules } from '@platejs/basic-nodes';
import { ScriptPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
export const editor = createPlateEditor({
plugins: [
ScriptPlugin.configure({
inputRules: [ScriptRules.markdown({ value: 'sup' })],
}),
],
});import { ScriptRules } from '@platejs/basic-nodes';
import { ScriptPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
export const editor = createPlateEditor({
plugins: [
ScriptPlugin.configure({
inputRules: [ScriptRules.markdown({ value: 'sup' })],
}),
],
});Toggle superscript from application code with the typed value.
editor.update.script.toggle('sup');editor.update.script.toggle('sup');| Surface | Owner | What It Does |
|---|---|---|
BaseScriptPlugin | @platejs/basic-nodes | Declares the enum mark, HTML codec, selection rule, and typed toggle. |
ScriptPlugin | @platejs/basic-nodes/react | Renders 'sub' as <sub> and 'sup' as <sup>. |
ScriptRules.markdown | @platejs/basic-nodes | Creates a value-aware ~x~ or ^x^ input rule. |
BasicMarksKit | Registry | Configures both input rules and shortcuts. |
MarkToolbarButton | Registry UI | Toggles the requested script value. |
| API | Use |
|---|---|
editor.plugin(ScriptPlugin).schema.key | The configured text property (default: script). |
ScriptPlugin | Shared React plugin for subscript and superscript. |
ScriptRules.markdown({ value: 'sup' }) | Creates the superscript input rule. |
editor.update.script.toggle('sup') | Applies superscript or removes it when already active. |
import { ScriptPlugin } from '@platejs/basic-nodes/react';
import { SuperscriptIcon } from 'lucide-react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function SuperscriptToolbarButton() {
return (
<MarkToolbarButton
plugin={ScriptPlugin}
value="sup"
tooltip="Superscript"
>
<SuperscriptIcon />
</MarkToolbarButton>
);
}