Line Height

PreviousNext
Line Height Toolbar Button
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Apply custom line height to block elements like paragraphs and headings.
  • Injects a lineHeight prop into targeted block elements.

Kit Usage

Installation

The fastest way to add line height functionality is with the LineHeightKit, which includes pre-configured LineHeightPlugin targeting paragraph and heading elements.

'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],
    },
  }),
];
  • Configures Paragraph and Heading elements (H1-H6) to support the lineHeight property.
  • Provides a default line height of 1.5 and valid values [1, 1.2, 1.5, 2, 3].

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { LineHeightKit } from '@/components/editor/plugins/line-height-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...LineHeightKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/basic-styles

Add Plugin

Include LineHeightPlugin in your Plate plugins array when creating the editor.

import { LineHeightPlugin } from '@platejs/basic-styles/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    LineHeightPlugin,
  ],
});

Configure Plugin

You can configure the LineHeightPlugin to target specific elements and define default or valid line height values.

import { LineHeightPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    LineHeightPlugin.configure({
      inject: {
        nodeProps: {
          defaultNodeValue: 1.5,
          validNodeValues: [1, 1.2, 1.5, 2, 3],
        },
        targetPlugins: [KEYS.p, KEYS.h1, KEYS.h2, KEYS.h3],
      },
    }),
  ],
});
  • inject.nodeProps.defaultNodeValue: Sets a default line height (e.g., 1.5).
  • inject.nodeProps.validNodeValues: Defines a list of common line height values, useful for toolbar dropdowns.
  • inject.targetPlugins: An array of plugin keys (e.g., KEYS.p, KEYS.h1) indicating which element types will receive the lineHeight prop.

Add Toolbar Button

You can add LineHeightToolbarButton to your Toolbar to control line height.

Plugins

LineHeightPlugin

Plugin for setting line height on blocks. It injects a lineHeight prop into the elements specified by inject.targetPlugins.

Optionsobject

Collapse all

    Default line height value.

    Array of valid line height values.

    Array of plugin keys to target for line height injection.

    • Default: ['p']

Transforms

tf.lineHeight.setNodes

Sets the line height for selected nodes in the editor.

Parameters

Collapse all

    The line height value.

    Options for the setNodes function.

FontText Align
Line Height - Plate