Line Height

Installation

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

• 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:

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

Installation

bunnpmpnpmyarn
pnpm add @platejs/basic-styles
Copy

Add Plugin

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

Copyimport { 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.

Copyimport { 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.