āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/udecode/plate/(plugins)/(styles)/list ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
title: List docs:
-, *, 1.) to create lists.For more information about the underlying indentation system, see the Indent plugin.
</PackageInfo>The fastest way to add list functionality is with the ListKit, which includes pre-configured ListPlugin along with the required Indent plugin targeting paragraph, heading, blockquote, code block, and toggle elements.
BlockList: Renders list wrapper elements with support for todo lists.IndentKit for the underlying indentation system.Paragraph, Heading, Blockquote, CodeBlock, and Toggle elements to support list functionality.Add the kit to your plugins:
import { createPlateEditor } from 'platejs/react';
import { ListKit } from '@/components/editor/plugins/list-kit';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
...ListKit,
],
});
You can add ListToolbarButton to your Toolbar to create and manage lists.
You can add these items to the Turn Into Toolbar Button to convert blocks into lists:
{
icon: <ListIcon />,
label: 'Bulleted list',
value: KEYS.ul,
}
{
icon: <ListOrderedIcon />,
label: 'Numbered list',
value: KEYS.ol,
}
{
icon: <SquareIcon />,
label: 'To-do list',
value: KEYS.listTodo,
}
npm install @platejs/list @platejs/indent
Include both IndentPlugin and ListPlugin in your Plate plugins array when creating the editor. The List plugin depends on the Indent plugin.
import { IndentPlugin } from '@platejs/indent/react';
import { ListPlugin } from '@platejs/list/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
IndentPlugin,
ListPlugin,
],
});
You can configure both plugins to target specific elements and customize list behavior.
import { IndentPlugin } from '@platejs/indent/react';
import { ListPlugin } from '@platejs/list/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
import { BlockList } from '@/components/ui/block-list';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
IndentPlugin.configure({
inject: {
targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote, KEYS.codeBlock],
},
}),
ListPlugin.configure({
inject: {
targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote, KEYS.codeBlock],
},
render: {
belowNodes: BlockList,
},
}),
],
});
inject.targetPlugins: An array of plugin keys indicating which element types can become list items.render.belowNodes: Assigns BlockList to render list wrapper elements.ListPluginPlugin for creating and managing lists. It works with the Indent plugin to provide flexible list functionality where any block can be transformed into a list item through indentation.
<API name="ListPlugin"> <APIOptions> <APIItem name="getSiblingListOptions" type="GetSiblingListOptions<TElement>" optional> Function to determine indent list options for sibling elements. </APIItem> <APIItem name="getListStyleType" type="(element: HTMLElement) => ListStyleType" optional> Function mapping HTML elements to list style types. </APIItem> </APIOptions> </API>getNextListGets the next sibling entry with an indent list.
<API name="getNextList"> <APIParameters> <APIItem name="entry" type="ElementEntryOf"> Entry of the current element. </APIItem> <APIItem name="options" type="Partial<GetSiblingListOptions>" optional> Options for getting next indent list. </APIItem> </APIParameters> <APIReturns type="NodeEntry | undefined"> Entry of the next sibling with an indent list, or `undefined` if not found. </APIReturns> </API>getPreviousListGets the previous sibling entry with an indent list.
<API name="getPreviousList"> <APIParameters> <APIItem name="entry" type="ElementEntryOf"> Entry of the current element. </APIItem> <APIItem name="options" type="Partial<GetSiblingListOptions>" optional> Options for getting previous indent list. </APIItem> </APIParameters> <APIReturns type="NodeEntry | undefined"> Entry of the previous sibling with an indent list, or `undefined` if not found. </APIReturns> </API>indentListIncreases the indentation of the selected blocks.
<API name="indentList"> <APIOptions type="ListOptions"> <APIItem name="listStyleType" type="ListStyleType | string" optional> List style type to use. - **Default:** `ListStyleType.Disc` </APIItem> </APIOptions> </API>outdentListDecreases the indentation of the selected blocks.
<API name="outdentList"> <APIOptions type="ListOptions"> <APIItem name="listStyleType" type="ListStyleType | string" optional> List style type to use. - **Default:** `ListStyleType.Disc` </APIItem> </APIOptions> </API>someListChecks if some of the selected blocks have a specific list style type.
<API name="someList"> <APIParameters> <APIItem name="type" type="string | string[]"> List style type to check. </APIItem> </APIParameters> </API>toggleListToggles the indent list.
<API name="toggleList"> <APIOptions type="ListOptions"> <APIItem name="listStyleType" type="ListStyleType | string" optional> List style type to use. </APIItem> <APIItem name="listRestart" type="number" optional> Override the number of the list item. </APIItem> <APIItem name="listRestartPolite" type="number" optional> Override the number of the list item, only taking effect if the list item is the first in the list. </APIItem> </APIOptions> </API>GetSiblingListOptionsUsed to provide options for getting the sibling indent list in a block of text.
<API name="GetSiblingListOptions"> <APIOptions> <APIItem name="getPreviousEntry" type="function"> This function is used to get the previous sibling entry from a given entry. </APIItem> <APIItem name="getNextEntry" type="function"> This function is used to get the next sibling entry from a given entry. </APIItem> <APIItem name="query" type="function"> This function is used to validate a sibling node during the lookup process. If it returns false, the next sibling is checked. </APIItem> <APIItem name="eqIndent" type="boolean"> 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. </APIItem> <APIItem name="breakQuery" type="(node: TNode) => boolean | undefined"> 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. </APIItem> <APIItem name="breakOnLowerIndent" type="boolean"> 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. </APIItem> <APIItem name="breakOnEqIndentNeqListStyleType" type="boolean"> 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. </APIItem> </APIOptions> </API>useListToolbarButtonA behavior hook for the indent list toolbar button.
<API name="useListToolbarButton"> <APIState> <APIItem name="nodeType" type="string"> The list style type. </APIItem> <APIItem name="pressed" type="boolean"> Whether the button is pressed. </APIItem> </APIState> <APIReturns type="object"> <APIItem name="props" type="object"> Props for the toolbar button. <APISubList> <APISubListItem parent="props" name="pressed" type="boolean"> Whether the button is pressed. </APISubListItem> <APISubListItem parent="props" name="onClick" type="function"> Callback to handle the click event. Toggles the indent list of the specified node type and focuses the editor. </APISubListItem> </APISubList> </APIItem> </APIReturns> </API>ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā