āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/udecode/plate/(plugins)/(marks)/highlight ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
title: Highlight docs:
<mark> HTML element by defaultThe fastest way to add the highlight plugin is with the BasicMarksKit, which includes pre-configured HighlightPlugin along with other basic marks and their Plate UI components.
HighlightLeaf: Renders highlighted text elements.Add the kit to your plugins:
import { createPlateEditor } from 'platejs/react';
import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
...BasicMarksKit,
],
});
npm install @platejs/basic-nodes
Include HighlightPlugin in your Plate plugins array when creating the editor.
import { HighlightPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
HighlightPlugin,
],
});
You can configure the HighlightPlugin with a custom component and keyboard shortcuts.
import { HighlightPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
import { HighlightLeaf } from '@/components/ui/highlight-node';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
HighlightPlugin.configure({
node: { component: HighlightLeaf },
shortcuts: { toggle: { keys: 'mod+shift+h' } },
}),
],
});
node.component: Assigns HighlightLeaf to render highlighted text elements.shortcuts.toggle: Defines a keyboard shortcut to toggle highlight formatting.You can add MarkToolbarButton to your Toolbar to toggle highlight formatting.
HighlightPluginPlugin for highlight text formatting. Renders as <mark> HTML element by default.
tf.highlight.toggleToggles the highlight formatting for the selected text.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā