Highlight applies the highlight leaf mark to selected text. It is the authoring mark; Find Replace uses a separate search highlight leaf for transient search results.
BasicMarksKit includes HighlightPlugin, HighlightLeaf, == and ≡ input rules, and a mod+shift+h 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 HighlightPlugin to MarkToolbarButton so the button uses the configured mark key.
import { HighlighterIcon } from 'lucide-react';
import { HighlightPlugin } from '@platejs/basic-nodes/react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function HighlightToolbarButton() {
return (
<MarkToolbarButton plugin={HighlightPlugin} tooltip="Highlight">
<HighlighterIcon />
</MarkToolbarButton>
);
}Install the mark package.
Add HighlightPlugin directly when you want the default <mark> render.
import { HighlightPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
export const editor = createPlateEditor({
plugins: [HighlightPlugin],
});import { HighlightPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
export const editor = createPlateEditor({
plugins: [HighlightPlugin],
});Configure the registry leaf, input rules, and shortcut when you want the same behavior as the kit.
import { HighlightRules } from '@platejs/basic-nodes';
import { HighlightPlugin } from '@platejs/basic-nodes/react';
import { HighlightLeaf } from '@/components/editor/highlight';
export const highlightPlugin = HighlightPlugin.configure({
component: HighlightLeaf,
inputRules: [
HighlightRules.markdown({ variant: '==' }),
HighlightRules.markdown({ variant: '≡' }),
],
shortcuts: { toggle: { keys: 'mod+shift+h' } },
});import { HighlightRules } from '@platejs/basic-nodes';
import { HighlightPlugin } from '@platejs/basic-nodes/react';
import { HighlightLeaf } from '@/components/editor/highlight';
export const highlightPlugin = HighlightPlugin.configure({
component: HighlightLeaf,
inputRules: [
HighlightRules.markdown({ variant: '==' }),
HighlightRules.markdown({ variant: '≡' }),
],
shortcuts: { toggle: { keys: 'mod+shift+h' } },
});| Surface | Owner | What It Does |
|---|---|---|
BaseHighlightPlugin | @platejs/basic-nodes | Headless highlight mark, HTML parser, render tag, selection rule, and toggle transform. |
HighlightPlugin | @platejs/basic-nodes/react | React wrapper for the headless highlight mark. |
HighlightRules.markdown | @platejs/basic-nodes | Optional mark input rule factory. |
HighlightLeaf | Registry UI | Styled client highlight leaf using PlateLeaf. |
HighlightLeafStatic | Registry UI | Static rendering version using PliteLeaf. |
BasicMarksKit | Registry | Adds HighlightPlugin, HighlightLeaf, two input-rule variants, and mod+shift+h. |
MarkToolbarButton | Registry UI | Reads active mark state and calls the mark toggle hook. |
The package owns the mark. The registry owns highlight color and toolbar placement.
| Behavior | Source |
|---|---|
| Mark key | editor.plugin(HighlightPlugin).schema.key (default: highlight) |
| Mark declaration | schema.mark: property.boolean({ default: false, omitDefault: true }) |
| Toggle command | tx.highlight.toggle() toggles the resolved schema key. |
| Selection affinity | directional |
| HTML tags | mark |
| Render output | mark |
| Kit input rules | == and ≡ variants |
| Kit shortcut | mod+shift+h |
| API | Package | Use |
|---|---|---|
BaseHighlightPlugin | @platejs/basic-nodes | Headless highlight plugin. |
HighlightPlugin | @platejs/basic-nodes/react | React highlight plugin. |
HighlightRules.markdown(options) | @platejs/basic-nodes | Creates a highlight mark input rule. |
tx.highlight.toggle() | @platejs/basic-nodes | Toggles the highlight mark at the selection. |
HighlightLeaf | Registry UI | Styled client highlight leaf. |
HighlightLeafStatic | Registry UI | Styled static highlight leaf. |
import { HighlighterIcon } from 'lucide-react';
import { HighlightPlugin } from '@platejs/basic-nodes/react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function HighlightToolbarButton() {
return (
<MarkToolbarButton plugin={HighlightPlugin} tooltip="Highlight">
<HighlighterIcon />
</MarkToolbarButton>
);
}