From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Stream
    • Copilot
  • Discussion
    • Comments
    • Suggestion
    • Basic Blocks
      • Blockquote
      • Heading
      • Horizontal Rule
    • Callout
    • Code Block
    • Column
    • Date
    • Equation
    • Link
    • List Classic
    • Media
    • MentionElement
    • Table
    • Table of Contents
    • Footnote
    • Toggle
  • Marks
    • Bold
    • Italic
    • Underline
    • Code
    • Highlight
    • Keyboard Input
    • Strikethrough
    • Subscript
    • Superscript
      • Font
      • Line Height
      • Text Align
    • Indent
    • List
      • Exit Break
      • Single Block
      • Trailing Block
    • Autoformat
    • Block Menu
    • Block Placeholder
    • Combobox
      • Emoji
      • MentionElement
      • Slash Command
    • Cursor Overlay
    • Drag & Drop
    • Navigation Feedback
    • Tabbable
    • Toolbar
    • Yjs
    • Multi SelectEditor
    • CSV
    • DOCX
    • HTML
    • Markdown

Line Height

PreviousNext

Set block line height.

Line Height DemoLine Height Toolbar Button

LineHeightPlugin stores line height on blocks with a lineHeight property. Setting the default value removes the property, so saved values only carry overrides.

Loading…
FontText Align

On This Page

FeaturesKit UsageAdd the KitAdd the Toolbar ControlManual UsageInstall PackageAdd the PluginSet Line HeightOwnershipBehaviorHTMLAPI ReferenceOptions
Build your editor
Production-ready AI template and reusable components.
Get all-access

Features

  • Block-level lineHeight storage.
  • HTML line-height style deserialization.
  • Default-value cleanup.
  • Configurable target block types.
  • Bound editor.update.lineHeight.set method.
  • Registry dropdown toolbar driven by valid node values.
Report an issue

Kit Usage

Add the Kit

Use LineHeightKit for the Plate UI setup. It targets paragraphs and all heading levels, with valid values 1, 1.2, 1.5, 2, and 3.

'use client';
 
import { LineHeightPlugin } from '@platejs/basic-styles/react';
import { PLUGINS } from 'platejs';
 
export const LineHeightKit = [
  LineHeightPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 1.5,
        validNodeValues: [1, 1.2, 1.5, 2, 3],
      },
    },
    targetPlugins: [PLUGINS.heading, PLUGINS.paragraph],
  }),
];
'use client';
 
import { LineHeightPlugin } from '@platejs/basic-styles/react';
import { PLUGINS } from 'platejs';
 
export const LineHeightKit = [
  LineHeightPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 1.5,
        validNodeValues: [1, 1.2, 1.5, 2, 3],
      },
    },
    targetPlugins: [PLUGINS.heading, PLUGINS.paragraph],
  }),
];
import { createPlateEditor } from "platejs/react";
 
import { LineHeightKit } from "@/components/editor/line-height";
 
export const editor = createPlateEditor({
  plugins: [...LineHeightKit],
});
import { createPlateEditor } from "platejs/react";
 
import { LineHeightKit } from "@/components/editor/line-height";
 
export const editor = createPlateEditor({

Add the Toolbar Control

LineHeightToolbarButton reads defaultNodeValue and validNodeValues from the plugin inject props.

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 />;
}

Manual Usage

Install Package

pnpm add @platejs/basic-styles
pnpm add @platejs/basic-styles

Add the Plugin

Configure target block types and the values your UI should expose.

import { LineHeightPlugin } from "@platejs/basic-styles/react";
import { PLUGINS } from "platejs";
import { createPlateEditor } from "platejs/react";
 
export const editor = createPlateEditor({
  plugins: [
    LineHeightPlugin.configure({
      targetPlugins: [
        PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading,
        PLUGINS.paragraph,
      ],
      inject: {
        nodeProps: {
          defaultNodeValue: 1.5,
          validNodeValues: [1, 1.2, 1.5, 2, 3





import { LineHeightPlugin } from "@platejs/basic-styles/react";
import { PLUGINS } from "platejs";
import { createPlateEditor } from "platejs/react";
 
export const editor = createPlateEditor({
  plugins: [
    LineHeightPlugin.configure({
      targetPlugins: [
        PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading,
        PLUGINS.paragraph,
      ],
      inject: {
        nodeProps: {
          defaultNodeValue: 1.5,
          validNodeValues: [1, 1.2, 1.5

Set Line Height

Use the bound update method.

editor.update.lineHeight.set(2);
editor.update.lineHeight.set(1.5, { at: [] });
editor.update.lineHeight.set(2);
editor.update.lineHeight.set(1.5, { at: [] });

Ownership

SurfaceOwnerWhat It Does
BaseLineHeightPlugin@platejs/basic-stylesHeadless plugin that stores lineHeight, injects block props, and parses HTML line-height styles.
LineHeightPlugin@platejs/basic-styles/reactReact wrapper around BaseLineHeightPlugin.
editor.update.lineHeight.set@platejs/basic-stylesBound update method exposed by the plugin.
BaseLineHeightKitRegistry kitStatic/headless setup for paragraphs and headings.
LineHeightKitRegistry kitReact setup plus toolbar dependency.
LineHeightToolbarButtonRegistry UIDropdown that writes values through lineHeight.set.

The package owns line-height storage and parsing. The registry owns the dropdown UI and allowed value list.

Behavior

BehaviorSource
Plugin namePLUGINS.lineHeight
Stored propertylineHeight
Default target plugins[BaseParagraphPlugin]
Registry target plugins[PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.paragraph]
Default node value1.5
Registry valid values[1, 1.2, 1.5, 2, 3]
HTML parserReads element.style.lineHeight.
Setting a custom valueSets { lineHeight: value } on matching blocks.
Setting the default valueUnsets lineHeight on matching blocks.
Non-target blocksAre ignored by lineHeight.set.

HTML

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 stores the value on that block.

<p style="line-height: 2">Readable spacing</p>
<p style="line-height: 2">Readable spacing</p>

API Reference

APIPackageUse
LineHeightPlugin@platejs/basic-styles/reactReact line-height plugin.
BaseLineHeightPlugin@platejs/basic-stylesHeadless line-height plugin.
editor.update.lineHeight.set(value, options?)@platejs/basic-stylesSets or clears line height on matching blocks.
tx.lineHeight.set(value, options?)@platejs/basic-stylesTransaction form for a larger atomic update.

Options

OptionSurfaceUse
targetPluginsLineHeightPluginElement plugin descriptors or dynamic names whose nodes can keep lineHeight; injection is derived from this list.
inject.nodeProps.defaultNodeValueBaseLineHeightPluginValue that clears the stored property when selected.
inject.nodeProps.validNodeValuesRegistry toolbarDropdown values used by LineHeightToolbarButton.
optionseditor.update.lineHeight.setPlite node update options for the target range and matcher.
plugins: [
...
LineHeightKit],
});
],
},
},
}),
],
});
,
2
,
3
],
},
},
}),
],
});