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…

Features

  • Block-level lineHeight storage.
  • HTML line-height style deserialization.
  • Default-value cleanup.
  • Configurable target block types.
  • Shared setLineHeight transform.
  • Registry dropdown toolbar driven by valid node values.

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 { KEYS } from 'platejs';
 
export const LineHeightKit = [
  LineHeightPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 1.5,
        validNodeValues: [1, 1.2, 1.5, 2, 3],
      },
      targetPlugins: [...KEYS.heading, KEYS.p],
    },
  }),
];
'use client';
 
import { LineHeightPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
 
export const LineHeightKit = [
  LineHeightPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 1.5,
        validNodeValues: [1, 1.2, 1.5, 2, 3],
      },
      targetPlugins: [...KEYS.heading, KEYS.p],
    },
  }),
];
import { createPlateEditor } from 'platejs/react';
 
import { LineHeightKit } from '@/components/editor/plugins/line-height-kit';
 
export const editor = createPlateEditor({
  plugins: [...LineHeightKit],
});
import { createPlateEditor } from 'platejs/react';
 
import { LineHeightKit } from '@/components/editor/plugins/line-height-kit';
 
export const editor = createPlateEditor({
  plugins: [...LineHeightKit],
});

Add the Toolbar Control

LineHeightToolbarButton reads defaultNodeValue and validNodeValues from the plugin inject props.

import { LineHeightToolbarButton } from '@/components/ui/line-height-toolbar-button';
 
export function LineHeightControls() {
  return <LineHeightToolbarButton />;
}
import { LineHeightToolbarButton } from '@/components/ui/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 { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
export const editor = createPlateEditor({
  plugins: [
    LineHeightPlugin.configure({
      inject: {
        nodeProps: {
          defaultNodeValue: 1.5,
          validNodeValues: [1, 1.2, 1.5, 2, 3],
        },
        targetPlugins: [...KEYS.heading, KEYS.p],
      },
    }),
  ],
});
import { LineHeightPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
export const editor = createPlateEditor({
  plugins: [
    LineHeightPlugin.configure({
      inject: {
        nodeProps: {
          defaultNodeValue: 1.5,
          validNodeValues: [1, 1.2, 1.5, 2, 3],
        },
        targetPlugins: [...KEYS.heading, KEYS.p],
      },
    }),
  ],
});

Set Line Height

Use the bound transform or the headless utility.

import { setLineHeight } from '@platejs/basic-styles';
 
editor.tf.lineHeight.setNodes(2);
 
setLineHeight(editor, 1.5, { at: [] });
import { setLineHeight } from '@platejs/basic-styles';
 
editor.tf.lineHeight.setNodes(2);
 
setLineHeight(editor, 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.
setLineHeight@platejs/basic-stylesSets or clears lineHeight on matching blocks.
tf.lineHeight.setNodes@platejs/basic-stylesBound transform 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.setNodes.

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

Behavior

BehaviorSource
Plugin keyKEYS.lineHeight
Stored propertylineHeight
Default target plugins[KEYS.p]
Registry target plugins[...KEYS.heading, KEYS.p]
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 setLineHeight.

HTML

The plugin injects an HTML deserializer into each target plugin. 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.tf.lineHeight.setNodes(value, options?)@platejs/basic-stylesSets or clears line height on matching blocks.
setLineHeight(editor, value, options?)@platejs/basic-stylesHeadless transform behind the bound API.

Options

OptionSurfaceUse
inject.targetPluginsLineHeightPluginBlock types that can keep lineHeight.
inject.nodeProps.nodeKeyBaseLineHeightPluginStored block property; defaults to lineHeight.
inject.nodeProps.defaultNodeValueBaseLineHeightPluginValue that clears the stored property when selected.
inject.nodeProps.validNodeValuesRegistry toolbarDropdown values used by LineHeightToolbarButton.
SetNodesOptionssetLineHeightSlate node update options passed to setNodes or unsetNodes.