Skip to main content

Line Height

The line height plugin enables support for line height. You can use it to set the line height for the selected element as required.

Installation#

npm install @udecode/plate
# or
npm install @udecode/plate-line-height
npm install @udecode/plate-ui-line-height

Usage#

Click inside a paragraph or a header and click on a toolbar button to apply the desired line height.

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>

Source Code#

Edit this page