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

With Slate you can build complex block types that have their own embedded content and behaviors, like rendering checkboxes inside check list items!
Slide to the left.
Slide to the right.
Criss-cross.
Criss-cross.
Cha cha real smooth…
Let's go to work!


Installation Todo List

npm install @udecode/plate-list

Usage Todo List

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

API

createListPlugin

Attributes

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

getListItemEntry

getListRoot

getListTypes

hasListChild

indentListItems

insertListItem

insertTodoListItem

isAcrossListItems

isListNested

isListRoot

moveListItemDown

moveListItemSublistItemsToListItemSublist

moveListItemUp

moveListItems

moveListItemsToList

moveListSiblingsAfterCursor

removeFirstListItem

removeListItem

someList

toggleList

unindentListItems

unwrapList

API Components

useListToolbarButton

API Todo List

Attributes

Collapse all

    Determines whether a new todo item created at the start of a line should inherit the check state of the previous item.

    Determines whether a new todo item created at the end of a line should inherit the check state of the current item.

getTodoListItemEntry

useTodoListElement

Keyboard Interactions

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