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
- Yarn
#
UsageClick 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>