Loading...
Features
- Apply underline formatting to text
- Keyboard shortcut support for quick formatting (
Cmd + U) - Renders as
<u>HTML element by default
Kit Usage
Installation
The fastest way to add the underline plugin is with the BasicMarksKit, which includes pre-configured UnderlinePlugin along with other basic marks and their Plate UI components.
Add Kit
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,
],
});Manual Usage
Installation
pnpm add @platejs/basic-nodes
Add Plugin
Include UnderlinePlugin in your Plate plugins array when creating the editor.
import { UnderlinePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
UnderlinePlugin,
],
});Configure Plugin
You can configure the UnderlinePlugin with custom keyboard shortcuts.
import { UnderlinePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
UnderlinePlugin.configure({
shortcuts: { toggle: 'mod+u' },
}),
],
});shortcuts.toggle: Defines a keyboard shortcut to toggle underline formatting.
Add Toolbar Button
You can add MarkToolbarButton to your Toolbar to toggle underline formatting.
Plugins
UnderlinePlugin
Plugin for underline text formatting. Renders as <u> HTML element by default.
Transforms
tf.underline.toggle
Toggles the underline formatting for the selected text.
Default Shortcut: Cmd + U