Skip to main content

Line Height

The Line Height plugin enables support for line height adjustments within your Plate editor.

It allows you to set the line height for selected elements, such as paragraphs or headings, to improve readability and visual presentation.

Demo#

To apply a custom line height, click within a paragraph or header and use the toolbar button to select and apply the desired line height value.

import React from 'react';
import { LineWeight } from '@styled-icons/material/LineWeight';
import {
  createLineHeightPlugin,
  LineHeightToolbarDropdown,
  Plate,
  PlateProvider,
} from '@udecode/plate';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { lineHeightPlugin } from './line-height/lineHeightPlugin';
import { lineHeightValue } from './line-height/lineHeightValue';
import { Toolbar } from './toolbar/Toolbar';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins(
  [...basicNodesPlugins, createLineHeightPlugin(lineHeightPlugin)],
  {
    components: plateUI,
  }
);

export default () => (
  <PlateProvider<MyValue> plugins={plugins} initialValue={lineHeightValue}>
    <Toolbar>
      <LineHeightToolbarDropdown icon={<LineWeight />} />
    </Toolbar>

    <Plate<MyValue> editableProps={editableProps} />
  </PlateProvider>

Installation#

Follow these steps to integrate the line height plugin into your Plate editor:

  1. Install the required packages:
npm install @udecode/plate
# or
npm install @udecode/plate-line-height
npm install @udecode/plate-ui-line-height
  1. Import the plugin and include it in your plugin list:
import { createLineHeightPlugin } from '@udecode/plate';
const plugins = createPlugins([
// ...otherPlugins,
createLineHeightPlugin(lineHeightPlugin),
], {
components: createPlateUI(),
});

Source Code#

Edit this page