LineHeightPlugin stores line height on blocks as a positive number in a lineHeight property. A block without one follows the theme's line height.
lineHeight storage as a positive number.line-height parsing into a line-height multiplier.editor.update.lineHeight.set and editor.update.lineHeight.clear methods.Use LineHeightKit for live and static Plate UI setups. The server-safe kit targets paragraphs and all heading levels.
import { BaseLineHeightPlugin, PLUGINS } from 'platejs';
export const LineHeightKit = [
BaseLineHeightPlugin.configure({
targetPlugins: [PLUGINS.heading, PLUGINS.paragraph],
}),
] as const;import { BaseLineHeightPlugin, PLUGINS } from 'platejs';
export const LineHeightKit = [
BaseLineHeightPlugin.configure({
targetPlugins: [PLUGINS.heading, PLUGINS.paragraph],
}),
] as const;import { createEditor } from "platejs/react";
import { LineHeightKit } from "@/components/editor/line-height";
export const editor = createEditor({
plugins: [...LineHeightKit],
});import { createEditor } from "platejs/react";
import { LineHeightKit } from "@/components/editor/line-height";
export const editor = createEditor({
Install LineHeightToolbarButton separately when the editor needs a line-height control.
The dropdown lists the presets 1, 1.2, 1.5, 2, and 3 from its own file, plus a Default item that clears the value. Blocks with no line height check Default, and a selection with mixed values checks nothing.
import { LineHeightToolbarButton } from "@/components/editor/line-height-toolbar-button";
export function LineHeightControls() {
return <LineHeightToolbarButton />;
}import { LineHeightToolbarButton } from "@/components/editor/line-height-toolbar-button";
export function LineHeightControls() {
return <LineHeightToolbarButton />;
}Configure the blocks that can store line height.
import { BaseLineHeightPlugin, PLUGINS } from "platejs";
import { createEditor } from "platejs/react";
export const editor = createEditor({
plugins: [
BaseLineHeightPlugin.configure({
targetPlugins: [
PLUGINS.heading,
PLUGINS.paragraph,
],
}),
],
});import { BaseLineHeightPlugin, PLUGINS } from "platejs";
import { createEditor } from "platejs/react";
export const editor = createEditor({
plugins: [
BaseLineHeightPlugin.configure({
targetPlugins: [
PLUGINS.heading,
PLUGINS.paragraph,
],
}),
],
});Use the bound update methods. clear removes the property, so the block follows the theme.
editor.update.lineHeight.set(2);
editor.update.lineHeight.clear({ at: [] });editor.update.lineHeight.set(2);
editor.update.lineHeight.clear({ at: [] });| Surface | Owner | What It Does |
|---|---|---|
BaseLineHeightPlugin | platejs | Headless plugin that stores lineHeight, injects block props, and parses HTML line-height styles. |
LineHeightPlugin | platejs/react | React wrapper around BaseLineHeightPlugin. |
editor.update.lineHeight.set | platejs | Bound update method that saves a line height. |
editor.update.lineHeight.clear | platejs | Bound update method that removes a line height. |
LineHeightKit | Registry kit | Server-safe setup shared by live and static kits. |
LineHeightToolbarButton | Registry UI | Dropdown that writes presets through lineHeight.set and Default through lineHeight.clear. |
The package owns line-height storage and parsing. The registry owns the dropdown UI and its presets.
| Behavior | Source |
|---|---|
| Plugin name | PLUGINS.lineHeight |
| Stored property | lineHeight |
| Stored value | A positive finite number. |
| Default target plugins | [BaseParagraphPlugin] |
| Registry target plugins | [PLUGINS.heading, PLUGINS.paragraph] |
| Rendering | Every stored value renders as CSS line-height. |
| HTML parser | Parses element.style.lineHeight, as HTML shows. |
| Setting a value | Sets { lineHeight: value } on matching blocks. |
| Clearing | Unsets lineHeight on matching blocks. |
| Non-target blocks | Are ignored by lineHeight.set and lineHeight.clear. |
targetPlugins is the schema placement truth. The plugin derives
its render and HTML-parser injection targets from the same list. When pasted
HTML contains an inline line-height style on a target block, Plate parses it
into a multiplier and stores that number on the block.
<p style="line-height: 150%">Readable spacing</p><p style="line-height: 150%">Readable spacing</p>| Pasted CSS line height | Saved value | Diagnostic |
|---|---|---|
1.5, 150%, 1.5em | 1.5 | none |
107% from Word | 1.07 | none |
normal, another keyword, calc() or var() | nothing, so the block follows the theme | a dropped-property warning |
24px, 18pt, 1.5rem | nothing, so the block follows the theme | a dropped-property warning |
| zero | nothing | a dropped-property warning |
| a negative number or other invalid CSS | nothing | none in a browser, a dropped-property warning on the server |
A browser drops a negative number or other invalid CSS before Plate reads the style, so that paste saves nothing and warns about nothing. platejs/html/server keeps those declarations, so a server parse warns about them too.
The warning arrives with the paste's other HTML diagnostics.
| API | Package | Use |
|---|---|---|
LineHeightPlugin | platejs/react | React line-height plugin. |
BaseLineHeightPlugin | platejs | Headless line-height plugin. |
editor.update.lineHeight.set(value, options?) | platejs | Sets line height on matching blocks. |
editor.update.lineHeight.clear(options?) | platejs | Removes line height from matching blocks. |
tx.lineHeight.set(value, options?) | platejs | Transaction form for a larger atomic update. |
tx.lineHeight.clear(options?) | platejs | Transaction form of clear. |
| Option | Surface | Use |
|---|---|---|
targetPlugins | BaseLineHeightPlugin | Element plugin descriptors or dynamic names whose nodes can keep lineHeight; injection is derived from this list. |
options | editor.update.lineHeight.set, editor.update.lineHeight.clear | Plate node update options for the target range and matcher. |