Underline applies the underline leaf mark to selected text. UnderlinePlugin owns the mark key, shortcut, HTML parsing, render tag, and toggle transform.
underline leaf property owned by the PLUGINS.underline capability.⌘U / Ctrl+U shortcut.u and underline text decoration.<u> rendering by default.UnderlineRules.MarkToolbarButton.BasicMarksKit includes UnderlinePlugin, the underscore input rule, and the standard toolbar buttons that use the plugin descriptor.
'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 UnderlinePlugin to MarkToolbarButton so the button uses the configured mark key.
import { UnderlineIcon } from 'lucide-react';
import { UnderlinePlugin } from '@platejs/basic-nodes/react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function UnderlineToolbarButton() {
return (
<MarkToolbarButton plugin={UnderlinePlugin} tooltip="Underline (⌘+U)">
<UnderlineIcon />
</MarkToolbarButton>
);
}Install the mark package.
Add UnderlinePlugin directly when you do not want the whole kit.
import { UnderlinePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
export const editor = createPlateEditor({
plugins: [UnderlinePlugin],
});import { UnderlinePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
export const editor = createPlateEditor({
plugins: [UnderlinePlugin],
});Register the Markdown-style input rule when users should type underline delimiters.
import { UnderlineRules } from '@platejs/basic-nodes';
import { UnderlinePlugin } from '@platejs/basic-nodes/react';
export const underlinePlugin = UnderlinePlugin.configure({
inputRules: [UnderlineRules.markdown()],
});import { UnderlineRules } from '@platejs/basic-nodes';
import { UnderlinePlugin } from '@platejs/basic-nodes/react';
export const underlinePlugin = UnderlinePlugin.configure({
inputRules: [UnderlineRules.markdown()],
});| Surface | Owner | What It Does |
|---|---|---|
BaseUnderlinePlugin | @platejs/basic-nodes | Headless underline mark, HTML parser, render tag, and toggle transform. |
UnderlinePlugin | @platejs/basic-nodes/react | React wrapper with default mod+u shortcut. |
UnderlineRules.markdown | @platejs/basic-nodes | Optional mark input rule factory. |
BasicMarksKit | Registry | Adds UnderlinePlugin with the underscore input rule. |
MarkToolbarButton | Registry UI | Reads active mark state and calls the mark toggle hook. |
The package owns the mark. The registry owns toolbar placement and icon choice.
| Behavior | Source |
|---|---|
| Mark key | editor.plugin(UnderlinePlugin).schema.key (default: underline) |
| Mark declaration | schema.mark: property.boolean({ default: false, omitDefault: true }) |
| Toggle command | tx.underline.toggle() toggles the resolved schema key. |
| Shortcut | UnderlinePlugin registers mod+u. |
| HTML tags | u |
| HTML styles | text-decoration: underline |
| HTML guard | Ignores descendants where textDecoration is none. |
| Render output | u |
| API | Package | Use |
|---|---|---|
BaseUnderlinePlugin | @platejs/basic-nodes | Headless underline plugin. |
UnderlinePlugin | @platejs/basic-nodes/react | React underline plugin with shortcut defaults. |
UnderlineRules.markdown() | @platejs/basic-nodes | Creates the underline mark input rule. |
tx.underline.toggle() | @platejs/basic-nodes | Toggles the underline mark at the selection. |
import { UnderlineIcon } from 'lucide-react';
import { UnderlinePlugin } from '@platejs/basic-nodes/react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function UnderlineToolbarButton() {
return (
<MarkToolbarButton plugin={UnderlinePlugin} tooltip="Underline (⌘+U)">
<UnderlineIcon />
</MarkToolbarButton>
);
}