@ckeditor/ckeditor5-indent 47.6.1 → 48.0.0-alpha.0

package/src/indentui.js

@@ -1,79 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module indent/indentui
- */
-import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
-import { Plugin } from 'ckeditor5/src/core.js';
-import { IconIndent, IconOutdent } from 'ckeditor5/src/icons.js';
-/**
- * The indent UI feature.
- *
- * This plugin registers the `'indent'` and `'outdent'` buttons.
- *
- * **Note**: In order for the commands to work, at least one of the compatible features is required. Read more in
- * the {@link module:indent/indent~Indent indent feature} API documentation.
- */
-export class IndentUI extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'IndentUI';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const locale = editor.locale;
-        const t = editor.t;
-        const localizedIndentIcon = locale.uiLanguageDirection == 'ltr' ? IconIndent : IconOutdent;
-        const localizedOutdentIcon = locale.uiLanguageDirection == 'ltr' ? IconOutdent : IconIndent;
-        this._defineButton('indent', t('Increase indent'), localizedIndentIcon);
-        this._defineButton('outdent', t('Decrease indent'), localizedOutdentIcon);
-    }
-    /**
-     * Defines UI buttons for both toolbar and menu bar.
-     */
-    _defineButton(commandName, label, icon) {
-        const editor = this.editor;
-        editor.ui.componentFactory.add(commandName, () => {
-            const buttonView = this._createButton(ButtonView, commandName, label, icon);
-            buttonView.set({
-                tooltip: true
-            });
-            return buttonView;
-        });
-        editor.ui.componentFactory.add('menuBar:' + commandName, () => {
-            return this._createButton(MenuBarMenuListItemButtonView, commandName, label, icon);
-        });
-    }
-    /**
-     * Creates a button to use either in toolbar or in menu bar.
-     */
-    _createButton(ButtonClass, commandName, label, icon) {
-        const editor = this.editor;
-        const command = editor.commands.get(commandName);
-        const view = new ButtonClass(editor.locale);
-        view.set({
-            label,
-            icon
-        });
-        view.bind('isEnabled').to(command, 'isEnabled');
-        // Execute the command.
-        this.listenTo(view, 'execute', () => {
-            editor.execute(commandName);
-            editor.editing.view.focus();
-        });
-        return view;
-    }
-}

package/src/index.js

@@ -1,18 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module indent
- */
-export { Indent } from './indent.js';
-export { IndentEditing } from './indentediting.js';
-export { IndentUI } from './indentui.js';
-export { IndentBlock } from './indentblock.js';
-export { IndentBlockCommand } from './indentblockcommand.js';
-export { IndentBlockListIntegration } from './integrations/indentblocklistintegration.js';
-export { IndentBlockListCommand } from './integrations/indentblocklistcommand.js';
-export { IndentBlockListItemCommand } from './integrations/indentblocklistitemcommand.js';
-export { IndentUsingClasses as _IndentUsingClasses } from './indentcommandbehavior/indentusingclasses.js';
-export { IndentUsingOffset as _IndentUsingOffset } from './indentcommandbehavior/indentusingoffset.js';
-import './augmentation.js';

package/src/integrations/indentblocklistcommand.js

@@ -1,108 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module indent/integrations/indentblocklistcommand
- */
-import { Command } from 'ckeditor5/src/core.js';
-import { _isListItemBlock } from '@ckeditor/ckeditor5-list';
-/**
- * The indent block list command.
- *
- * The command is registered by the {@link module:indent/integrations/indentblocklistintegration~IndentBlockListIntegration} as
- * `'indentBlockList'` for indenting lists and `'outdentBlockList'` for outdenting lists.
- *
- * To increase/decrease block indentation of the list the selection must be at the start of the first top–level list item
- * in the list.
- *
- * To increase block indentation of the list, execute the command:
- *
- * ```ts
- * editor.execute( 'indentBlockList' );
- * ```
- *
- * To decrease block indentation of the list, execute the command:
- *
- * ```ts
- * editor.execute( 'outdentBlockList' );
- * ```
- */
-export class IndentBlockListCommand extends Command {
-    /**
-     * The command's indentation behavior.
-     */
-    _indentBehavior;
-    /**
-     * Creates an instance of the command.
-     */
-    constructor(editor, indentBehavior) {
-        super(editor);
-        this._indentBehavior = indentBehavior;
-    }
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const listItem = this._getFirstListItemIfSelectionIsAtListStart(this.editor.model.document.selection);
-        this.isEnabled = !!listItem && this._indentBehavior.checkEnabled(listItem.getAttribute('blockIndentList'));
-    }
-    /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @param options Command options.
-     * @param options.firstListOnly When `true`, indentation is applied only to the first list at the beginning of the selection.
-     * When `false` or omitted, indentation is applied to all lists of the selection.
-     */
-    execute(options = {}) {
-        const editor = this.editor;
-        const model = editor.model;
-        const selection = model.document.selection;
-        model.change(writer => {
-            const listItem = this._getFirstListItemIfSelectionIsAtListStart(selection);
-            const listItems = [];
-            if (!options.firstListOnly) {
-                const blocks = Array.from(selection.getSelectedBlocks());
-                for (const block of blocks) {
-                    if (_isListItemBlock(block) &&
-                        block.getAttribute('listIndent') === 0 &&
-                        model.schema.checkAttribute(block, 'blockIndentList')) {
-                        listItems.push(block);
-                    }
-                }
-            }
-            else {
-                listItems.push(listItem);
-            }
-            for (const item of listItems) {
-                const currentIndent = item.getAttribute('blockIndentList');
-                const nextIndent = this._indentBehavior.getNextIndent(currentIndent);
-                if (nextIndent) {
-                    writer.setAttribute('blockIndentList', nextIndent, item);
-                }
-                else {
-                    writer.removeAttribute('blockIndentList', item);
-                }
-            }
-        });
-    }
-    /**
-     * Returns the list item at the beginning of the current selection if it is the first top–level list item in the list.
-     * Otherwise, returns `null`.
-     */
-    _getFirstListItemIfSelectionIsAtListStart(selection) {
-        const position = selection.getFirstPosition();
-        const listUtils = this.editor.plugins.get('ListUtils');
-        const parent = position.parent;
-        const schema = this.editor.model.schema;
-        if (position.isAtStart &&
-            _isListItemBlock(parent) &&
-            parent.getAttribute('listIndent') == 0 &&
-            schema.checkAttribute(parent, 'blockIndentList') &&
-            listUtils.isFirstListItemInList(parent)) {
-            return parent;
-        }
-        return null;
-    }
-}

package/src/integrations/indentblocklistintegration.js

