@ckeditor/ckeditor5-list 0.0.0-internal-20241017.0

package/src/list/listindentcommand.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module list/list/listindentcommand
+ */
+import { Command, type Editor } from 'ckeditor5/src/core.js';
+import type { Element } 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 {
+    /**
+     * Determines by how much the command will change the list item's indent attribute.
+     */
+    private readonly _direction;
+    /**
+     * Creates an instance of the command.
+     *
+     * @param editor The editor instance.
+     * @param indentDirection The direction of indent. If it is equal to `backward`, the command
+     * will outdent a list item.
+     */
+    constructor(editor: Editor, indentDirection: 'forward' | 'backward');
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Indents or outdents (depending on the {@link #constructor}'s `indentDirection` parameter) selected list items.
+     *
+     * @fires execute
+     * @fires afterExecute
+     */
+    execute(): void;
+    /**
+     * Fires the `afterExecute` event.
+     *
+     * @param changedBlocks The changed list elements.
+     */
+    private _fireAfterExecute;
+    /**
+     * Checks whether the command can be enabled in the current context.
+     *
+     * @returns Whether the command should be enabled.
+     */
+    private _checkEnabled;
+}
+/**
+ * Event fired by the {@link ~ListIndentCommand#execute} method.
+ *
+ * It allows to execute an action after executing the {@link module:list/list/listcommand~ListCommand#execute}
+ * method, for example adjusting attributes of changed list items.
+ *
+ * @internal
+ * @eventName ~ListIndentCommand#afterExecute
+ */
+export type ListIndentCommandAfterExecuteEvent = {
+    name: 'afterExecute';
+    args: [changedBlocks: Array<Element>];
+};

package/src/list/listindentcommand.js

@@ -0,0 +1,129 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module list/list/listindentcommand
+ */
+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';
+/**
+ * The document list indent command. It is used by the {@link module:list/list~List list feature}.
+ */
+export default class ListIndentCommand extends Command {
+    /**
+     * Creates an instance of the command.
+     *
+     * @param editor The editor instance.
+     * @param indentDirection The direction of indent. If it is equal to `backward`, the command
+     * will outdent a list item.
+     */
+    constructor(editor, indentDirection) {
+        super(editor);
+        this._direction = indentDirection;
+    }
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        this.isEnabled = this._checkEnabled();
+    }
+    /**
+     * Indents or outdents (depending on the {@link #constructor}'s `indentDirection` parameter) selected list items.
+     *
+     * @fires execute
+     * @fires afterExecute
+     */
+    execute() {
+        const model = this.editor.model;
+        const blocks = getSelectedListBlocks(model.document.selection);
+        model.change(writer => {
+            const changedBlocks = [];
+            // Handle selection contained in the single list item and starting in the following blocks.
+            if (isSingleListItem(blocks) && !isFirstBlockOfListItem(blocks[0])) {
+                // Allow increasing indent of following list item blocks.
+                if (this._direction == 'forward') {
+                    changedBlocks.push(...indentBlocks(blocks, writer));
+                }
+                // For indent make sure that indented blocks have a new ID.
+                // For outdent just split blocks from the list item (give them a new IDs).
+                changedBlocks.push(...splitListItemBefore(blocks[0], writer));
+            }
+            // More than a single list item is selected, or the first block of list item is selected.
+            else {
+                // Now just update the attributes of blocks.
+                if (this._direction == 'forward') {
+                    changedBlocks.push(...indentBlocks(blocks, writer, { expand: true }));
+                }
+                else {
+                    changedBlocks.push(...outdentBlocksWithMerge(blocks, writer));
+                }
+            }
+            // Align the list item type to match the previous list item (from the same list).
+            for (const block of changedBlocks) {
+                // This block become a plain block (for example a paragraph).
+                if (!block.hasAttribute('listType')) {
+                    continue;
+                }
+                const previousItemBlock = ListWalker.first(block, { sameIndent: true });
+                if (previousItemBlock) {
+                    writer.setAttribute('listType', previousItemBlock.getAttribute('listType'), block);
+                }
+            }
+            this._fireAfterExecute(changedBlocks);
+        });
+    }
+    /**
+     * Fires the `afterExecute` event.
+     *
+     * @param changedBlocks The changed list elements.
+     */
+    _fireAfterExecute(changedBlocks) {
+        this.fire('afterExecute', sortBlocks(new Set(changedBlocks)));
+    }
+    /**
+     * Checks whether the command can be enabled in the current context.
+     *
+     * @returns Whether the command should be enabled.
+     */
+    _checkEnabled() {
+        // Check whether any of position's ancestor is a list item.
+        let blocks = getSelectedListBlocks(this.editor.model.document.selection);
+        let firstBlock = blocks[0];
+        // If selection is not in a list item, the command is disabled.
+        if (!firstBlock) {
+            return false;
+        }
+        // If we are outdenting it is enough to be in list item. Every list item can always be outdented.
+        if (this._direction == 'backward') {
+            return true;
+        }
+        // A single block of a list item is selected, so it could be indented as a sublist.
+        if (isSingleListItem(blocks) && !isFirstBlockOfListItem(blocks[0])) {
+            return true;
+        }
+        blocks = expandListBlocksToCompleteItems(blocks);
+        firstBlock = blocks[0];
+        // Check if there is any list item before selected items that could become a parent of selected items.
+        const siblingItem = ListWalker.first(firstBlock, { sameIndent: true });
+        if (!siblingItem) {
+            return false;
+        }
+        if (siblingItem.getAttribute('listType') == firstBlock.getAttribute('listType')) {
+            return true;
+        }
+        return false;
+    }
+}
+/**
+ * Returns an array of selected blocks truncated to the first non list block element.
+ */
+function getSelectedListBlocks(selection) {
+    const blocks = Array.from(selection.getSelectedBlocks());
+    const firstNonListBlockIndex = blocks.findIndex(block => !isListItemBlock(block));
+    if (firstNonListBlockIndex != -1) {
+        blocks.length = firstNonListBlockIndex;
+    }
+    return blocks;
+}

package/src/list/listmergecommand.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module list/list/listmergecommand
+ */
+import { Command, type Editor } from 'ckeditor5/src/core.js';
+import type { Element } 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 {
+    /**
+     * Whether list item should be merged before or after the selected block.
+     */
+    private readonly _direction;
+    /**
+     * Creates an instance of the command.
+     *
+     * @param editor The editor instance.
+     * @param direction Whether list item should be merged before or after the selected block.
+     */
+    constructor(editor: Editor, direction: 'forward' | 'backward');
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Merges list blocks together (depending on the {@link #constructor}'s `direction` parameter).
+     *
+     * @fires execute
+     * @fires afterExecute
+     * @param options Command options.
+     * @param options.shouldMergeOnBlocksContentLevel When set `true`, merging will be performed together
+     * with {@link module:engine/model/model~Model#deleteContent} 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.
+     */
+    execute({ shouldMergeOnBlocksContentLevel }?: {
+        shouldMergeOnBlocksContentLevel?: boolean;
+    }): void;
+    /**
+     * Fires the `afterExecute` event.
+     *
+     * @param changedBlocks The changed list elements.
+     */
+    private _fireAfterExecute;
+    /**
+     * Checks whether the command can be enabled in the current context.
+     *
+     * @returns Whether the command should be enabled.
+     */
+    private _checkEnabled;
+    /**
+     * Returns the boundary elements the merge should be executed for. These are not necessarily selection's first
+     * and last position parents but sometimes sibling or even further blocks depending on the context.
+     *
+     * @param selection The selection the merge is executed for.
+     * @param shouldMergeOnBlocksContentLevel When `true`, merge is performed together with
+     * {@link module:engine/model/model~Model#deleteContent} to remove the inline content within the selection.
+     */
+    private _getMergeSubjectElements;
+}
+/**
+ * Event fired by the {@link ~ListMergeCommand#execute} method.
+ *
+ * It allows to execute an action after executing the {@link module:list/list/listcommand~ListCommand#execute}
+ * method, for example adjusting attributes of changed list items.
+ *
+ * @internal
+ * @eventName ~ListMergeCommand#afterExecute
+ */
+export type ListMergeCommandAfterExecuteEvent = {
+    name: 'afterExecute';
+    args: [changedBlocks: Array<Element>];
+};

package/src/list/listmergecommand.js

@@ -0,0 +1,174 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module list/list/listmergecommand
+ */
+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';
+/**
+ * The document list merge command. It is used by the {@link module:list/list~List list feature}.
+ */
+export default class ListMergeCommand extends Command {
+    /**
+     * Creates an instance of the command.
+     *
+     * @param editor The editor instance.
+     * @param direction Whether list item should be merged before or after the selected block.
+     */
+    constructor(editor, direction) {
+        super(editor);
+        this._direction = direction;
+    }
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        this.isEnabled = this._checkEnabled();
+    }
+    /**
+     * Merges list blocks together (depending on the {@link #constructor}'s `direction` parameter).
+     *
+     * @fires execute
+     * @fires afterExecute
+     * @param options Command options.
+     * @param options.shouldMergeOnBlocksContentLevel When set `true`, merging will be performed together
+     * with {@link module:engine/model/model~Model#deleteContent} 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.
+     */
+    execute({ shouldMergeOnBlocksContentLevel = false } = {}) {
+        const model = this.editor.model;
+        const selection = model.document.selection;
+        const changedBlocks = [];
+        model.change(writer => {
+            const { firstElement, lastElement } = this._getMergeSubjectElements(selection, shouldMergeOnBlocksContentLevel);
+            const firstIndent = firstElement.getAttribute('listIndent') || 0;
+            const lastIndent = lastElement.getAttribute('listIndent');
+            const lastElementId = lastElement.getAttribute('listItemId');
+            if (firstIndent != lastIndent) {
+                const nestedLastElementBlocks = getNestedListBlocks(lastElement);
+                changedBlocks.push(...indentBlocks([lastElement, ...nestedLastElementBlocks], writer, {
+                    indentBy: firstIndent - lastIndent,
+                    // If outdenting, the entire sub-tree that follows must be included.
+                    expand: firstIndent < lastIndent
+                }));
+            }
+            if (shouldMergeOnBlocksContentLevel) {
+                let sel = selection;
+                if (selection.isCollapsed) {
+                    sel = writer.createSelection(writer.createRange(writer.createPositionAt(firstElement, 'end'), writer.createPositionAt(lastElement, 0)));
+                }
+                // Delete selected content. Replace entire content only for non-collapsed selection.
+                model.deleteContent(sel, { doNotResetEntireContent: selection.isCollapsed });
+                // Get the last "touched" element after deleteContent call (can't use the lastElement because
+                // it could get merged into the firstElement while deleting content).
+                const lastElementAfterDelete = sel.getLastPosition().parent;
+                // Check if the element after it was in the same list item and adjust it if needed.
+                const nextSibling = lastElementAfterDelete.nextSibling;
+                changedBlocks.push(lastElementAfterDelete);
+                if (nextSibling && nextSibling !== lastElement && nextSibling.getAttribute('listItemId') == lastElementId) {
+                    changedBlocks.push(...mergeListItemBefore(nextSibling, lastElementAfterDelete, writer));
+                }
+            }
+            else {
+                changedBlocks.push(...mergeListItemBefore(lastElement, firstElement, writer));
+            }
+            this._fireAfterExecute(changedBlocks);
+        });
+    }
+    /**
+     * Fires the `afterExecute` event.
+     *
+     * @param changedBlocks The changed list elements.
+     */
+    _fireAfterExecute(changedBlocks) {
+        this.fire('afterExecute', sortBlocks(new Set(changedBlocks)));
+    }
+    /**
+     * Checks whether the command can be enabled in the current context.
+     *
+     * @returns Whether the command should be enabled.
+     */
+    _checkEnabled() {
+        const model = this.editor.model;
+        const selection = model.document.selection;
+        const selectedBlockObject = getSelectedBlockObject(model);
+        if (selection.isCollapsed || selectedBlockObject) {
+            const positionParent = selectedBlockObject || selection.getFirstPosition().parent;
+            if (!isListItemBlock(positionParent)) {
+                return false;
+            }
+            const siblingNode = this._direction == 'backward' ?
+                positionParent.previousSibling :
+                positionParent.nextSibling;
+            if (!siblingNode) {
+                return false;
+            }
+            if (isSingleListItem([positionParent, siblingNode])) {
+                return false;
+            }
+        }
+        else {
+            const lastPosition = selection.getLastPosition();
+            const firstPosition = selection.getFirstPosition();
+            // If deleting within a single block of a list item, there's no need to merge anything.
+            // The default delete should be executed instead.
+            if (lastPosition.parent === firstPosition.parent) {
+                return false;
+            }
+            if (!isListItemBlock(lastPosition.parent)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+     * Returns the boundary elements the merge should be executed for. These are not necessarily selection's first
+     * and last position parents but sometimes sibling or even further blocks depending on the context.
+     *
+     * @param selection The selection the merge is executed for.
+     * @param shouldMergeOnBlocksContentLevel When `true`, merge is performed together with
+     * {@link module:engine/model/model~Model#deleteContent} to remove the inline content within the selection.
+     */
+    _getMergeSubjectElements(selection, shouldMergeOnBlocksContentLevel) {
+        const model = this.editor.model;
+        const selectedBlockObject = getSelectedBlockObject(model);
+        let firstElement, lastElement;
+        if (selection.isCollapsed || selectedBlockObject) {
+            const positionParent = selectedBlockObject || selection.getFirstPosition().parent;
+            const isFirstBlock = isFirstBlockOfListItem(positionParent);
+            if (this._direction == 'backward') {
+                lastElement = positionParent;
+                if (isFirstBlock && !shouldMergeOnBlocksContentLevel) {
+                    // For the "c" as an anchorElement:
+                    //  * a
+                    //    * b
+                    //  * [c]  <-- this block should be merged with "a"
+                    // It should find "a" element to merge with:
+                    //  * a
+                    //    * b
+                    //    c
+                    firstElement = ListWalker.first(positionParent, { sameIndent: true, lowerIndent: true });
+                }
+                else {
+                    firstElement = positionParent.previousSibling;
+                }
+            }
+            else {
+                // In case of the forward merge there is no case as above, just merge with next sibling.
+                firstElement = positionParent;
+                lastElement = positionParent.nextSibling;
+            }
+        }
+        else {
+            firstElement = selection.getFirstPosition().parent;
+            lastElement = selection.getLastPosition().parent;
+        }
+        return {
+            firstElement: firstElement,
+            lastElement: lastElement
+        };
+    }
+}

package/src/list/listsplitcommand.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module list/list/listsplitcommand
+ */
+import type { Element } from 'ckeditor5/src/engine.js';
+import { Command, type Editor } from 'ckeditor5/src/core.js';
+/**
+ * The document list split command that splits the list item at the selection.
+ *
+ * It is used by the {@link module:list/list~List list feature}.
+ */
+export default class ListSplitCommand extends Command {
+    /**
+     * Whether list item should be split before or after the selected block.
+     */
+    private readonly _direction;
+    /**
+     * Creates an instance of the command.
+     *
+     * @param editor The editor instance.
+     * @param direction Whether list item should be split before or after the selected block.
+     */
+    constructor(editor: Editor, direction: 'before' | 'after');
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Splits the list item at the selection.
+     *
+     * @fires execute
+     * @fires afterExecute
+     */
+    execute(): void;
+    /**
+     * Fires the `afterExecute` event.
+     *
+     * @param changedBlocks The changed list elements.
+     */
+    private _fireAfterExecute;
+    /**
+     * Checks whether the command can be enabled in the current context.
+     *
+     * @returns Whether the command should be enabled.
+     */
+    private _checkEnabled;
+    /**
+     * Returns the model element that is the main focus of the command (according to the current selection and command direction).
+     */
+    private _getStartBlock;
+}
+/**
+ * Event fired by the {@link ~ListSplitCommand#execute} method.
+ *
+ * It allows to execute an action after executing the {@link module:list/list/listcommand~ListCommand#execute}
+ * method, for example adjusting attributes of changed list items.
+ *
+ * @internal
+ * @eventName ~ListSplitCommand#afterExecute
+ */
+export type ListSplitCommandAfterExecuteEvent = {
+    name: 'afterExecute';
+    args: [changedBlocks: Array<Element>];
+};

package/src/list/listsplitcommand.js

@@ -0,0 +1,70 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { Command } from 'ckeditor5/src/core.js';
+import { isFirstBlockOfListItem, isListItemBlock, sortBlocks, splitListItemBefore } from './utils/model.js';
+/**
+ * The document list split command that splits the list item at the selection.
+ *
+ * It is used by the {@link module:list/list~List list feature}.
+ */
+export default class ListSplitCommand extends Command {
+    /**
+     * Creates an instance of the command.
+     *
+     * @param editor The editor instance.
+     * @param direction Whether list item should be split before or after the selected block.
+     */
+    constructor(editor, direction) {
+        super(editor);
+        this._direction = direction;
+    }
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        this.isEnabled = this._checkEnabled();
+    }
+    /**
+     * Splits the list item at the selection.
+     *
+     * @fires execute
+     * @fires afterExecute
+     */
+    execute() {
+        const editor = this.editor;
+        editor.model.change(writer => {
+            const changedBlocks = splitListItemBefore(this._getStartBlock(), writer);
+            this._fireAfterExecute(changedBlocks);
+        });
+    }
+    /**
+     * Fires the `afterExecute` event.
+     *
+     * @param changedBlocks The changed list elements.
+     */
+    _fireAfterExecute(changedBlocks) {
+        this.fire('afterExecute', sortBlocks(new Set(changedBlocks)));
+    }
+    /**
+     * Checks whether the command can be enabled in the current context.
+     *
+     * @returns Whether the command should be enabled.
+     */
+    _checkEnabled() {
+        const selection = this.editor.model.document.selection;
+        const block = this._getStartBlock();
+        return selection.isCollapsed &&
+            isListItemBlock(block) &&
+            !isFirstBlockOfListItem(block);
+    }
+    /**
+     * Returns the model element that is the main focus of the command (according to the current selection and command direction).
+     */
+    _getStartBlock() {
+        const doc = this.editor.model.document;
+        const positionParent = doc.selection.getFirstPosition().parent;
+        return (this._direction == 'before' ? positionParent : positionParent.nextSibling);
+    }
+}

package/src/list/listui.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+/**
+ * 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.
+ */
+export default class ListUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ListUI";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+}

package/src/list/listui.js

@@ -0,0 +1,41 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module list/list/listui
+ */
+import { createUIComponents } from './utils.js';
+import { icons, Plugin } from 'ckeditor5/src/core.js';
+/**
+ * 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.
+ */
+export default class ListUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ListUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const t = this.editor.t;
+        // Create button numberedList.
+        if (!this.editor.ui.componentFactory.has('numberedList')) {
+            createUIComponents(this.editor, 'numberedList', t('Numbered List'), icons.numberedList);
+        }
+        // Create button bulletedList.
+        if (!this.editor.ui.componentFactory.has('bulletedList')) {
+            createUIComponents(this.editor, 'bulletedList', t('Bulleted List'), icons.bulletedList);
+        }
+    }
+}