CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-udecode--plate-list

List plugin for Plate rich-text editor providing indent-based list functionality with comprehensive transforms, queries, and React hooks.

Pending
Overview
Eval results
Files

queries.mddocs/

List Queries

Functions for finding and analyzing list structures, sibling relationships, and list properties.

Capabilities

someList

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
]);

someTodoList

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;

getListAbove

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);
}

getListSiblings

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
  });
}

getNextList

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;

getPreviousList

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;

getSiblingList

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;

getSiblingListStyleType

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
  });
}

areEqListStyleType

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;

isOrderedList

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');
  }
}

Query Options

GetListSiblingsOptions

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;
}

GetSiblingListOptions

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;
}

Common Query Patterns

Finding List Context

// 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);
}

Checking List Types

// 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

docs

index.md

normalizers.md

plugins.md

queries.md

react-hooks.md

transforms.md

types.md

tile.json