Skip to main content

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 using ul/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.

Demo#

In 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} />
  <

Installation#

Follow these steps to integrate the indent list plugin into your Plate editor:

  1. Install the required packages:
npm install @udecode/plate
# or
npm install @udecode/plate-indent-list
  1. Import the plugin and include it in your plugin list:
import {
createHeadingPlugin,
createParagraphPlugin,
createResetNodePlugin,
createIndentPlugin,
createIndentListPlugin,
ELEMENT_H1,
ELEMENT_PARAGRAPH
} from '@udecode/plate';
const plugins = createPlugins([
// ...otherPlugins,
createHeadingPlugin(),
createParagraphPlugin(),
createIndentListPlugin({
inject: {
props: {
validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1],
},
},
}),
createIndentPlugin({
inject: {
props: {
validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1],
},
},
}),
createResetNodePlugin(),
], {
components: createPlateUI(),
});

Commands#

indentList#

  • Increase the list indentation of the selected blocks.

outdentList#

  • Decrease the list indentation of the selected blocks.

Source Code#

Edit this page