Indent List
The list indentation feature allows you to set list indentation for blocks such as paragraphs or headings.
The "indent list" plugin differs from the "list" plugin:
- the list plugin has a nested structure ("list" block having "list item" block children) whereas the indent list plugin has a flat structure, resulting into different queries and transforms
- any block can be indented as a list
- the rendered block tags stay the same (e.g.
div
) instead of usingul
/ol
- the indent list plugin has more freedom by default but anyone can extend it to reproduce the list plugin rules. The list plugin has strict rules between parent and children
#
Installation- npm
- Yarn
#
Usage- See Indent.
createIndentPlugin
sets the indentation style (margin left).createIndentListPlugin
sets the list style (display: list-item
)- Use 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 { FormatListBulleted } from '@styled-icons/material/FormatListBulleted'; import { FormatListNumbered } from '@styled-icons/material/FormatListNumbered'; import { createHeadingPlugin, createIndentListPlugin, createIndentPlugin, createParagraphPlugin, createResetNodePlugin, ELEMENT_H1, ELEMENT_PARAGRAPH, Plate, PlateProvider, StyledElement, toggleIndentList, ToolbarButton, withProps, } from '@udecode/plate'; import { editableProps } from './common/editableProps'; import { plateUI } from './common/plateUI'; import { IndentToolbarButtons } from './indent/IndentToolbarButtons'; import { indentListPlugin } from './indent-list/indentListPlugin'; import { indentListValue } from './indent-list/indentListValue'; import { Toolbar } from './toolbar/Toolbar'; import { createMyPlugins, MyValue, useMyPlateEditorRef, } from './typescript/plateTypes'; const plugins = createMyPlugins( [ createHeadingPlugin(), createParagraphPlugin({ component: withProps(StyledElement, { as: 'div', styles: { root: { margin: 0, padding: '4px 0', }, }, }), }), createIndentListPlugin(indentListPlugin), createIndentPlugin({ inject: { props: { validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1], }, }, }), createResetNodePlugin(), ], { components: plateUI, } ); const ToolbarButtons = () => { const editor = useMyPlateEditorRef(); return ( <> <ToolbarButton onMouseDown={(e) => { e.preventDefault(); toggleIndentList(editor, { listStyleType: 'disc', }); }} icon={<FormatListBulleted />} /> <ToolbarButton onMouseDown={(e) => { e.preventDefault(); toggleIndentList(editor, { listStyleType: 'decimal', }); }} icon={<FormatListNumbered />} /> <IndentToolbarButtons /> </> ); }; export default () => ( <PlateProvider<MyValue> plugins={plugins} initialValue={indentListValue} normalizeInitialValue > <Toolbar> <ToolbarButtons /> </Toolbar> <Plate<MyValue> editableProps={editableProps} /> <
#
CommandsindentList
#
- Increase the list indentation of the selected blocks.
outdentList
#
- Decrease the list indentation of the selected blocks.