Logo for jsDocs.io

@ckeditor/ckeditor5-list

  • Version 40.1.0
  • Published
  • 1.02 MB
  • 2 dependencies
  • GPL-2.0-or-later license

Install

npm i @ckeditor/ckeditor5-list
yarn add @ckeditor/ckeditor5-list
pnpm add @ckeditor/ckeditor5-list

Overview

Ordered and unordered lists feature to CKEditor 5.

Index

Classes

Interfaces

Classes

class AdjacentListsSupport

class AdjacentListsSupport extends Plugin {}

    property pluginName

    static readonly pluginName: string;

    method init

    init: () => void;

    class CheckTodoDocumentListCommand

    class CheckTodoDocumentListCommand extends Command {}

    • The check to-do command.

      The command is registered by the as the checkTodoList editor command.

    constructor

    constructor(editor: Editor);

    property value

    value: boolean;

    • A list of to-do list items selected by the .

      Modifiers

      • @readonly

    method execute

    execute: (options?: { forceValue?: boolean }) => void;

    • Executes the command.

      Parameter

      options.forceValue If set, it will force the command behavior. If true, the command will apply the attribute. Otherwise, the command will remove the attribute. If not set, the command will look for its current value to decide what it should do.

    method refresh

    refresh: () => void;

    • Updates the command's and properties based on the current selection.

    class CheckTodoListCommand

    class CheckTodoListCommand extends Command {}

    • The check to-do command.

      The command is registered by the as the checkTodoList editor command and it is also available via aliased todoListCheck name.

    constructor

    constructor(editor: Editor);

    property value

    value: boolean;

    • A list of to-do list items selected by the .

      Modifiers

      • @readonly

    method execute

    execute: (options?: { forceValue?: boolean }) => void;

    • Executes the command.

      Parameter

      options.forceValue If set, it will force the command behavior. If true, the command will apply the attribute. Otherwise, the command will remove the attribute. If not set, the command will look for its current value to decide what it should do.

    method refresh

    refresh: () => void;

    • Updates the command's and properties based on the current selection.

    class DocumentList

    class DocumentList extends Plugin {}

    • The document list feature.

      This is a "glue" plugin that loads the and .

    property pluginName

    static readonly pluginName: string;

    property requires

    static readonly requires: readonly [typeof DocumentListEditing, typeof ListUI];

    class DocumentListCommand

    class DocumentListCommand extends Command {}

    • The list command. It is used by the .

    constructor

    constructor(editor: Editor, type: 'bulleted' | 'numbered' | 'todo');

    • Creates an instance of the command.

      Parameter editor

      The editor instance.

      Parameter type

      List type that will be handled by this command.

    property type

    readonly type: 'bulleted' | 'numbered' | 'todo';

    • The type of the list created by the command.

    property value

    value: boolean;

    • A flag indicating whether the command is active, which means that the selection starts in a list of the same type.

      Modifiers

      • @readonly

    method execute

    execute: (options?: { forceValue?: boolean }) => void;

    • Executes the list command.

      execute afterExecute

      Parameter options

      Command options.

      Parameter

      options.forceValue If set, it will force the command behavior. If true, the command will try to convert the selected items and potentially the neighbor elements to the proper list items. If set to false it will convert selected elements to paragraphs. If not set, the command will toggle selected elements to list items or paragraphs, depending on the selection.

    method refresh

    refresh: () => void;

    class DocumentListEditing

    class DocumentListEditing extends Plugin {}

    • The editing part of the document-list feature. It handles creating, editing and removing lists and list items.

    constructor

    constructor(editor: Editor);

    property pluginName

    static readonly pluginName: string;

    property requires

    static readonly requires: readonly [any, any, typeof DocumentListUtils, any];

    method afterInit

    afterInit: () => void;

    method getListAttributeNames

    getListAttributeNames: () => Array<string>;

    • Returns list of model attribute names that should affect downcast conversion.

    method init

    init: () => void;

    method registerDowncastStrategy

    registerDowncastStrategy: (strategy: DowncastStrategy) => void;

    • Registers a downcast strategy.

      **Note**: Strategies must be registered in the Plugin#init() phase so that it can be applied in the DocumentListEditing#afterInit().

      Parameter strategy

      The downcast strategy to register.

    class DocumentListIndentCommand

    class DocumentListIndentCommand extends Command {}

    • The document list indent command. It is used by the .

    constructor

    constructor(editor: Editor, indentDirection: 'forward' | 'backward');

    • Creates an instance of the command.

      Parameter editor

      The editor instance.

      Parameter indentDirection

      The direction of indent. If it is equal to backward, the command will outdent a list item.

    method execute

    execute: () => void;

    • Indents or outdents (depending on the 's indentDirection parameter) selected list items.

      execute afterExecute

    method refresh

    refresh: () => void;

    class DocumentListMergeCommand

    class DocumentListMergeCommand extends Command {}

    • The document list merge command. It is used by the .

    constructor

    constructor(editor: Editor, direction: 'forward' | 'backward');

    • Creates an instance of the command.

      Parameter editor

      The editor instance.

      Parameter direction

      Whether list item should be merged before or after the selected block.

    method execute

    execute: ({
        shouldMergeOnBlocksContentLevel,
    }?: {
        shouldMergeOnBlocksContentLevel?: boolean;
    }) => void;

    • Merges list blocks together (depending on the 's direction parameter).

      execute afterExecute

      Parameter options

      Command options.

      Parameter

      options.shouldMergeOnBlocksContentLevel When set true, merging will be performed together with to get rid of the inline content in the selection or take advantage of the heuristics in deleteContent() that helps convert lists into paragraphs in certain cases.

    method refresh

    refresh: () => void;

    class DocumentListProperties

    class DocumentListProperties extends Plugin {}

    • The document list properties feature.

      This is a "glue" plugin that loads the and the .

    property pluginName

    static readonly pluginName: string;

    property requires

    static readonly requires: readonly [
        typeof DocumentListPropertiesEditing,
        typeof ListPropertiesUI
    ];

    class DocumentListPropertiesEditing

    class DocumentListPropertiesEditing extends Plugin {}

    • The document list properties engine feature.

      It registers the 'listStyle', 'listReversed' and 'listStart' commands if they are enabled in the configuration. Read more in .

    constructor

    constructor(editor: Editor);

    property pluginName

    static readonly pluginName: string;

    property requires

    static readonly requires: readonly [
        typeof DocumentListEditing,
        typeof DocumentListPropertiesUtils
    ];

    method init

    init: () => void;

    class DocumentListPropertiesUtils

    class DocumentListPropertiesUtils extends Plugin {}

    • A set of helpers related to document lists.

    property pluginName

    static readonly pluginName: string;

    method getAllSupportedStyleTypes

    getAllSupportedStyleTypes: () => Array<string>;

    • Gets all the style types supported by given list type.

    method getListStyleTypeFromTypeAttribute

    getListStyleTypeFromTypeAttribute: (value: string) => string | null;

    • Converts type attribute of <ul> or <ol> elements to list-style-type equivalent.

    method getListTypeFromListStyleType

    getListTypeFromListStyleType: (
        listStyleType: string
    ) => 'bulleted' | 'numbered' | null;

    • Checks whether the given list-style-type is supported by numbered or bulleted list.

    method getTypeAttributeFromListStyleType

    getTypeAttributeFromListStyleType: (value: string) => string | null;

    • Converts list-style-type style to type attribute of <ul> or <ol> elements.

    class DocumentListReversedCommand

    class DocumentListReversedCommand extends Command {}

    • The list reversed command. It changes the listReversed attribute of the selected list items, letting the user to choose the order of an ordered list. It is used by the .

    property value

    value: boolean;

    method execute

    execute: (options?: { reversed?: boolean }) => void;

    • Executes the command.

      execute

      Parameter

      options.reversed Whether the list should be reversed.

    method refresh

    refresh: () => void;

    class DocumentListSplitCommand

    class DocumentListSplitCommand extends Command {}

    • The document list split command that splits the list item at the selection.

      It is used by the .

    constructor

    constructor(editor: Editor, direction: 'before' | 'after');

    • Creates an instance of the command.

      Parameter editor

      The editor instance.

      Parameter direction

      Whether list item should be split before or after the selected block.

    method execute

    execute: () => void;

    • Splits the list item at the selection.

      execute afterExecute

    method refresh

    refresh: () => void;

    class DocumentListStartCommand

    class DocumentListStartCommand extends Command {}

    • The list start index command. It changes the listStart attribute of the selected list items, letting the user to choose the starting point of an ordered list. It is used by the .

    property value

    value: number;

    method execute

    execute: ({ startIndex }?: { startIndex?: number }) => void;

    • Executes the command.

      execute

      Parameter

      options.startIndex The list start index.

    method refresh

    refresh: () => void;

    class DocumentListStyleCommand

    class DocumentListStyleCommand extends Command {}

    • The list style command. It changes listStyle attribute of the selected list items, letting the user choose styles for the list item markers. It is used by the .

    constructor

    constructor(editor: Editor, defaultType: string, supportedTypes?: string[]);

    • Creates an instance of the command.

      Parameter editor

      The editor instance.

      Parameter defaultType

      The list type that will be used by default if the value was not specified during the command execution.

      Parameter supportedTypes

      The list of supported style types by this command.

    property defaultType

    readonly defaultType: string;

    • The default type of the list style.

    property value

    value: string;

    method execute

    execute: (options?: { type?: string | null }) => void;

    • Executes the command.

      execute

      Parameter

      options.type The type of the list style, e.g. 'disc' or 'square'. If null is specified, the default style will be applied.

    method isStyleTypeSupported

    isStyleTypeSupported: (value: string) => boolean;

    • Checks if the given style type is supported by this plugin.

    method refresh

    refresh: () => void;

    class DocumentListUtils

    class DocumentListUtils extends Plugin {}

    • A set of helpers related to document lists.

    property pluginName

    static readonly pluginName: string;

    method expandListBlocksToCompleteItems

    expandListBlocksToCompleteItems: (
        blocks: ArrayOrItem<Element>,
        options?: { withNested?: boolean }
    ) => Array<Element>;

    • Expands the given list of selected blocks to include the leading and tailing blocks of partially selected list items.

      Parameter blocks

      The list of selected blocks.

      Parameter

      options.withNested Whether should include nested list items.

    method expandListBlocksToCompleteList

    expandListBlocksToCompleteList: (blocks: ArrayOrItem<Element>) => Array<Element>;

    • Expands the given list of selected blocks to include all the items of the lists they're in.

      Parameter blocks

      The list of selected blocks.

    method isFirstBlockOfListItem

    isFirstBlockOfListItem: (listBlock: Element) => boolean;

    • Check if the given block is the first in the list item.

      Parameter listBlock

      The list block element.

    method isListItemBlock

    isListItemBlock: (node: Node) => boolean;

    • Returns true if the given model node is a list item block.

      Parameter node

      A model node.

    class IndentCommand

    class IndentCommand extends Command {}

    • The list indent command. It is used by the .

    constructor

    constructor(editor: Editor, indentDirection: 'forward' | 'backward');

    • Creates an instance of the command.

      Parameter editor

      The editor instance.

      Parameter indentDirection

      The direction of indent. If it is equal to backward, the command will outdent a list item.

    method execute

    execute: () => void;

    • Indents or outdents (depending on the 's indentDirection parameter) selected list items.

      execute

    method refresh

    refresh: () => void;

    class List

    class List extends Plugin {}

    • The list feature.

      This is a "glue" plugin that loads the and .

    property pluginName

    static readonly pluginName: string;

    property requires

    static readonly requires: readonly [typeof ListEditing, typeof ListUI];

    class ListCommand

    class ListCommand extends Command {}

    • The list command. It is used by the .

    constructor

    constructor(editor: Editor, type: 'bulleted' | 'numbered' | 'todo');

    • Creates an instance of the command.

      Parameter editor

      The editor instance.

      Parameter type

      List type that will be handled by this command.

    property type

    readonly type: 'bulleted' | 'numbered' | 'todo';

    • The type of the list created by the command.

    property value

    value: boolean;

    • A flag indicating whether the command is active, which means that the selection starts in a list of the same type.

      Modifiers

      • @readonly

    method execute

    execute: (options?: { forceValue?: boolean }) => void;

    • Executes the list command.

      execute

      Parameter options

      Command options.

      Parameter

      options.forceValue If set, it will force the command behavior. If true, the command will try to convert the selected items and potentially the neighbor elements to the proper list items. If set to false, it will convert selected elements to paragraphs. If not set, the command will toggle selected elements to list items or paragraphs, depending on the selection.

    method refresh

    refresh: () => void;

    class ListEditing

    class ListEditing extends Plugin {}

    • The engine of the list feature. It handles creating, editing and removing lists and list items.

      It registers the 'numberedList', 'bulletedList', 'indentList' and 'outdentList' commands.

    property pluginName

    static readonly pluginName: string;

    property requires

    static readonly requires: readonly [any, any, typeof ListUtils];

    method afterInit

    afterInit: () => void;

    method init

    init: () => void;

    class ListProperties

    class ListProperties extends Plugin {}

    • The list properties feature.

      This is a "glue" plugin that loads the and the .

    property pluginName

    static readonly pluginName: string;

    property requires

    static readonly requires: readonly [
        typeof ListPropertiesEditing,
        typeof ListPropertiesUI
    ];

    class ListPropertiesEditing

    class ListPropertiesEditing extends Plugin {}

    • The engine of the list properties feature.

      It sets the value for the listItem attribute of the element that allows modifying the list style type.

      It registers the 'listStyle', 'listReversed' and 'listStart' commands if they are enabled in the configuration. Read more in .

    constructor

    constructor(editor: Editor);

    property pluginName

    static readonly pluginName: string;

    property requires

    static readonly requires: readonly [typeof ListEditing];

    method afterInit

    afterInit: () => void;

    method init

    init: () => void;

    class ListPropertiesUI

    class ListPropertiesUI extends Plugin {}

    • The list properties UI plugin. It introduces the extended 'bulletedList' and 'numberedList' toolbar buttons that allow users to control such aspects of list as the marker, start index or order.

      **Note**: Buttons introduced by this plugin override implementations from the (because they share the same names).

    property pluginName

    static readonly pluginName: string;

    method init

    init: () => void;

      class ListReversedCommand

      class ListReversedCommand extends Command {}

      • The reversed list command. It changes the listReversed attribute of the selected list items. As a result, the list order will be reversed. It is used by the .

      property value

      value: boolean;

      method execute

      execute: (options?: { reversed?: boolean }) => void;

      • Executes the command.

        execute

        Parameter

        options.reversed Whether the list should be reversed.

      method refresh

      refresh: () => void;

      class ListStartCommand

      class ListStartCommand extends Command {}

      • The list start index command. It changes the listStart attribute of the selected list items. It is used by the .

      property value

      value: number;

      method execute

      execute: ({ startIndex }?: { startIndex?: number }) => void;

      • Executes the command.

        execute

        Parameter

        options.startIndex The list start index.

      method refresh

      refresh: () => void;

      class ListStyle

      class ListStyle extends Plugin {}

      • The list style feature.

        This is an obsolete plugin that exists for backward compatibility only. Use the instead.

        Deprecated

      constructor

      constructor(editor: Editor);

        property pluginName

        static readonly pluginName: string;

        property requires

        static readonly requires: readonly [typeof ListProperties];

        class ListStyleCommand

        class ListStyleCommand extends Command {}

        • The list style command. It changes the listStyle attribute of the selected list items.

          If the list type (numbered or bulleted) can be inferred from the passed style type, the command tries to convert selected items to a list of that type. It is used by the .

        constructor

        constructor(editor: Editor, defaultType: string);

        • Creates an instance of the command.

          Parameter editor

          The editor instance.

          Parameter defaultType

          The list type that will be used by default if the value was not specified during the command execution.

        property defaultType

        readonly defaultType: string;

        • The default type of the list style.

        property isStyleTypeSupported

        isStyleTypeSupported: undefined;

          property value

          value: string;

          • Modifiers

            • @readonly

          method execute

          execute: (options?: { type?: string | null }) => void;

          • Executes the command.

            execute

            Parameter

            options.type The type of the list style, e.g. 'disc' or 'square'. If null is specified, the default style will be applied.

          method refresh

          refresh: () => void;

          class ListUI

          class ListUI extends Plugin {}

          • The list UI feature. It introduces the 'numberedList' and 'bulletedList' buttons that allow to convert paragraphs to and from list items and indent or outdent them.

          property pluginName

          static readonly pluginName: string;

          method init

          init: () => void;

          class ListUtils

          class ListUtils extends Plugin {}

          • A set of helpers related to document lists.

          property pluginName

          static readonly pluginName: string;

          method getListTypeFromListStyleType

          getListTypeFromListStyleType: (
              listStyleType: string
          ) => 'bulleted' | 'numbered' | null;

          • Checks whether the given list-style-type is supported by numbered or bulleted list.

          method getSelectedListItems

          getSelectedListItems: (model: Model) => Array<Element>;

          • Returns an array with all listItem elements in the model selection.

            It returns all the items even if only a part of the list is selected, including items that belong to nested lists. If no list is selected, it returns an empty array. The order of the elements is not specified.

          method getSiblingNodes

          getSiblingNodes: (
              position: Position,
              direction: 'forward' | 'backward'
          ) => Array<Element>;

          • Returns an array with all listItem elements that represent the same list.

            It means that values of listIndent, listType, listStyle, listReversed and listStart for all items are equal.

            Additionally, if the position is inside a list item, that list item will be returned as well.

            Parameter position

            Starting position.

            Parameter direction

            Walking direction.

          class TodoDocumentList

          class TodoDocumentList extends Plugin {}

          • The to-do list feature.

            This is a "glue" plugin that loads the and the .

          property pluginName

          static readonly pluginName: string;

          property requires

          static readonly requires: readonly [
              typeof TodoDocumentListEditing,
              typeof TodoListUI
          ];

          class TodoDocumentListEditing

          class TodoDocumentListEditing extends Plugin {}

          • The engine of the to-do list feature. It handles creating, editing and removing to-do lists and their items.

            It registers the entire functionality of the and extends it with the commands:

            - 'todoList', - 'checkTodoList',

          property pluginName

          static readonly pluginName: string;

          property requires

          static readonly requires: readonly [typeof DocumentListEditing];

          method init

          init: () => void;

          class TodoList

          class TodoList extends Plugin {}

          • The to-do list feature.

            This is a "glue" plugin that loads the and the .

          property pluginName

          static readonly pluginName: string;

          property requires

          static readonly requires: readonly [typeof TodoListEditing, typeof TodoListUI];

          class TodoListEditing

          class TodoListEditing extends Plugin {}

          • The engine of the to-do list feature. It handles creating, editing and removing to-do lists and their items.

            It registers the entire functionality of the and extends it with the commands:

            - 'todoList', - 'checkTodoList', - 'todoListCheck' as an alias for checkTodoList command.

          property pluginName

          static readonly pluginName: string;

          property requires

          static readonly requires: readonly [typeof ListEditing];

          method init

          init: () => void;

          class TodoListUI

          class TodoListUI extends Plugin {}

          • The to-do list UI feature. It introduces the 'todoList' button that allows to convert elements to and from to-do list items and to indent or outdent them.

          property pluginName

          static readonly pluginName: string;

          method init

          init: () => void;

          Interfaces

          interface ListConfig

          interface ListConfig {}

          • The configuration of the feature and the feature.

            ClassicEditor
            	.create( editorElement, {
            		list:  ... // The list feature configuration.
            	} )
            	.then( ... )
            	.catch( ... );

            See .

            ListConfig

          property multiBlock

          multiBlock?: boolean;

          • Allows multiple blocks in single list item.

            With this option enabled you can have block widgets, for example images or even tables, within a list item.

            **Note:** This is enabled by default.

            true

          property properties

          properties?: ListPropertiesConfig;

          • The configuration of the feature and the feature.

            Read more in .

          interface ListPropertiesConfig

          interface ListPropertiesConfig {}

          • The configuration of the feature and the feature.

            This configuration controls the individual list properties. For instance, it enables or disables specific editor commands operating on lists (, , , or on the document lists , , ), the look of the UI ('numberedList' and 'bulletedList' dropdowns), and the editor data pipeline (allowed HTML attributes).

            ClassicEditor
            	.create( editorElement, {
            		list: {
            			properties: {
            				styles: true,
            				startIndex: true,
            				reversed: true
            			}
            		}
            	} )
            	.then( ... )
            	.catch( ... );

          property reversed

          reversed?: boolean;

          • When set, the reversed list feature will be enabled. It allows changing the reversed HTML attribute of the numbered lists. As a result, it will be possible to make the list order descending instead of ascending.

            **Note**: This configuration does not affect bulleted and to-do lists.

            false

          property startIndex

          startIndex?: boolean;

          • When set, the list start index feature will be enabled. It allows changing the start HTML attribute of the numbered lists. As a result, it will be possible to specify the start value of the first item in an ordered list.

            **Note**: This configuration does not affect bulleted and to-do lists.

            false

          property styles

          styles?: boolean | ListPropertiesStyleConfig;

          • When set, the list style feature will be enabled. It allows changing the list-style-type style or the type HTML attribute of a list.

            **Note**: Styling using the type HTML attribute is only available in ().

            true

          Package Files (36)

          Dependencies (2)

          Dev Dependencies (0)

          No dev dependencies.

          Peer Dependencies (0)

          No peer dependencies.

          Badge

          To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

          You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@ckeditor/ckeditor5-list.

          • Markdown
            [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@ckeditor/ckeditor5-list)
          • HTML
            <a href="https://www.jsdocs.io/package/@ckeditor/ckeditor5-list"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>