Command Palette

Search for a command to run...

Indent List

Turn any block into a list item.

Indent List Toolbar Button
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate } from '@udecode/plate/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Plate offers two approaches for implementing lists:

  1. This Indent List plugin - Flexible indentation-based lists:

    • More like Word/Google Docs behavior
    • Any block can be indented to create list-like structures
    • Used in the AI editor
    • Better for free-form content organization

  2. The List plugin - Traditional HTML-spec lists with strict nesting rules:

    • Follows standard HTML list structure (ul/ol > li)
    • Maintains consistent list hierarchy
    • Best for content that may be exported to HTML/markdown
    • Highest complexity

Choose based on your needs:

  • Use the Indent List plugin when you want more flexible indentation behavior
  • Use the List plugin when you need standard HTML list compatibility

Features

  • Flexible Block Indentation:

    • Set list indentation for any block type (paragraphs, headings, etc.)
    • Transform any block into a list item through indentation
    • More intuitive Word/Google Docs-like behavior

  • Simplified Structure - Differs from the List plugin:

    • Flat DOM structure where each indented block is independent
    • Each indented list block consists of a single ul or ol with one item
    • No strict parent-child relationships enforced
    • Better for free-form content organization

  • List Types:

    • Bulleted lists (unordered)
    • Numbered lists (ordered)

  • Shortcuts:

    • Combined with the autoformat plugin, use markdown shortcuts (-, *, 1.) to create lists
    • Tab/Shift+Tab for indentation control

For more information about the underlying indentation system, see the Indent doc.

Installation

pnpm add @udecode/plate-indent-list @udecode/plate-indent

Usage

import { IndentPlugin } from '@udecode/plate-indent/react';
import { IndentListPlugin } from '@udecode/plate-indent-list/react';
import { HEADING_KEYS } from '@udecode/plate-heading';
import { HeadingPlugin } from '@udecode/plate-heading/react';
import { ParagraphPlugin } from '@udecode/plate/react';
 
const plugins = [
  // ...otherPlugins,
  HeadingPlugin,
  IndentPlugin.configure({
    inject: {
      targetPlugins: [ParagraphPlugin.key, HEADING_KEYS.h1],
    }
  }),
  IndentListPlugin.configure({
    inject: {
      targetPlugins: [ParagraphPlugin.key, HEADING_KEYS.h1],
    }
  }),
];

Plugins

IndentListPlugin

Options

Collapse all

    Function to determine indent list options for sibling elements.

    Function mapping HTML elements to list style types.

    Function to render components below indent list nodes.

API

getNextIndentList

Parameters

Collapse all

    Entry of the current element.

    Options for getting next indent list.

ReturnsNodeEntry | undefined

    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

    Entry of the current element.

    Options for getting previous indent list.

ReturnsNodeEntry | undefined

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

indentList

Increases the indentation of the selected blocks.

OptionsIndentListOptions

Collapse all

    List style type to use.

    • Default: ListStyleType.Disc

outdentList

Decreases the indentation of the selected blocks.

OptionsIndentListOptions

Collapse all

    List style type to use.

    • Default: ListStyleType.Disc

someIndentList

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

Parameters

Collapse all

    List style type to check.

toggleIndentList

Toggles the indent list.

OptionsIndentListOptions

Collapse all

    List style type to use.

    Override the number of the list item.

    Override the number of the list item, only taking effect if the list item is the first in the list.

Types

GetSiblingIndentListOptions

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

Options

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.

Hooks

useIndentListToolbarButton

A behavior hook for the indent list toolbar button.

State

Collapse all

    The list style type.

    Whether the button is pressed.

Returnsobject

Collapse all

    Props for the toolbar button.

IndentKeyboard Input