Indent List
The List Indent plugin allows you to set list indentation for various content blocks, such as paragraphs or headings.
It differs from the "list" plugin in several ways:
- The list plugin has a nested structure (a "list" block containing "list item" block children), while the indent list plugin has a flat structure, resulting in different queries and transforms.
- Any block can be indented as a list.
- Rendered block tags remain the same (e.g.,
div
) instead of usingul
/ol
. - The indent list plugin offers more flexibility by default, but can be extended to reproduce the list plugin rules. The list plugin enforces strict rules between parent and children.
Refer to the Indent documentation.
#
DemoIn the editor below, use the indent or outdent toolbar buttons to control the level of indentation for various content types, including 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} /> <
#
InstallationFollow these steps to integrate the indent list plugin into your Plate editor:
- Install the required packages:
- npm
- Yarn
- Import the plugin and include it in your plugin list:
#
CommandsindentList
#
- Increase the list indentation of the selected blocks.
outdentList
#
- Decrease the list indentation of the selected blocks.