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.
#
DemoTo 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>
#
InstallationFollow these steps to integrate the line height plugin into your Plate editor:
- Install the required packages:
- npm
- Yarn
- Import the plugin and include it in your plugin list: