List plugin for Plate rich-text editor providing indent-based list functionality with comprehensive transforms, queries, and React hooks.
—
Functions for finding and analyzing list structures, sibling relationships, and list properties.
Checks if any node in the current selection matches the specified list type(s).
/**
* Checks if any node in selection matches the list type
* @param editor - The Slate editor instance
* @param type - List style type(s) to check for
* @returns True if any selected node has matching list type
*/
function someList(editor: SlateEditor, type: string[] | string): boolean;Usage Example:
import { someList, ListStyleType } from "@udecode/plate-list";
// Check for bullet lists
const hasBulletList = someList(editor, ListStyleType.Disc);
// Check for multiple list types
const hasNumberedLists = someList(editor, [
ListStyleType.Decimal,
ListStyleType.UpperRoman,
ListStyleType.LowerRoman
]);Checks if any node in the current selection is a todo list.
/**
* Checks if any node in selection is a todo list
* @param editor - The Slate editor instance
* @returns True if any selected node is a todo list
*/
function someTodoList(editor: SlateEditor): boolean;Gets the list node above the current selection.
/**
* Gets the list node above the current selection
* @param editor - The Slate editor instance
* @param options - Query options (excluding match)
* @returns The list node entry or undefined if not found
*/
function getListAbove<N extends ElementOf<E>, E extends Editor = Editor>(
editor: E,
options?: Omit<EditorAboveOptions, 'match'>
): NodeEntry<N> | undefined;Usage Example:
import { getListAbove } from "@udecode/plate-list";
// Get the current list item
const listItem = getListAbove(editor);
if (listItem) {
const [node, path] = listItem;
console.log('Current list item:', node);
}Gets all sibling list nodes (previous, current, next) relative to the given entry.
/**
* Gets all sibling list nodes (previous, current, next)
* @param editor - The Slate editor instance
* @param entry - The reference list entry
* @param options - Options for sibling retrieval
* @returns Array of sibling list node entries
*/
function getListSiblings<N extends ElementOf<E>, E extends Editor = Editor>(
editor: E,
entry: ElementEntryOf<E>,
options: GetListSiblingsOptions<N, E> = {}
): NodeEntry<N>[];Usage Example:
import { getListSiblings, getListAbove } from "@udecode/plate-list";
const currentList = getListAbove(editor);
if (currentList) {
// Get all siblings including current
const siblings = getListSiblings(editor, currentList, {
current: true,
next: true,
previous: true
});
// Get only previous siblings
const previousSiblings = getListSiblings(editor, currentList, {
previous: true
});
}Gets the next list node relative to the given entry.
/**
* Gets the next list node
* @param editor - The Slate editor instance
* @param entry - The reference list entry
* @param options - Options for sibling list queries
* @returns The next list node entry or undefined
*/
function getNextList<N extends ElementOf<E>, E extends Editor = Editor>(
editor: E,
entry: ElementEntryOf<E>,
options?: Partial<GetSiblingListOptions<N, E>>
): NodeEntry<N> | undefined;Gets the previous list node relative to the given entry.
/**
* Gets the previous list node
* @param editor - The Slate editor instance
* @param entry - The reference list entry
* @param options - Options for sibling list queries
* @returns The previous list node entry or undefined
*/
function getPreviousList<N extends ElementOf<E>, E extends Editor = Editor>(
editor: E,
entry: ElementEntryOf<E>,
options?: Partial<GetSiblingListOptions<N, E>>
): NodeEntry<N> | undefined;Gets the next sibling list node with matching listStyleType.
/**
* Gets the next sibling list node with matching listStyleType
* @param editor - The Slate editor instance
* @param entry - The reference list entry
* @param options - Options for sibling list matching
* @returns The matching sibling list node entry or undefined
*/
function getSiblingList<N extends ElementOf<E>, E extends Editor = Editor>(
editor: E,
entry: ElementEntryOf<E>,
options: GetSiblingListOptions<N, E>
): NodeEntry<N> | undefined;Gets the first sibling list style type at the given indent level.
/**
* Gets the first sibling list style type at the given indent
* @param editor - The Slate editor instance
* @param options - Options including entry, indent level, and sibling options
* @returns The sibling list style type
*/
function getSiblingListStyleType<E extends SlateEditor>(
editor: E,
options: {
entry: NodeEntry<TElement>;
indent: number;
} & GetListSiblingsOptions<ElementOf<E>, E>
): ListStyleType;Usage Example:
import { getSiblingListStyleType, getListAbove } from "@udecode/plate-list";
const currentList = getListAbove(editor);
if (currentList) {
// Get the list style type that siblings at indent level 2 should use
const siblingStyleType = getSiblingListStyleType(editor, {
entry: currentList,
indent: 2,
previous: true
});
}Checks if all entries have the same list style type.
/**
* Checks if all entries have the same list style type
* @param editor - The Slate editor instance
* @param entries - Array of node entries to check
* @param options - Options including the expected list style type
* @returns True if all entries have matching list style type
*/
function areEqListStyleType(
editor: Editor,
entries: NodeEntry[],
options: { listStyleType?: string }
): boolean;Determines if an element is an ordered list (numbered) or unordered list (bulleted).
/**
* Determines if an element is an ordered list
* @param element - The element to check
* @returns True if the element is an ordered list
*/
function isOrderedList(element: TElement): boolean;Usage Example:
import { isOrderedList, getListAbove } from "@udecode/plate-list";
const currentList = getListAbove(editor);
if (currentList) {
const [node] = currentList;
if (isOrderedList(node)) {
console.log('This is a numbered list');
} else {
console.log('This is a bulleted list');
}
}Options for getting multiple list siblings with fine-grained control.
/**
* Options for getting multiple list siblings
*/
interface GetListSiblingsOptions<N extends ElementOf<E>, E extends Editor = Editor>
extends Partial<GetSiblingListOptions<N, E>> {
/** Include current entry in results */
current?: boolean;
/** Include next siblings in results */
next?: boolean;
/** Include previous siblings in results */
previous?: boolean;
}Comprehensive options for sibling list queries with breaking conditions and custom logic.
/**
* Options for sibling list queries
*/
interface GetSiblingListOptions<N extends ElementOf<E>, E extends Editor = Editor> {
/** Break on equal indent with different list style type */
breakOnEqIndentNeqListStyleType?: boolean;
/** Break when encountering list restart markers */
breakOnListRestart?: boolean;
/** Break when encountering lower indentation levels */
breakOnLowerIndent?: boolean;
/** Custom break condition function */
breakQuery?: (siblingNode: TNode, currentNode: TNode) => boolean | undefined;
/** Custom function to get next entry */
getNextEntry?: (entry: NodeEntry<ElementOrTextOf<E>>) => NodeEntry<N> | undefined;
/** Custom function to get previous entry */
getPreviousEntry?: (entry: NodeEntry<ElementOrTextOf<E>>) => NodeEntry<N> | undefined;
/** Only get siblings with equal indentation */
eqIndent?: boolean;
/** Custom query function for sibling matching */
query?: (siblingNode: TNode, currentNode: TNode) => boolean | undefined;
}// Get current list item and its siblings
const currentList = getListAbove(editor);
if (currentList) {
const siblings = getListSiblings(editor, currentList, {
current: true,
next: true,
previous: true
});
const nextList = getNextList(editor, currentList);
const prevList = getPreviousList(editor, currentList);
}// Check what types of lists are selected
const hasAnyList = someList(editor, Object.values(ListStyleType));
const hasBulletList = someList(editor, ListStyleType.Disc);
const hasTodoList = someTodoList(editor);
// Check consistency across multiple entries
const entries = Array.from(Editor.nodes(editor, { match: n => n.listStyleType }));
const allSameType = areEqListStyleType(editor, entries, {
listStyleType: ListStyleType.Decimal
});Install with Tessl CLI
npx tessl i tessl/npm-udecode--plate-list