List

PreviewCode

Editing

✍️ 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



Edit link

1

100%

Installation

npm install @udecode/plate-list

Usage

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

Todo List

PreviewCode

Editing

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

Edit link

1

100%

Installation Todo List

npm install @udecode/plate-list

Usage Todo List

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

Keyboard Shortcuts

Plugins

ListPlugin

• key: 'list'
• Contains the following element plugins:
  • BulletedListPlugin
  • NumberedListPlugin
  • ListItemPlugin
  • ListItemContentPlugin

BulletedListPlugin

Plugin for unordered (bulleted) lists.

NumberedListPlugin

Plugin for ordered (numbered) lists.

ListItemPlugin

Plugin for list items.

ListItemContentPlugin

Plugin for list item content.

API

editor.tf.toggle.list

Toggles a list in the editor.

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.

getListItemEntry

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

getListRoot

Searches upward for the root list element.

getListTypes

Returns an array of list types supported by the editor.

hasListChild

Checks if a node has a list child.

indentListItems

Indents the list items in the editor.

insertListItem

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

insertTodoListItem

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

isAcrossListItems

Checks if the selection is across blocks with list items.

isListNested

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

isListRoot

Checks if a node is the root of a list.

moveListItemDown

Moves a list item down to the next list item.

moveListItemSublistItemsToListItemSublist

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

moveListItemUp

Moves a list item up.

moveListItems

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

moveListItemsToList

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

moveListSiblingsAfterCursor

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

removeFirstListItem

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

removeListItem

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

someList

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

unindentListItems

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

unwrapList

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

API Components

useListToolbarButton

A behavior hook for a list toolbar button.

API Todo List

getTodoListItemEntry

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

useTodoListElement

A behavior hook a todo list item element.