Docs
Indent List

Indent List

Turn any block into a list item.

Indent List Toolbar Button

Indent List

Create indented lists with multiple levels of indentation and customize the list style type for each level.
    1. Roman 1
    1. Decimal 11
    1. Decimal 111
    1. Decimal 112
    1. Decimal 12
    1. Decimal 13
    1. Roman 2
    1. Decimal 11
    1. Decimal 12
    1. Roman 3
    1. Roman 4

Features

  • Set list indentation for various blocks.
  • Differs from the List plugin with its flat structure and additional flexibility:
    • Any block can be indented as a list.
    • Each indented list block consists of a list (ul or ol) with a single item.
    • The list plugin enforces strict rules between parent and children.
  • Refer to the Indent documentation for more information.

Installation

npm install @udecode/plate-indent-list @udecode/plate-indent

Usage

// ...
import { createIndentPlugin } from '@udecode/plate-indent';
import { createIndentListPlugin } from '@udecode/plate-indent-list';
 
const plugins = [
  // ...otherPlugins,
  createHeadingPlugin(),
  createParagraphPlugin(),
  createIndentPlugin({
    inject: {
      props: {
        validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1],
      },
    },
  }),
  createIndentListPlugin({
    inject: {
      props: {
        validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1],
      },
    },
  }),
];

API

createIndentListPlugin

Options

Collapse all

    A function to determine indent list options for sibling elements.

    A function mapping HTML elements to list style types.

getNextIndentList

Parameters

Collapse all

    The editor instance.

    The entry of the current element.

Returns

Collapse all

    The entry of the next sibling with an indent list, or undefined if not found.

getPreviousIndentList

Gets the previous sibling entry with an indent list.

Parameters

Collapse all

    The editor instance.

    The entry of the current element.

Returns

Collapse all

    The entry of the previous sibling with an indent list, or undefined if not found.

indentList

Increases the indentation of the selected blocks.

Parameters

Collapse all

    The editor instance.

    Extends SetIndentOptions.

outdentList

Decreases the indentation of the selected blocks.

Parameters

Collapse all

    The editor instance.

    Extends SetIndentOptions.

someIndentList

Checks if some of the selected blocks have a specific list style type.

Parameters

Collapse all

    The editor instance.

    The list style type to check.

toggleIndentList

Toggles the indent list.

Parameters

Collapse all

    The editor instance.

    The options for toggling the indent list.

GetSiblingIndentListOptions

Used to provide options for getting the sibling indent list in a block of text.

Attributes

Collapse all

    This function is used to get the previous sibling entry from a given entry.

    This function is used to get the next sibling entry from a given entry.

    This function is used to validate a sibling node during the lookup process. If it returns false, the next sibling is checked.

    Indicates whether to break the lookup when the sibling node has an indent level equal to the current node. If true, the lookup stops when a sibling node with the same indent level is found.

    A function that takes a TNode and returns a boolean value or undefined. This function is used to specify a condition under which the lookup process should be stopped.

    Indicates whether to break the lookup when a sibling node with a lower indent level is found. If true, the lookup stops when a sibling node with a lower indent level is found.

    Indicates whether to break the lookup when a sibling node with the same indent level but a different list style type is found. If true, the lookup stops when such a sibling node is found.

API Components

useIndentListToolbarButton

A behavior hook for the indent list toolbar button.

State

Collapse all

    The list style type.

    A boolean indicating whether the button is pressed or not.

Returns

Collapse all

IndentLine Height