or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdnormalizers.mdplugins.mdqueries.mdreact-hooks.mdtransforms.mdtypes.md
tile.json

tessl/npm-udecode--plate-list

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@udecode/plate-list@49.0.x

To install, run

npx @tessl/cli install tessl/npm-udecode--plate-list@49.0.0

index.mddocs/

Plate List Plugin

Plate List Plugin provides comprehensive list functionality for the Plate rich-text editor. It implements an indent-based "flat list" system where list structures have no nested children but use indentation levels to create hierarchy. The plugin supports 59 different list style types, comprehensive list manipulation transforms, query functions, and React hooks for UI integration.

Package Information

  • Package Name: @udecode/plate-list
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @udecode/plate-list

Core Imports

import { 
  BaseListPlugin, 
  ListStyleType, 
  toggleList, 
  someList, 
  indentList, 
  outdentList,
  indentTodo,
  withList,
  getListAbove
} from "@udecode/plate-list";

For React-specific features:

import { 
  ListPlugin, 
  useListToolbarButton, 
  useListToolbarButtonState,
  useTodoListElement,
  useTodoListElementState,
  useIndentTodoToolBarButton,
  useIndentTodoToolBarButtonState
} from "@udecode/plate-list/react";

CommonJS:

const { BaseListPlugin, ListStyleType, toggleList } = require("@udecode/plate-list");

Basic Usage

import { createPlateEditor } from "@udecode/plate";
import { BaseListPlugin, ListStyleType, toggleList } from "@udecode/plate-list";

// Add list plugin to editor
const editor = createPlateEditor({
  plugins: [BaseListPlugin],
});

// Toggle bullet list on selected blocks
toggleList(editor, {
  listStyleType: ListStyleType.Disc,
});

// Toggle numbered list
toggleList(editor, {
  listStyleType: ListStyleType.Decimal,
});

// Check if selection contains lists
const hasLists = someList(editor, ListStyleType.Disc);

Architecture

The Plate List Plugin is built around several key components:

  • Plugin System: BaseListPlugin for core functionality, ListPlugin for React integration
  • Transform Operations: Functions for indenting, outdenting, and toggling list formatting
  • Query System: Functions for finding and analyzing list structures and relationships
  • Type System: Comprehensive enum with 59 list style types supporting international numbering
  • React Integration: Hooks for building list toolbar buttons and todo list components
  • Normalization Engine: Automatic maintenance of consistent list structure and numbering

Capabilities

Plugin Configuration

Core plugin setup and configuration options for integrating list functionality into Plate editor.

export const BaseListPlugin: TSlatePlugin<BaseListConfig>;
export const ListPlugin: PlatePlugin<ListConfig>; // React version

export type BaseListConfig = PluginConfig<
  'list',
  {
    getSiblingListOptions?: GetSiblingListOptions<TElement>;
    getListStyleType?: (element: HTMLElement) => ListStyleType;
  }
>;

Plugin Configuration

List Queries

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

function someList(editor: SlateEditor, type: string[] | string): boolean;
function getListAbove<N extends ElementOf<E>, E extends Editor = Editor>(
  editor: E,
  options?: Omit<EditorAboveOptions, 'match'>
): NodeEntry<N> | undefined;
function getListSiblings<N extends ElementOf<E>, E extends Editor = Editor>(
  editor: E,
  entry: ElementEntryOf<E>,
  options: GetListSiblingsOptions<N, E>
): NodeEntry[];

List Queries

List Transforms

Transform operations for manipulating list formatting, indentation, and structure.

function toggleList<N extends ElementOf<E>, E extends SlateEditor = SlateEditor>(
  editor: E,
  options: ListOptions,
  getSiblingListOptions?: GetSiblingListOptions<N, E>
): void;
function indentList(editor: SlateEditor, options: ListOptions): void;
function outdentList(editor: SlateEditor, options: ListOptions): void;

List Transforms

React Hooks

React hooks for building list UI components and toolbar buttons.

function useListToolbarButton(
  state: ReturnType<typeof useListToolbarButtonState>
): {
  props: {
    pressed: boolean;
    onClick: () => void;
    onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => void;
  };
};
function useTodoListElement(
  state: ReturnType<typeof useTodoListElementState>
): {
  checkboxProps: {
    checked: boolean;
    onCheckedChange: (value: boolean) => void;
    onMouseDown: (e: any) => void;
  };
};
function useIndentTodoToolBarButton(
  state: ReturnType<typeof useIndentTodoToolBarButtonState>
): {
  props: {
    pressed: boolean;
    onClick: () => void;
    onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => void;
  };
};

React Hooks

List Normalizers

Automatic maintenance functions that ensure consistent list structure and numbering.

function normalizeListStart<N extends ElementOf<E>, E extends Editor = Editor>(
  editor: E,
  entry: ElementEntryOf<E>,
  options?: Partial<GetSiblingListOptions<N, E>>
): boolean;
function normalizeListNotIndented(editor: Editor, entry: NodeEntry): boolean;
function withInsertBreakList(context: EditorContext): OverrideTransforms;

List Normalizers

Types and Constants

Type definitions, enums, and constants including the comprehensive ListStyleType enum with 59 international list style values.

enum ListStyleType {
  Disc = 'disc',
  Circle = 'circle',
  Square = 'square',
  Decimal = 'decimal',
  UpperRoman = 'upper-roman',
  LowerRoman = 'lower-roman',
  // ... 53 more values including international numbering systems
}

interface ListOptions {
  at?: TLocation;
  listRestart?: number;
  listRestartPolite?: number;
  listStyleType?: ListStyleType | string;
}

Types and Constants