Subscript is the 'sub' value of Plate's script mark. ScriptPlugin owns both script positions, so switching to superscript replaces the value instead of coordinating two boolean marks.
BasicMarksKit includes ScriptPlugin, the subscript input rule, and a mod+comma 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 subscript value to MarkToolbarButton.
import { ScriptPlugin } from '@platejs/basic-nodes/react';
import { SubscriptIcon } from 'lucide-react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function SubscriptToolbarButton() {
return (
<MarkToolbarButton
plugin={ScriptPlugin}
value="sub"
tooltip="Subscript"
>
<SubscriptIcon />
</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: 'sub' })],
}),
],
});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: 'sub' })],
}),
],
});Toggle subscript from application code with the typed value.
editor.update.script.toggle('sub');editor.update.script.toggle('sub');| 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: 'sub' }) | Creates the subscript input rule. |
editor.update.script.toggle('sub') | Applies subscript or removes it when already active. |
import { ScriptPlugin } from '@platejs/basic-nodes/react';
import { SubscriptIcon } from 'lucide-react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function SubscriptToolbarButton() {
return (
<MarkToolbarButton
plugin={ScriptPlugin}
value="sub"
tooltip="Subscript"
>
<SubscriptIcon />
</MarkToolbarButton>
);
}