@@ -1,328 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { addMarginStylesRules } from 'ckeditor5/src/engine.js';
-import { IndentBlockListCommand } from './indentblocklistcommand.js';
-import { IndentBlockListItemCommand } from './indentblocklistitemcommand.js';
-import { IndentUsingOffset } from '../indentcommandbehavior/indentusingoffset.js';
-import { IndentUsingClasses } from '../indentcommandbehavior/indentusingclasses.js';
-/**
- * This integration enables using block indentation feature with lists.
- */
-export class IndentBlockListIntegration extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'IndentBlockListIntegration';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        if (!this.editor.plugins.has('ListEditing')) {
-            return;
-        }
-        const config = editor.config.get('indentBlock');
-        if (config.classes && config.classes.length) {
-            this._setupConversionUsingClassesForListBlock(config.classes);
-            this._setupConversionUsingClassesForListItemBlock(config.classes);
-            editor.commands.add('indentBlockList', new IndentBlockListCommand(editor, new IndentUsingClasses({
-                direction: 'forward',
-                classes: config.classes
-            })));
-            editor.commands.add('outdentBlockList', new IndentBlockListCommand(editor, new IndentUsingClasses({
-                direction: 'backward',
-                classes: config.classes
-            })));
-            editor.commands.add('indentBlockListItem', new IndentBlockListItemCommand(editor, new IndentUsingClasses({
-                direction: 'forward',
-                classes: config.classes
-            })));
-            editor.commands.add('outdentBlockListItem', new IndentBlockListItemCommand(editor, new IndentUsingClasses({
-                direction: 'backward',
-                classes: config.classes
-            })));
-        }
-        else {
-            editor.data.addStyleProcessorRules(addMarginStylesRules);
-            this._setupConversionUsingOffsetForListBlock();
-            this._setupConversionUsingOffsetForListItemBlock();
-            editor.commands.add('indentBlockList', new IndentBlockListCommand(editor, new IndentUsingOffset({
-                direction: 'forward',
-                offset: config.offset,
-                unit: config.unit
-            })));
-            editor.commands.add('outdentBlockList', new IndentBlockListCommand(editor, new IndentUsingOffset({
-                direction: 'backward',
-                offset: config.offset,
-                unit: config.unit
-            })));
-            editor.commands.add('indentBlockListItem', new IndentBlockListItemCommand(editor, new IndentUsingOffset({
-                direction: 'forward',
-                offset: config.offset,
-                unit: config.unit
-            })));
-            editor.commands.add('outdentBlockListItem', new IndentBlockListItemCommand(editor, new IndentUsingOffset({
-                direction: 'backward',
-                offset: config.offset,
-                unit: config.unit
-            })));
-        }
-        const listEditing = editor.plugins.get('ListEditing');
-        // Make sure that all items in a single list (items at the same level & listType) have the same blockIndentList attribute value.
-        listEditing.on('postFixer', (evt, { listNodes, writer }) => {
-            for (const { node, previousNodeInList } of listNodes) {
-                // This is a first item of a nested list.
-                if (!previousNodeInList) {
-                    continue;
-                }
-                if (previousNodeInList.getAttribute('listType') != node.getAttribute('listType')) {
-                    continue;
-                }
-                if (ensureIndentValuesConsistency('blockIndentList', node, previousNodeInList, writer)) {
-                    evt.return = true;
-                }
-                if (previousNodeInList.getAttribute('listItemId') != node.getAttribute('listItemId')) {
-                    continue;
-                }
-                if (ensureIndentValuesConsistency('blockIndentListItem', node, previousNodeInList, writer)) {
-                    evt.return = true;
-                }
-            }
-        });
-        this.listenTo(editor.editing.view.document, 'tab', (evt, data) => {
-            const commandName = data.shiftKey ? 'outdentBlockList' : 'indentBlockList';
-            const command = this.editor.commands.get(commandName);
-            if (command.isEnabled) {
-                editor.execute(commandName, { firstListOnly: true });
-                data.stopPropagation();
-                data.preventDefault();
-                evt.stop();
-            }
-        }, { context: 'li', priority: 'high' });
-    }
-    /**
-     * @inheritDoc
-     */
-    afterInit() {
-        const editor = this.editor;
-        const model = editor.model;
-        const schema = model.schema;
-        if (!editor.plugins.has('ListEditing')) {
-            return;
-        }
-        // Schema registration.
-        schema.extend('$listItem', { allowAttributes: ['blockIndentList', 'blockIndentListItem'] });
-        schema.setAttributeProperties('blockIndentList', { isFormatting: true });
-        schema.setAttributeProperties('blockIndentListItem', { isFormatting: true });
-        model.schema.addAttributeCheck(context => {
-            const item = context.last;
-            if (!item.getAttribute('listItemId')) {
-                return false;
-            }
-        }, 'blockIndentList');
-        model.schema.addAttributeCheck(context => {
-            const item = context.last;
-            if (!item.getAttribute('listItemId')) {
-                return false;
-            }
-        }, 'blockIndentListItem');
-        // Clear blockIndentList and blockIndentListItem when list indent changes.
-        const clearBlockIndentAttributesOnListIndentChange = (_evt, changedBlocks) => {
-            editor.model.change(writer => {
-                for (const node of changedBlocks) {
-                    if (node.hasAttribute('listItemId')) {
-                        if (node.hasAttribute('blockIndentList')) {
-                            writer.removeAttribute('blockIndentList', node);
-                        }
-                        if (node.hasAttribute('blockIndentListItem')) {
-                            writer.removeAttribute('blockIndentListItem', node);
-                        }
-                    }
-                }
-            });
-        };
-        const indentListCommand = editor.commands.get('indentList');
-        const outdentListCommand = editor.commands.get('outdentList');
-        if (indentListCommand) {
-            this.listenTo(indentListCommand, 'afterExecute', clearBlockIndentAttributesOnListIndentChange);
-        }
-        if (outdentListCommand) {
-            this.listenTo(outdentListCommand, 'afterExecute', clearBlockIndentAttributesOnListIndentChange);
-        }
-        // Register list block indent commands in multi command.
-        const indentCommand = editor.commands.get('indent');
-        const outdentCommand = editor.commands.get('outdent');
-        indentCommand.registerChildCommand(editor.commands.get('indentBlockList'));
-        outdentCommand.registerChildCommand(editor.commands.get('outdentBlockList'));
-        indentCommand.registerChildCommand(editor.commands.get('indentBlockListItem'));
-        outdentCommand.registerChildCommand(editor.commands.get('outdentBlockListItem'));
-    }
-    /**
-     * Setups conversion for list block indent using offset indents.
-     */
-    _setupConversionUsingOffsetForListBlock() {
-        const editor = this.editor;
-        const conversion = editor.conversion;
-        const locale = editor.locale;
-        const marginProperty = locale.contentLanguageDirection === 'rtl' ? 'margin-right' : 'margin-left';
-        const listEditing = editor.plugins.get('ListEditing');
-        conversion.for('upcast').add(dispatcher => {
-            dispatcher.on('element:ol', listBlockIndentUpcastConverter('blockIndentList', marginProperty));
-            dispatcher.on('element:ul', listBlockIndentUpcastConverter('blockIndentList', marginProperty));
-        });
-        listEditing.registerDowncastStrategy({
-            scope: 'list',
-            attributeName: 'blockIndentList',
-            setAttributeOnDowncast(writer, value, element) {
-                if (value) {
-                    writer.setStyle(marginProperty, value, element);
-                }
-            }
-        });
-    }
-    /**
-     * Setups conversion for list item block indent using offset indents.
-     */
-    _setupConversionUsingOffsetForListItemBlock() {
-        const editor = this.editor;
-        const locale = editor.locale;
-        const conversion = editor.conversion;
-        const marginProperty = locale.contentLanguageDirection === 'rtl' ? 'margin-right' : 'margin-left';
-        const listEditing = editor.plugins.get('ListEditing');
-        conversion.for('upcast').add(dispatcher => {
-            dispatcher.on('element:li', listBlockIndentUpcastConverter('blockIndentListItem', marginProperty), { priority: 'low' });
-        });
-        listEditing.registerDowncastStrategy({
-            scope: 'item',
-            attributeName: 'blockIndentListItem',
-            setAttributeOnDowncast(writer, value, element) {
-                if (value) {
-                    writer.setStyle(marginProperty, value, element);
-                }
-            }
-        });
-    }
-    /**
-     * Setups conversion for list block indent using classes.
-     */
-    _setupConversionUsingClassesForListBlock(classes) {
-        const editor = this.editor;
-        const conversion = editor.conversion;
-        const listEditing = editor.plugins.get('ListEditing');
-        conversion.for('upcast').add(dispatcher => {
-            dispatcher.on('element:ol', listBlockIndentUpcastConverterUsingClasses('blockIndentList', classes));
-            dispatcher.on('element:ul', listBlockIndentUpcastConverterUsingClasses('blockIndentList', classes));
-        });
-        listEditing.registerDowncastStrategy({
-            scope: 'list',
-            attributeName: 'blockIndentList',
-            setAttributeOnDowncast(writer, value, element) {
-                if (value) {
-                    writer.addClass(value, element);
-                }
-            }
-        });
-    }
-    /**
-     * Setups conversion for list item block indent using classes.
-     */
-    _setupConversionUsingClassesForListItemBlock(classes) {
-        const editor = this.editor;
-        const conversion = editor.conversion;
-        const listEditing = editor.plugins.get('ListEditing');
-        conversion.for('upcast').add(dispatcher => {
-            dispatcher.on('element:li', listBlockIndentUpcastConverterUsingClasses('blockIndentListItem', classes), { priority: 'low' });
-        });
-        listEditing.registerDowncastStrategy({
-            scope: 'item',
-            attributeName: 'blockIndentListItem',
-            setAttributeOnDowncast(writer, value, element) {
-                if (value) {
-                    writer.addClass(value, element);
-                }
-            }
-        });
-    }
-}
-function listBlockIndentUpcastConverterUsingClasses(attributeName, classes) {
-    return (evt, data, conversionApi) => {
-        const { writer, consumable } = conversionApi;
-        if (!data.modelRange) {
-            Object.assign(data, conversionApi.convertChildren(data.viewItem, data.modelCursor));
-        }
-        const viewClasses = Array.from(data.viewItem.getClassNames());
-        const matchedClass = classes.find(cls => viewClasses.includes(cls));
-        if (matchedClass === undefined) {
-            return;
-        }
-        let applied = false;
-        let indentLevel;
-        for (const item of data.modelRange.getItems({ shallow: true })) {
-            if (indentLevel === undefined) {
-                indentLevel = item.getAttribute('listIndent');
-            }
-            if (item.hasAttribute(attributeName)) {
-                continue;
-            }
-            if (item.getAttribute('listIndent') !== indentLevel) {
-                continue;
-            }
-            writer.setAttribute(attributeName, matchedClass, item);
-            applied = true;
-        }
-        if (applied) {
-            consumable.consume(data.viewItem, { classes: matchedClass });
-        }
-    };
-}
-function listBlockIndentUpcastConverter(attributeName, marginProperty) {
-    return (evt, data, conversionApi) => {
-        const { writer, consumable } = conversionApi;
-        if (!data.modelRange) {
-            Object.assign(data, conversionApi.convertChildren(data.viewItem, data.modelCursor));
-        }
-        const marginValue = data.viewItem.getStyle(marginProperty);
-        let applied = false;
-        let indentLevel;
-        for (const item of data.modelRange.getItems({ shallow: true })) {
-            if (indentLevel === undefined) {
-                indentLevel = item.getAttribute('listIndent');
-            }
-            if (item.hasAttribute(attributeName)) {
-                continue;
-            }
-            if (item.getAttribute('listIndent') !== indentLevel) {
-                continue;
-            }
-            writer.setAttribute(attributeName, marginValue, item);
-            applied = true;
-        }
-        if (applied) {
-            consumable.consume(data.viewItem, { styles: marginProperty });
-        }
-    };
-}
-function ensureIndentValuesConsistency(attributeName, node, previousNodeInList, writer) {
-    const prevNodeIndentListValue = previousNodeInList.getAttribute(attributeName);
-    if (node.getAttribute(attributeName) === prevNodeIndentListValue) {
-        return false;
-    }
-    if (prevNodeIndentListValue) {
-        writer.setAttribute(attributeName, prevNodeIndentListValue, node);
-    }
-    else {
-        writer.removeAttribute(attributeName, node);
-    }
-    return true;
-}

package/src/integrations/indentblocklistitemcommand.js

@@ -1,96 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module indent/integrations/indentblocklistitemcommand
- */
-import { Command } from 'ckeditor5/src/core.js';
-/**
- * The indent block list item command.
- *
- * The command is registered by the {@link module:indent/integrations/indentblocklistintegration~IndentBlockListIntegration} as
- * `'indentBlockListItem'` for indenting list items and `'outdentBlockListItem'` for outdenting list items.
- *
- * It's only possible to reset the block indentation of a list item to `0`.
- * This means that if a list item has negative block indentation, the command will only allow forward indentation
- * to make it possible to reset it to `0` and if a list item has positive block indentation, the command
- * will only allow backward indentation to make it possible to reset it to `0`.
- *
- * To increase block indentation of the list item, execute the command:
- *
- * ```ts
- * editor.execute( 'indentBlockListItem' );
- * ```
- *
- * To decrease block indentation of the list item, execute the command:
- *
- * ```ts
- * editor.execute( 'outdentBlockListItem' );
- * ```
- */
-export class IndentBlockListItemCommand extends Command {
-    /**
-     * The command's indentation behavior.
-     */
-    _indentBehavior;
-    /**
-     * Creates an instance of the command.
-     */
-    constructor(editor, indentBehavior) {
-        super(editor);
-        this._indentBehavior = indentBehavior;
-    }
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        this.isEnabled = this._getAffectedListItems().length > 0;
-    }
-    /**
-     * @inheritDoc
-     */
-    execute() {
-        const editor = this.editor;
-        const model = editor.model;
-        model.change(writer => {
-            for (const block of this._getAffectedListItems()) {
-                writer.removeAttribute('blockIndentListItem', block);
-            }
-        });
-    }
-    /**
-     * Returns an array of list items which block indentation should be changed.
-     */
-    _getAffectedListItems() {
-        const model = this.editor.model;
-        const selection = model.document.selection;
-        const listUtils = this.editor.plugins.get('ListUtils');
-        const blocksInSelection = Array.from(selection.getSelectedBlocks());
-        const expandedBlocks = listUtils.expandListBlocksToCompleteItems(blocksInSelection);
-        return expandedBlocks.filter(block => this._isIndentationChangeAllowed(block));
-    }
-    /**
-     * Returns `true` if changing the block indentation is allowed for the given list item.
-     *
-     * Indentation of a list item is only allowed if it moves toward zero. This means that:
-     * - when currentIndent = 0, the command should be disabled
-     * - when currentIndent < 0, only forward indentation should be allowed
-     * - when currentIndent > 0, only backward indentation should be allowed
-     *
-     * For classes-based indentation, the command should be enabled if there is a class to be removed.
-     */
-    _isIndentationChangeAllowed(element) {
-        if (!element.hasAttribute('blockIndentListItem')) {
-            return false;
-        }
-        const currentIndent = parseFloat(element.getAttribute('blockIndentListItem'));
-        // Class based indent, allow only outdent.
-        // TODO find a better way, probably use behavior to find out.
-        if (isNaN(currentIndent)) {
-            return !this._indentBehavior.isForward;
-        }
-        return this._indentBehavior.isForward && currentIndent < 0 ||
-            !this._indentBehavior.isForward && currentIndent > 0;
-    }
-}