Indent
The block indentation feature allows you to set indentation for blocks such as paragraphs or headings.
Its main purpose is to visually distinguish parts of the content. Block indentation is mostly useful for graphically differentiate structure elements.
#
Installation- npm
- Yarn
#
UsageUse the indent or outdent toolbar buttons in the editor below to control the level of indentation of the content, both for paragraph text and headers.
import React from 'react'; import { createIndentPlugin, Plate, PlateProvider } from '@udecode/plate'; import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins'; import { editableProps } from './common/editableProps'; import { plateUI } from './common/plateUI'; import { indentPlugin } from './indent/indentPlugin'; import { IndentToolbarButtons } from './indent/IndentToolbarButtons'; import { indentValue } from './indent/indentValue'; import { Toolbar } from './toolbar/Toolbar'; import { createMyPlugins, MyValue } from './typescript/plateTypes'; const plugins = createMyPlugins( [...basicNodesPlugins, createIndentPlugin(indentPlugin)], { components: plateUI, } ); export default () => ( <PlateProvider<MyValue> initialValue={indentValue} plugins={plugins}> <Toolbar> <IndentToolbarButtons /> </Toolbar> <Plate<MyValue> editableProps={editableProps} /> </PlateProvider>
#
Optionsoffset
and unit
#
- By default, the block indentation plugin increases or decreases the current indentation by the given
offset
, using the givenunit
. - The above demo is using the default configuration, which defines a
24px
indentation step. - Default is
24
indentMax
#
- You generally want to set a maximum number of indentation so the text stays readable.
- Using
indentMax: 5
will limit the indent to 5 levels. - Default is
'px'
#
Commandsindent
#
- Increase the indentation of the selected blocks.
outdent
#
- Decrease the indentation of the selected blocks