or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-list.mdindex.mdlegacy-support.mdlist-commands.mdlist-formatting.mdlist-properties.mdtodolist.md
tile.json

index.mddocs/

CKEditor 5 List

CKEditor 5 List provides comprehensive list functionality including ordered lists, unordered lists, to-do lists, list properties (styling, numbering), and list item formatting. It supports both modern list implementation and legacy functionality for backward compatibility.

Package Information

  • Package Name: @ckeditor/ckeditor5-list
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ckeditor/ckeditor5-list

Core Imports

import { List, ListProperties, TodoList } from "@ckeditor/ckeditor5-list";
import { type ArrayOrItem } from "ckeditor5/src/utils.js";

For individual components:

import { 
  ListEditing, 
  ListUtils, 
  ListCommand, 
  ListIndentCommand 
} from "@ckeditor/ckeditor5-list";

Basic Usage

import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";
import { List, ListProperties, TodoList } from "@ckeditor/ckeditor5-list";

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [List, ListProperties, TodoList],
    toolbar: ['numberedList', 'bulletedList', 'todoList'],
    list: {
      properties: {
        styles: true,
        startIndex: true,
        reversed: true
      }
    }
  })
  .then(editor => {
    console.log('Editor was initialized', editor);
  });

Architecture

CKEditor 5 List is built around several key components:

  • Core List System: Main List plugin combining editing and UI functionality
  • List Properties: Advanced list styling and numbering capabilities
  • List Formatting: Font styling integration for list item markers
  • TodoList System: Interactive checkbox-based to-do lists
  • Legacy Support: Backward compatibility with older list implementations
  • Command System: Comprehensive command architecture for all list operations

Capabilities

Core List Functionality

Main list features including ordered and unordered lists with comprehensive editing capabilities and adjacent list support.

class List extends Plugin {
  static get requires(): readonly [typeof ListEditing, typeof ListUI];
  static get pluginName(): "List";
}

class ListEditing extends Plugin {
  // Core editing functionality
}

class ListUtils extends Plugin {
  // Utility functions for list operations
}

class AdjacentListsSupport extends Plugin {
  static get pluginName(): "AdjacentListsSupport";
}

Core List

List Properties

Advanced list styling capabilities including list styles, start index, and reversed numbering.

class ListProperties extends Plugin {
  static get requires(): readonly [typeof ListPropertiesEditing, typeof ListPropertiesUI];
  static get pluginName(): "ListProperties";
}

interface ListPropertiesConfig {
  styles?: boolean | ListPropertiesStyleConfig | ArrayOrItem<ListPropertiesStyleListType>;
  startIndex?: boolean;
  reversed?: boolean;
}

List Properties

List Commands

Comprehensive command system for all list operations including creation, indentation, and merging.

class ListCommand extends Command {
  execute(options?: { forceValue?: boolean; additionalAttributes?: Record<string, unknown> }): void;
}

class ListIndentCommand extends Command {
  execute(): void;
}

class ListMergeCommand extends Command {
  execute(options: { backward?: boolean }): void;
}

class ListSplitCommand extends Command {
  execute(): void;
}

List Commands

List Formatting

Font styling integration for list item markers including bold, italic, font size, color, and family.

class ListFormatting extends Plugin {
  static get pluginName(): "ListFormatting";
}

class ListItemBoldIntegration extends Plugin {
  // Bold formatting for list markers
}

class ListItemItalicIntegration extends Plugin {
  // Italic formatting for list markers
}

List Formatting

TodoList

Interactive to-do list functionality with checkbox interactions and state management.

class TodoList extends Plugin {
  static get requires(): readonly [typeof TodoListEditing, typeof TodoListUI];
  static get pluginName(): "TodoList";
}

class CheckTodoListCommand extends Command {
  execute(options?: { forceValue?: boolean }): void;
}

TodoList

Legacy Support

Backward compatibility implementations for legacy list functionality.

class LegacyList extends Plugin {
  static get requires(): readonly [typeof LegacyListEditing, typeof LegacyListUtils];
  static get pluginName(): "LegacyList";
}

class LegacyListProperties extends Plugin {
  static get pluginName(): "LegacyListProperties";
}

class LegacyTodoList extends Plugin {
  static get pluginName(): "LegacyTodoList";
}

Legacy Support

Configuration Types

interface ListConfig {
  properties?: ListPropertiesConfig;
  /** @default true */
  multiBlock?: boolean;
  /** @default true */
  enableListItemMarkerFormatting?: boolean;
}

interface ListPropertiesConfig {
  /** @default true */
  styles?: boolean | ListPropertiesStyleConfig | ArrayOrItem<ListPropertiesStyleListType>;
  /** @default false */
  startIndex?: boolean;
  /** @default false */
  reversed?: boolean;
}

interface ListPropertiesStyleConfig {
  listTypes?: ArrayOrItem<ListPropertiesStyleListType>;
  useAttribute?: boolean;
  listStyleTypes?: ListStyleTypesConfig;
}

interface ListStyleTypesConfig {
  numbered?: Array<NumberedListStyleType>;
  bulleted?: Array<BulletedListStyleType>;
}

type ListPropertiesStyleListType = 'numbered' | 'bulleted';

type NumberedListStyleType = 
  | 'decimal'
  | 'decimal-leading-zero'
  | 'lower-roman'
  | 'upper-roman'
  | 'lower-latin'
  | 'upper-latin';

type BulletedListStyleType = 
  | 'disc'
  | 'circle'
  | 'square';

type ListType = 'numbered' | 'bulleted' | 'todo' | 'customNumbered' | 'customBulleted';

Common Types

import { type ViewDocumentDomEventData, type Writer, type DowncastConversionApi, type Element } from "ckeditor5/src/engine.js";

interface ViewDocumentTodoCheckboxChangeEvent {
  readonly name: 'todoCheckboxChange';
  readonly args: [data: ViewDocumentDomEventData<Event>];
}

interface ListEditingPostFixerEvent {
  readonly name: 'postFixer';
  readonly args: [writer: Writer];
  return: boolean;
}

interface ListEditingCheckAttributesEvent {
  readonly name: 'checkAttributes';
  readonly args: [context: CheckAttributesContext];
}

interface ListEditingCheckElementEvent {
  readonly name: 'checkElement';
  readonly args: [context: CheckElementContext];
}

type ListItemAttributesMap = Map<string, unknown>;

type ListAttributeDowncastStrategy = (
  attributeValue: unknown,
  conversionApi: DowncastConversionApi
) => void;

type ListItemMarkerDowncastStrategy = (
  modelElement: Element,
  conversionApi: DowncastConversionApi
) => void;

type ListDowncastStrategy = ListAttributeDowncastStrategy | ListItemMarkerDowncastStrategy;