Docs
List

List

Organize nestable items in a bulleted or numbered list.

List ElementList Toolbar ButtonTodo List Element

✍️ List


  • Cats
  • Dogs
  • Birds
    • Parrots
    • Owls
      • Barn Owls
      • Snowy Owls
  1. Red
  2. Blue
    • Light blue
    • Dark blue
      1. Navy blue
      2. Turquoise blue
  3. Green


Features

  • Supports both unordered (bulleted) and ordered (numbered) lists.
  • Supports nesting to create complex hierarchical list structures.
  • Combined with the autoformat plugin, use markdown shortcuts (-, *, 1.) to create lists.

Installation

npm install @udecode/plate-list

Usage

import { createListPlugin } from '@udecode/plate-list';
 
const plugins = [
  // ...otherPlugins,
  createListPlugin(),
];

Todo List

Each block is a React component in which you can manage the state:
Create a "banana language" translation plugin
Create a "detect sarcasm" plugin (good luck with that)
Create an AI auto-complete plugin


Installation Todo List

npm install @udecode/plate-list

Usage Todo List

import { createTodoListPlugin } from '@udecode/plate-list';
 
const plugins = [
  // ...otherPlugins,
  createTodoListPlugin(),
];

Keyboard Interactions

KeyDescription
Cmd + Opt + 4Insert a numbered list.
Cmd + Shift + 4Insert a numbered list.

API

createListPlugin

  • key: 'list'
  • Contains the following element plugins:
    • ELEMENT_UL: plugin options below.
    • ELEMENT_OL: plugin options below.
    • ELEMENT_LI
    • ELEMENT_LIC

Options

Collapse all

    Specifies valid child node types for list items, in addition to p and ul types.

    Determines whether pressing Shift+Tab should reset the list indent level.

getHighestEmptyList

Finds the highest end list that can be deleted. The path of the list should be different from diffListPath. If the highest end list has 2 or more items, returns liPath. It traverses up the parent lists until:

  • The list has less than 2 items.
  • Its path is not equal to diffListPath.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    The path of the highest end list that can be deleted.

getListItemEntry

Returns the nearest li and ul/ol wrapping node entries for a given path (default = selection).

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    The nearest li and ul/ol wrapping node entries.

getListRoot

Searches upward for the root list element.

Parameters

Collapse all

    The editor instance.

    The location to start the search from. If not provided, uses the current selection.

    • Default: editor.selection

Returns

Collapse all

    The root list element entry.

getListTypes

Returns an array of list types supported by the editor.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    The list types.

hasListChild

Checks if a node has a list child.

Parameters

Collapse all

    The editor instance.

    The node to check.

Returns

Collapse all

    true if the node has a list child, false otherwise.

indentListItems

Indents the list items in the editor.

Parameters

Collapse all

    The editor instance.

insertListItem

Inserts a list item if the selection is in an li>p element.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    true if the list items were indented, false otherwise.

insertTodoListItem

Inserts a todo list item if the selection is in an li>p element.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    true if the list items were indented, false otherwise.

isAcrossListItems

Checks if the selection is across blocks with list items.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    true if the selection is across blocks with list items, false otherwise.

isListNested

Checks if the list is nested, i.e., its parent is a list item.

Parameters

Collapse all

    The editor instance.

    The path of the list.

Returns

Collapse all

    true if the list is nested, false otherwise.

isListRoot

Checks if a node is the root of a list.

Parameters

Collapse all

    The editor instance.

    The node to check.

Returns

Collapse all

    true if the node is the root of a list, false otherwise.

moveListItemDown

Moves a list item down to the next list item.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    true if the list item was moved, false otherwise.

moveListItemSublistItemsToListItemSublist

Moves sublist items from one list item to another list item's sublist.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    The number of sublist items moved.

moveListItemUp

Moves a list item up.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    true if the list item was moved, false otherwise.

moveListItems

Moves the selected list items up or down within their respective lists or increases/decreases their indentation level.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    true if the list items were moved, false otherwise.

moveListItemsToList

Moves the list items from a sublist or a list to another list.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    true if the list items were moved, false otherwise.

moveListSiblingsAfterCursor

Moves the list siblings after the cursor position to a specified path.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    The number of list siblings moved.

removeFirstListItem

Removes the first list item if the list is not nested and the list item is not the first child.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    true if the list item was removed, false otherwise.

removeListItem

Removes a list item and moves its sublist to the parent list if any.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    true if the list item was removed, false otherwise.

someList

Checks if the current selection is inside a list of a specific type.

Parameters

Collapse all

    The editor instance.

    The type of list to check.

Returns

Collapse all

    true if the selection is inside a list of the specified type, false otherwise.

toggleList

Toggles a list in the editor.

Parameters

Collapse all

    The editor instance.

unindentListItems

Decreases the indentation level of the list items in the editor.

Parameters

Collapse all

    The editor instance.

    The target path at which to unindent the list items. If not provided, the list items will be unindented at the current selection.

unwrapList

Removes the list formatting from the selected list items or the list items at the specified path.

Parameters

Collapse all

    The editor instance.

API Components

useListToolbarButton

A behavior hook for a list toolbar button.

State

Collapse all

    The pressed state of the button.

    The node type of the list.

    • Default: ELEMENT_UL

Returns

Collapse all

API Todo List

getTodoListItemEntry

Returns the nearest list and list item node entries for a given path (default = selection) in a todo list.

Parameters

Collapse all

    The editor instance.

Returns

    • If a list item is found at the given location, it returns an object with the list and listItem node entries.

    • If no list item is found, it returns undefined.

useTodoListElement

A behavior hook a todo list item element.

State

Collapse all

    The checked state of the todo list item.

    Whether the todo list item is read-only.

    The todo list item element.

    The editor instance.

Returns

Collapse all

LinkMedia