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

Plugin Configuration

Name: tessl/npm-udecode--plate-list
Author: tessl

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

Capabilities

BaseListPlugin

Core list plugin that provides list functionality for Plate editor.

/**
 * Core list plugin providing list functionality for Plate editor
 * Handles list rendering, normalization, and operation behaviors
 */
export const BaseListPlugin: TSlatePlugin<BaseListConfig>;

Usage Example:

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

const editor = createPlateEditor({
  plugins: [BaseListPlugin],
});

ListPlugin (React)

React wrapper for BaseListPlugin with React-specific features.

/**
 * React wrapper for BaseListPlugin with React-specific features
 * Enables support for indented lists with React-specific features
 */
export const ListPlugin: PlatePlugin<ListConfig>;

Usage Example:

import { createPlateEditor } from "@udecode/plate/react";
import { ListPlugin } from "@udecode/plate-list/react";

const editor = createPlateEditor({
  plugins: [ListPlugin],
});

BaseListConfig

Configuration options for the BaseListPlugin.

/**
 * Configuration options for the BaseListPlugin
 */
export type BaseListConfig = PluginConfig<
  'list',
  {
    /** Options for getting sibling lists */
    getSiblingListOptions?: GetSiblingListOptions<TElement>;
    /** Function to map HTML elements to list style type */
    getListStyleType?: (element: HTMLElement) => ListStyleType;
  }
>;

ListConfig

React version of BaseListConfig.

/**
 * React version of BaseListConfig
 */
export type ListConfig = BaseListConfig;

Configuration Options

getSiblingListOptions

Options for configuring how sibling list queries behave. This affects how the plugin finds and analyzes related list items.

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

getListStyleType

Function to map HTML elements to list style types during HTML parsing. This is used when importing content from external sources.

/**
 * Function to map HTML elements to list style types during HTML parsing
 * @param element - HTML element to analyze
 * @returns The corresponding ListStyleType
 */
type GetListStyleTypeFunction = (element: HTMLElement) => ListStyleType;

Default Implementation:

// Default implementation extracts from CSS list-style-type property
getListStyleType: (element) => element.style.listStyleType as ListStyleType

Plugin Features

HTML Parsing

The plugin includes built-in HTML parsing that:

Transforms <li> elements into flat list items with indent properties
Preserves list style types from CSS
Handles nested HTML lists by converting to indentation-based structure
Extracts aria-level attributes for accessibility compliance

List Rendering

The plugin provides default rendering that:

Renders list items as <ol> or <ul> elements based on list style type
Maintains proper start attributes for numbered lists
Applies CSS list-style-type properties
Supports all 59 international list style types

Editor Extensions

The plugin automatically applies editor extensions:

withList: Core list functionality and transforms
withNormalizeList: List structure normalization

List Rules

The plugin defines specific editor rules:

Break behavior: Empty list items reset to normal text
Delete behavior: Deletion at list start resets formatting
Merge behavior: Prevents removal of empty list items during merges
Match condition: Identifies list nodes by presence of listType property

Install with Tessl CLI

npx tessl i tessl/npm-udecode--plate-list

docs