Indent List
Turn any block into a list item.
Features
- Set list indentation for various blocks.
- Differs from the List plugin with its flat structure and additional flexibility:
- Any block can be indented as a list.
- Each indented list block consists of a list (
ulorol) with a single item. - The list plugin enforces strict rules between parent and children.
- Refer to the Indent documentation for more information.
Installation
npm install @udecode/plate-indent-list @udecode/plate-indentUsage
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-common/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
A function to determine indent list options for sibling elements.
A function mapping HTML elements to list style types.
A function to render components below indent list nodes.
API
getNextIndentList
Parameters
The editor instance.
The entry of the current element.
Returns
The 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
The editor instance.
The entry of the current element.
Returns
The entry of the previous sibling with an indent list, or undefined if not
found.
indentList
Increases the indentation of the selected blocks.
Parameters
The editor instance.
Extends SetIndentOptions.
outdentList
Decreases the indentation of the selected blocks.
Parameters
The editor instance.
Extends SetIndentOptions.
someIndentList
Checks if some of the selected blocks have a specific list style type.
Parameters
The editor instance.
The list style type to check.
toggleIndentList
Toggles the indent list.
Parameters
The editor instance.
The options for toggling the indent list.
GetSiblingIndentListOptions
Used to provide options for getting the sibling indent list in a block of text.
Attributes
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.
API Components
useIndentListToolbarButton
A behavior hook for the indent list toolbar button.
State
The list style type.
A boolean indicating whether the button is pressed or not.
Returns
Customizable and extensible.