@ckeditor/ckeditor5-list 45.2.1 → 46.0.0-alpha.0

package/src/legacytodolist/legacytodolistconverters.js

@@ -7,11 +7,12 @@ import { generateLiInUl, injectViewList, positionAfterUiElements, findNestedList
 /**
  * A model-to-view converter for the `listItem` model element insertion.
  *
- * It converts the `listItem` model element to an unordered list with a {@link module:engine/view/uielement~UIElement checkbox element}
+ * It converts the `listItem` model element to an unordered list with a {@link module:engine/view/uielement~ViewUIElement checkbox element}
  * at the beginning of each list item. It also merges the list with surrounding lists (if available).
  *
  * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
  *
+ * @internal
  * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:insert
  * @param model Model instance.
  * @param onCheckboxChecked Callback function.
@@ -51,6 +52,7 @@ export function modelViewInsertion(model, onCheckboxChecked) {
  *
  * It is used by {@link module:engine/controller/datacontroller~DataController}.
  *
+ * @internal
  * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:insert
  * @param model Model instance.
  * @returns Returns a conversion callback.
@@ -101,6 +103,7 @@ export function dataModelViewInsertion(model) {
  *
  * It is used by {@link module:engine/controller/datacontroller~DataController}.
  *
+ * @internal
  * @see module:engine/conversion/upcastdispatcher~UpcastDispatcher#event:element
  */
 export const dataViewModelCheckmarkInsertion = (evt, data, conversionApi) => {
@@ -124,7 +127,7 @@ export const dataViewModelCheckmarkInsertion = (evt, data, conversionApi) => {
  * A model-to-view converter for the `listType` attribute change on the `listItem` model element.
  *
  * This change means that the `<li>` element parent changes to `<ul class="todo-list">` and a
- * {@link module:engine/view/uielement~UIElement checkbox UI element} is added at the beginning
+ * {@link module:engine/view/uielement~ViewUIElement checkbox UI element} is added at the beginning
  * of the list item element (or vice versa).
  *
  * This converter is preceded by {@link module:list/legacylist/legacyconverters~modelViewChangeType} and followed by
@@ -133,6 +136,7 @@ export const dataViewModelCheckmarkInsertion = (evt, data, conversionApi) => {
  *
  * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
  *
+ * @internal
  * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute
  * @param onCheckedChange Callback fired after clicking the checkbox UI element.
  * @param view Editing view controller.
@@ -174,10 +178,11 @@ export function modelViewChangeType(onCheckedChange, view) {
 /**
  * A model-to-view converter for the `todoListChecked` attribute change on the `listItem` model element.
  *
- * It marks the {@link module:engine/view/uielement~UIElement checkbox UI element} as checked.
+ * It marks the {@link module:engine/view/uielement~ViewUIElement checkbox UI element} as checked.
  *
  * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
  *
+ * @internal
  * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute
  * @param onCheckedChange Callback fired after clicking the checkbox UI element.
  * @returns Returns a conversion callback.
@@ -208,6 +213,8 @@ export function modelViewChangeChecked(onCheckedChange) {
  * This helper ensures that position inside todo-list in the view is mapped after the checkbox.
  *
  * It only handles the position at the beginning of a list item as other positions are properly mapped be the default mapper.
+ *
+ * @internal
  */
 export function mapModelToViewPosition(view) {
     return (evt, data) => {

package/src/legacytodolist/legacytodolistediting.d.ts

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import LegacyListEditing from '../legacylist/legacylistediting.js';
+import { LegacyListEditing } from '../legacylist/legacylistediting.js';
 /**
  * The engine of the to-do list feature. It handles creating, editing and removing to-do lists and their items.
  *
@@ -14,7 +14,7 @@ import LegacyListEditing from '../legacylist/legacylistediting.js';
  * - `'checkTodoList'`,
  * - `'todoListCheck'` as an alias for `checkTodoList` command.
  */
-export default class LegacyTodoListEditing extends Plugin {
+export declare class LegacyTodoListEditing extends Plugin {
     /**
      * @inheritDoc
      */

package/src/legacytodolist/legacytodolistediting.js

@@ -4,9 +4,9 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { getCode, parseKeystroke, getLocalizedArrowKeyCodeDirection } from 'ckeditor5/src/utils.js';
-import LegacyListCommand from '../legacylist/legacylistcommand.js';
-import LegacyListEditing from '../legacylist/legacylistediting.js';
-import LegacyCheckTodoListCommand from './legacychecktodolistcommand.js';
+import { LegacyListCommand } from '../legacylist/legacylistcommand.js';
+import { LegacyListEditing } from '../legacylist/legacylistediting.js';
+import { LegacyCheckTodoListCommand } from './legacychecktodolistcommand.js';
 import { dataModelViewInsertion, dataViewModelCheckmarkInsertion, mapModelToViewPosition, modelViewChangeChecked, modelViewChangeType, modelViewInsertion } from './legacytodolistconverters.js';
 const ITEM_TOGGLE_KEYSTROKE = /* #__PURE__ */ parseKeystroke('Ctrl+Enter');
 /**
@@ -19,7 +19,7 @@ const ITEM_TOGGLE_KEYSTROKE = /* #__PURE__ */ parseKeystroke('Ctrl+Enter');
  * - `'checkTodoList'`,
  * - `'todoListCheck'` as an alias for `checkTodoList` command.
  */
-export default class LegacyTodoListEditing extends Plugin {
+export class LegacyTodoListEditing extends Plugin {
     /**
      * @inheritDoc
      */

package/src/legacytodolist.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module list/legacytodolist
  */
-import LegacyTodoListEditing from './legacytodolist/legacytodolistediting.js';
-import TodoListUI from './todolist/todolistui.js';
+import { LegacyTodoListEditing } from './legacytodolist/legacytodolistediting.js';
+import { TodoListUI } from './todolist/todolistui.js';
 import { Plugin } from 'ckeditor5/src/core.js';
 import '../theme/todolist.css';
 /**
@@ -15,7 +15,7 @@ import '../theme/todolist.css';
  * This is a "glue" plugin that loads the {@link module:list/legacytodolist/legacytodolistediting~LegacyTodoListEditing legacy to-do list
  * editing feature} and the {@link module:list/todolist/todolistui~TodoListUI to-do list UI feature}.
  */
-export default class LegacyTodoList extends Plugin {
+export declare class LegacyTodoList extends Plugin {
     /**
      * @inheritDoc
      */

package/src/legacytodolist.js

@@ -5,8 +5,8 @@
 /**
  * @module list/legacytodolist
  */
-import LegacyTodoListEditing from './legacytodolist/legacytodolistediting.js';
-import TodoListUI from './todolist/todolistui.js';
+import { LegacyTodoListEditing } from './legacytodolist/legacytodolistediting.js';
+import { TodoListUI } from './todolist/todolistui.js';
 import { Plugin } from 'ckeditor5/src/core.js';
 import '../theme/todolist.css';
 /**
@@ -15,7 +15,7 @@ import '../theme/todolist.css';
  * This is a "glue" plugin that loads the {@link module:list/legacytodolist/legacytodolistediting~LegacyTodoListEditing legacy to-do list
  * editing feature} and the {@link module:list/todolist/todolistui~TodoListUI to-do list UI feature}.
  */
-export default class LegacyTodoList extends Plugin {
+export class LegacyTodoList extends Plugin {
     /**
      * @inheritDoc
      */

package/src/list/adjacentlistssupport.d.ts

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-export default class AdjacentListsSupport extends Plugin {
+export declare class AdjacentListsSupport extends Plugin {
     /**
      * @inheritDoc
      */

package/src/list/adjacentlistssupport.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-export default class AdjacentListsSupport extends Plugin {
+export class AdjacentListsSupport extends Plugin {
     /**
      * @inheritDoc
      */

package/src/list/converters.d.ts

@@ -5,10 +5,10 @@
 /**
  * @module list/list/converters
  */
-import { type DowncastAttributeEvent, type EditingController, type Element, type ElementCreatorFunction, type Mapper, type Model, type UpcastElementEvent, type ViewElement, type DowncastRemoveEvent, type EditingView, type MapperModelToViewPositionEvent, type Schema } from 'ckeditor5/src/engine.js';
+import { type DowncastAttributeEvent, type EditingController, type ModelElement, type DowncastElementCreatorFunction, type Mapper, type Model, type UpcastElementEvent, type ViewElement, type DowncastRemoveEvent, type EditingView, type MapperModelToViewPositionEvent, type ModelSchema } from 'ckeditor5/src/engine.js';
 import type { GetCallback } from 'ckeditor5/src/utils.js';
 import { type ListElement } from './utils/model.js';
-import type { default as ListEditing, DowncastStrategy } from './listediting.js';
+import type { ListEditing, DowncastStrategy } from './listediting.js';
 /**
  * Returns the upcast converter for list items. It's supposed to work after the block converters (content inside list items) are converted.
  *
@@ -38,8 +38,10 @@ export declare function listItemDowncastConverter(attributeNames: Array<string>,
 }): GetCallback<DowncastAttributeEvent<ListElement>>;
 /**
  * The 'remove' downcast converter for custom markers.
+ *
+ * @internal
  */
-export declare function listItemDowncastRemoveConverter(schema: Schema): GetCallback<DowncastRemoveEvent>;
+export declare function listItemDowncastRemoveConverter(schema: ModelSchema): GetCallback<DowncastRemoveEvent>;
 /**
  * Returns the bogus paragraph view element creator. A bogus paragraph is used if a list item contains only a single block or nested list.
  *
@@ -48,7 +50,7 @@ export declare function listItemDowncastRemoveConverter(schema: Schema): GetCall
  */
 export declare function bogusParagraphCreator(attributeNames: Array<string>, { dataPipeline }?: {
     dataPipeline?: boolean;
-}): ElementCreatorFunction;
+}): DowncastElementCreatorFunction;
 /**
  * Helper for mapping mode to view elements. It's using positions mapping instead of mapper.toViewElement( element )
  * to find outermost view element. This is for cases when mapping is using inner view element like in the code blocks (pre > code).
@@ -58,8 +60,10 @@ export declare function bogusParagraphCreator(attributeNames: Array<string>, { d
  * @param mapper The mapper instance.
  * @param model The model.
  */
-export declare function findMappedViewElement(element: Element, mapper: Mapper, model: Model): ViewElement | null;
+export declare function findMappedViewElement(element: ModelElement, mapper: Mapper, model: Model): ViewElement | null;
 /**
  * The model to view custom position mapping for cases when marker is injected at the beginning of a block.
+ *
+ * @internal
  */
 export declare function createModelToViewPositionMapper(strategies: Array<DowncastStrategy>, view: EditingView): GetCallback<MapperModelToViewPositionEvent>;

package/src/list/converters.js

@@ -4,7 +4,7 @@
  */
 import { getAllListItemBlocks, getListItemBlocks, isListItemBlock, isFirstBlockOfListItem, ListItemUid } from './utils/model.js';
 import { createListElement, createListItemElement, getIndent, isListView, isListItemView } from './utils/view.js';
-import ListWalker, { SiblingListBlocksIterator } from './utils/listwalker.js';
+import { ListWalker, SiblingListBlocksIterator } from './utils/listwalker.js';
 import { findAndAddListHeadToMap } from './utils/postfixers.js';
 /**
  * Returns the upcast converter for list items. It's supposed to work after the block converters (content inside list items) are converted.
@@ -22,7 +22,8 @@ export function listItemUpcastConverter() {
         if (!items.length) {
             return;
         }
-        const listItemId = ListItemUid.next();
+        const listItemId = data.viewItem.getAttribute('data-list-item-id') || ListItemUid.next();
+        conversionApi.consumable.consume(data.viewItem, { attributes: 'data-list-item-id' });
         const listIndent = getIndent(data.viewItem);
         let listType = data.viewItem.parent && data.viewItem.parent.is('element', 'ol') ? 'numbered' : 'bulleted';
         // Preserve list type if was already set (for example by to-do list feature).
@@ -239,11 +240,13 @@ export function listItemDowncastConverter(attributeNames, strategies, model, { d
         // Insert custom item marker.
         const viewRange = insertCustomMarkerElements(listItem, viewElement, strategies, writer, { dataPipeline });
         // Then wrap them with the new list wrappers (UL, OL, LI).
-        wrapListItemBlock(listItem, viewRange, strategies, writer);
+        wrapListItemBlock(listItem, viewRange, strategies, writer, conversionApi.options);
     };
 }
 /**
  * The 'remove' downcast converter for custom markers.
+ *
+ * @internal
  */
 export function listItemDowncastRemoveConverter(schema) {
     return (evt, data, conversionApi) => {
@@ -308,6 +311,8 @@ export function findMappedViewElement(element, mapper, model) {
 }
 /**
  * The model to view custom position mapping for cases when marker is injected at the beginning of a block.
+ *
+ * @internal
  */
 export function createModelToViewPositionMapper(strategies, view) {
     return (evt, data) => {
@@ -328,7 +333,7 @@ export function createModelToViewPositionMapper(strategies, view) {
         const viewWalker = viewRange.getWalker();
         let positionAfterLastMarker = viewRange.start;
         for (const { item } of viewWalker) {
-            // Walk only over the non-mapped elements (UIElements, AttributeElements, $text, or any other element without mapping).
+            // Walk only over the non-mapped elements (UIElements, ViewAttributeElements, $text, or any other element without mapping).
             if (item.is('element') && data.mapper.toModelElement(item) || item.is('$textProxy')) {
                 break;
             }
@@ -360,7 +365,7 @@ function removeCustomMarkerElements(viewElement, viewWriter, mapper) {
     }
     function collectMarkersToRemove(viewWalker) {
         for (const { item } of viewWalker) {
-            // Walk only over the non-mapped elements (UIElements, AttributeElements, $text, or any other element without mapping).
+            // Walk only over the non-mapped elements (UIElements, ViewAttributeElements, $text, or any other element without mapping).
             if (item.is('element') && mapper.toModelElement(item)) {
                 break;
             }
@@ -428,7 +433,7 @@ function unwrapListItemBlock(viewElement, viewWriter) {
 /**
  * Wraps the given list item with appropriate attribute elements for ul, ol, and li.
  */
-function wrapListItemBlock(listItem, viewRange, strategies, writer) {
+function wrapListItemBlock(listItem, viewRange, strategies, writer, options) {
     if (!listItem.hasAttribute('listIndent')) {
         return;
     }
@@ -440,7 +445,7 @@ function wrapListItemBlock(listItem, viewRange, strategies, writer) {
         for (const strategy of strategies) {
             if ((strategy.scope == 'list' || strategy.scope == 'item') &&
                 currentListItem.hasAttribute(strategy.attributeName)) {
-                strategy.setAttributeOnDowncast(writer, currentListItem.getAttribute(strategy.attributeName), strategy.scope == 'list' ? listViewElement : listItemViewElement);
+                strategy.setAttributeOnDowncast(writer, currentListItem.getAttribute(strategy.attributeName), strategy.scope == 'list' ? listViewElement : listItemViewElement, options);
             }
         }
         viewRange = writer.wrap(viewRange, listItemViewElement);

package/src/list/listcommand.d.ts

@@ -5,13 +5,13 @@
 /**
  * @module list/list/listcommand
  */
-import type { Element } from 'ckeditor5/src/engine.js';
+import type { ModelElement } from 'ckeditor5/src/engine.js';
 import { Command, type Editor } from 'ckeditor5/src/core.js';
 import { type ListType } from './listediting.js';
 /**
  * The list command. It is used by the {@link module:list/list~List list feature}.
  */
-export default class ListCommand extends Command {
+export declare class ListCommand extends Command {
     /**
      * The type of the list created by the command.
      */
@@ -88,5 +88,5 @@ export default class ListCommand extends Command {
  */
 export type ListCommandAfterExecuteEvent = {
     name: 'afterExecute';
-    args: [changedBlocks: Array<Element>];
+    args: [changedBlocks: Array<ModelElement>];
 };

package/src/list/listcommand.js

@@ -7,7 +7,7 @@ import { splitListItemBefore, expandListBlocksToCompleteItems, getListItemBlocks
 /**
  * The list command. It is used by the {@link module:list/list~List list feature}.
  */
-export default class ListCommand extends Command {
+export class ListCommand extends Command {
     /**
      * The type of the list created by the command.
      */

package/src/list/listediting.d.ts

@@ -6,10 +6,11 @@
  * @module list/list/listediting
  */
 import { Plugin, type Editor } from 'ckeditor5/src/core.js';
-import type { DowncastWriter, Element, ViewElement, ViewAttributeElement, Writer } from 'ckeditor5/src/engine.js';
+import type { ViewDowncastWriter, ModelElement, ViewElement, ViewAttributeElement, ModelWriter } from 'ckeditor5/src/engine.js';
 import { Delete } from 'ckeditor5/src/typing.js';
 import { Enter } from 'ckeditor5/src/enter.js';
-import ListUtils from './listutils.js';
+import { ListFormatting } from '../listformatting.js';
+import { ListUtils } from './listutils.js';
 import { ListBlocksIterable } from './utils/listwalker.js';
 import { ClipboardPipeline } from 'ckeditor5/src/clipboard.js';
 import '../../theme/documentlist.css';
@@ -26,7 +27,7 @@ export interface ListItemAttributesMap {
 /**
  * The editing part of the document-list feature. It handles creating, editing and removing lists and list items.
  */
-export default class ListEditing extends Plugin {
+export declare class ListEditing extends Plugin {
     /**
      * The list of registered downcast strategies.
      */
@@ -42,7 +43,7 @@ export default class ListEditing extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof Enter, typeof Delete, typeof ListUtils, typeof ClipboardPipeline];
+    static get requires(): readonly [typeof Enter, typeof Delete, typeof ListUtils, typeof ClipboardPipeline, typeof ListFormatting];
     /**
      * @inheritDoc
      */
@@ -69,17 +70,17 @@ export default class ListEditing extends Plugin {
      */
     getListAttributeNames(): Array<string>;
     /**
-     * Attaches the listener to the {@link module:engine/view/document~Document#event:delete} event and handles backspace/delete
+     * Attaches the listener to the {@link module:engine/view/document~ViewDocument#event:delete} event and handles backspace/delete
      * keys in and around document lists.
      */
     private _setupDeleteIntegration;
     /**
-     * Attaches a listener to the {@link module:engine/view/document~Document#event:enter} event and handles enter key press
+     * Attaches a listener to the {@link module:engine/view/document~ViewDocument#event:enter} event and handles enter key press
      * in document lists.
      */
     private _setupEnterIntegration;
     /**
-     * Attaches a listener to the {@link module:engine/view/document~Document#event:tab} event and handles tab key and tab+shift keys
+     * Attaches a listener to the {@link module:engine/view/document~ViewDocument#event:tab} event and handles tab key and tab+shift keys
      * presses in document lists.
      */
     private _setupTabIntegration;
@@ -100,6 +101,10 @@ export default class ListEditing extends Plugin {
      * Informs editor accessibility features about keystrokes brought by the plugin.
      */
     private _setupAccessibilityIntegration;
+    /**
+     * Convert `listItemId` attribute to `data-list-item-id` attribute on the view element in both downcast pipelines.
+     */
+    private _setupListItemIdConversionStrategy;
 }
 /**
  * The attribute to attribute downcast strategy for UL, OL, LI elements.
@@ -116,7 +121,7 @@ export interface AttributeDowncastStrategy {
     /**
      * Sets the property on the view element.
      */
-    setAttributeOnDowncast(writer: DowncastWriter, value: unknown, element: ViewElement): void;
+    setAttributeOnDowncast(writer: ViewDowncastWriter, value: unknown, element: ViewElement, options?: Record<string, unknown>): void;
 }
 /**
  * The custom marker downcast strategy.
@@ -133,25 +138,25 @@ export interface ItemMarkerDowncastStrategy {
     /**
      * Creates a view element for a custom item marker.
      */
-    createElement(writer: DowncastWriter, modelElement: Element, { dataPipeline }: {
+    createElement(writer: ViewDowncastWriter, modelElement: ModelElement, { dataPipeline }: {
         dataPipeline?: boolean;
     }): ViewElement | null;
     /**
-     * Creates an AttributeElement to be used for wrapping a first block of a list item.
+     * Creates an ViewAttributeElement to be used for wrapping a first block of a list item.
      */
-    createWrapperElement?(writer: DowncastWriter, modelElement: Element, { dataPipeline }: {
+    createWrapperElement?(writer: ViewDowncastWriter, modelElement: ModelElement, { dataPipeline }: {
         dataPipeline?: boolean;
     }): ViewAttributeElement;
     /**
      * Should return true if the given list block can be wrapped with the wrapper created by `createWrapperElement()`
      * or only the marker element should be wrapped.
      */
-    canWrapElement?(modelElement: Element): boolean;
+    canWrapElement?(modelElement: ModelElement): boolean;
     /**
      * Should return true if the custom marker can be injected into a given list block.
      * Otherwise, custom marker view element is always injected before the block element.
      */
-    canInjectMarkerIntoElement?(modelElement: Element): boolean;
+    canInjectMarkerIntoElement?(modelElement: ModelElement): boolean;
 }
 /**
  * The downcast strategy.
@@ -163,7 +168,6 @@ export type DowncastStrategy = AttributeDowncastStrategy | ItemMarkerDowncastStr
  *
  * It allows triggering a re-wrapping of a list item.
  *
- * @internal
  * @eventName ~ListEditing#postFixer
  * @param listHead The head element of a list.
  * @param writer The writer to do changes with.
@@ -175,8 +179,8 @@ export type ListEditingPostFixerEvent = {
     args: [
         {
             listNodes: ListBlocksIterable;
-            listHead: Element;
-            writer: Writer;
+            listHead: ModelElement;
+            writer: ModelWriter;
             seenIds: Set<string>;
         }
     ];
@@ -219,7 +223,7 @@ export type ListEditingCheckElementEvent = {
     args: [
         {
             viewElement: ViewElement;
-            modelElement: Element;
+            modelElement: ModelElement;
         }
     ];
     return: boolean;

package/src/list/listediting.js

@@ -9,16 +9,17 @@ import { Plugin } from 'ckeditor5/src/core.js';
 import { Delete } from 'ckeditor5/src/typing.js';
 import { Enter } from 'ckeditor5/src/enter.js';
 import { CKEditorError } from 'ckeditor5/src/utils.js';
-import ListIndentCommand from './listindentcommand.js';
-import ListCommand from './listcommand.js';
-import ListMergeCommand from './listmergecommand.js';
-import ListSplitCommand from './listsplitcommand.js';
-import ListUtils from './listutils.js';
+import { ListIndentCommand } from './listindentcommand.js';
+import { ListCommand } from './listcommand.js';
+import { ListMergeCommand } from './listmergecommand.js';
+import { ListSplitCommand } from './listsplitcommand.js';
+import { ListFormatting } from '../listformatting.js';
+import { ListUtils } from './listutils.js';
 import { bogusParagraphCreator, createModelToViewPositionMapper, listItemDowncastConverter, listItemDowncastRemoveConverter, listItemUpcastConverter, reconvertItemsOnDataChange } from './converters.js';
 import { findAndAddListHeadToMap, fixListIndents, fixListItemIds } from './utils/postfixers.js';
 import { getAllListItemBlocks, isFirstBlockOfListItem, isLastBlockOfListItem, isSingleListItem, getSelectedBlockObject, isListItemBlock, removeListAttributes, ListItemUid } from './utils/model.js';
 import { getViewElementIdForListType, getViewElementNameForListType } from './utils/view.js';
-import ListWalker, { ListBlocksIterable } from './utils/listwalker.js';
+import { ListWalker, ListBlocksIterable } from './utils/listwalker.js';
 import { ClipboardPipeline } from 'ckeditor5/src/clipboard.js';
 import '../../theme/documentlist.css';
 import '../../theme/list.css';
@@ -29,7 +30,7 @@ const LIST_BASE_ATTRIBUTES = ['listType', 'listIndent', 'listItemId'];
 /**
  * The editing part of the document-list feature. It handles creating, editing and removing lists and list items.
  */
-export default class ListEditing extends Plugin {
+export class ListEditing extends Plugin {
     /**
      * The list of registered downcast strategies.
      */
@@ -50,7 +51,7 @@ export default class ListEditing extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [Enter, Delete, ListUtils, ClipboardPipeline];
+        return [Enter, Delete, ListUtils, ClipboardPipeline, ListFormatting];
     }
     /**
      * @inheritDoc
@@ -110,6 +111,7 @@ export default class ListEditing extends Plugin {
         this._setupTabIntegration();
         this._setupClipboardIntegration();
         this._setupAccessibilityIntegration();
+        this._setupListItemIdConversionStrategy();
     }
     /**
      * @inheritDoc
@@ -154,7 +156,7 @@ export default class ListEditing extends Plugin {
         ];
     }
     /**
-     * Attaches the listener to the {@link module:engine/view/document~Document#event:delete} event and handles backspace/delete
+     * Attaches the listener to the {@link module:engine/view/document~ViewDocument#event:delete} event and handles backspace/delete
      * keys in and around document lists.
      */
     _setupDeleteIntegration() {
@@ -219,7 +221,7 @@ export default class ListEditing extends Plugin {
         }, { context: 'li' });
     }
     /**
-     * Attaches a listener to the {@link module:engine/view/document~Document#event:enter} event and handles enter key press
+     * Attaches a listener to the {@link module:engine/view/document~ViewDocument#event:enter} event and handles enter key press
      * in document lists.
      */
     _setupEnterIntegration() {
@@ -285,7 +287,7 @@ export default class ListEditing extends Plugin {
         });
     }
     /**
-     * Attaches a listener to the {@link module:engine/view/document~Document#event:tab} event and handles tab key and tab+shift keys
+     * Attaches a listener to the {@link module:engine/view/document~ViewDocument#event:tab} event and handles tab key and tab+shift keys
      * presses in document lists.
      */
     _setupTabIntegration() {
@@ -482,6 +484,21 @@ export default class ListEditing extends Plugin {
             ]
         });
     }
+    /**
+     * Convert `listItemId` attribute to `data-list-item-id` attribute on the view element in both downcast pipelines.
+     */
+    _setupListItemIdConversionStrategy() {
+        this.registerDowncastStrategy({
+            scope: 'item',
+            attributeName: 'listItemId',
+            setAttributeOnDowncast(writer, attributeValue, viewElement, options) {
+                if (options && (options.skipListItemIds || options.isClipboardPipeline)) {
+                    return;
+                }
+                writer.setAttribute('data-list-item-id', attributeValue, viewElement);
+            }
+        });
+    }
 }
 /**
  * Post-fixer that reacts to changes on document and fixes incorrect model states (invalid `listItemId` and `listIndent` values).

package/src/list/listindentcommand.d.ts

@@ -6,11 +6,11 @@
  * @module list/list/listindentcommand
  */
 import { Command, type Editor } from 'ckeditor5/src/core.js';
-import type { Element } from 'ckeditor5/src/engine.js';
+import type { ModelElement } from 'ckeditor5/src/engine.js';
 /**
  * The document list indent command. It is used by the {@link module:list/list~List list feature}.
  */
-export default class ListIndentCommand extends Command {
+export declare class ListIndentCommand extends Command {
     /**
      * Determines by how much the command will change the list item's indent attribute.
      */
@@ -58,5 +58,5 @@ export default class ListIndentCommand extends Command {
  */
 export type ListIndentCommandAfterExecuteEvent = {
     name: 'afterExecute';
-    args: [changedBlocks: Array<Element>];
+    args: [changedBlocks: Array<ModelElement>];
 };

package/src/list/listindentcommand.js

@@ -7,11 +7,11 @@
  */
 import { Command } from 'ckeditor5/src/core.js';
 import { expandListBlocksToCompleteItems, indentBlocks, isFirstBlockOfListItem, isListItemBlock, isSingleListItem, outdentBlocksWithMerge, sortBlocks, splitListItemBefore } from './utils/model.js';
-import ListWalker from './utils/listwalker.js';
+import { ListWalker } from './utils/listwalker.js';
 /**
  * The document list indent command. It is used by the {@link module:list/list~List list feature}.
  */
-export default class ListIndentCommand extends Command {
+export class ListIndentCommand extends Command {
     /**
      * Determines by how much the command will change the list item's indent attribute.
      */

package/src/list/listmergecommand.d.ts

@@ -6,11 +6,11 @@
  * @module list/list/listmergecommand
  */
 import { Command, type Editor } from 'ckeditor5/src/core.js';
-import type { Element } from 'ckeditor5/src/engine.js';
+import type { ModelElement } from 'ckeditor5/src/engine.js';
 /**
  * The document list merge command. It is used by the {@link module:list/list~List list feature}.
  */
-export default class ListMergeCommand extends Command {
+export declare class ListMergeCommand extends Command {
     /**
      * Whether list item should be merged before or after the selected block.
      */
@@ -72,5 +72,5 @@ export default class ListMergeCommand extends Command {
  */
 export type ListMergeCommandAfterExecuteEvent = {
     name: 'afterExecute';
-    args: [changedBlocks: Array<Element>];
+    args: [changedBlocks: Array<ModelElement>];
 };

package/src/list/listmergecommand.js

@@ -7,11 +7,11 @@
  */
 import { Command } from 'ckeditor5/src/core.js';
 import { getNestedListBlocks, indentBlocks, sortBlocks, isFirstBlockOfListItem, mergeListItemBefore, isSingleListItem, getSelectedBlockObject, isListItemBlock } from './utils/model.js';
-import ListWalker from './utils/listwalker.js';
+import { ListWalker } from './utils/listwalker.js';
 /**
  * The document list merge command. It is used by the {@link module:list/list~List list feature}.
  */
-export default class ListMergeCommand extends Command {
+export class ListMergeCommand extends Command {
     /**
      * Whether list item should be merged before or after the selected block.
      */