Alignment
The alignment plugin enables support for text alignment. You can use it to align your content to left, right, center or to justify it.
#
Installation- npm
- Yarn
#
UsageClick inside a paragraph or a header and click on a toolbar button to apply the desired text alignment.
import React from 'react'; import { createAlignPlugin, ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, ELEMENT_PARAGRAPH, Plate, PlateProvider, } from '@udecode/plate'; import { AlignToolbarButtons } from './align/AlignToolbarButtons'; import { alignValue } from './align/alignValue'; import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins'; import { editableProps } from './common/editableProps'; import { plateUI } from './common/plateUI'; import { Toolbar } from './toolbar/Toolbar'; import { createMyPlugins, MyValue } from './typescript/plateTypes'; const plugins = createMyPlugins( [ ...basicNodesPlugins, createAlignPlugin({ inject: { props: { validTypes: [ ELEMENT_PARAGRAPH, ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, ], }, }, }), ], { components: plateUI, } ); export default () => ( <PlateProvider<MyValue> initialValue={alignValue} plugins={plugins}> <Toolbar> <AlignToolbarButtons /> </Toolbar> <Plate<MyValue> editableProps={editableProps} /> </PlateProvider>