Skip to main content

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 using ul/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 install @udecode/plate
# or
npm install @udecode/plate-indent-list

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,
  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],
        },
      },
    }),
  ],
  {
    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} />
  <

Commands#

indentList#

  • Increase the list indentation of the selected blocks.

outdentList#

  • Decrease the list indentation of the selected blocks.

Source Code#

Edit this page