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

package/src/tablemouse.js

@@ -1,178 +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 table/tablemouse
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { TableSelection } from './tableselection.js';
-import { MouseEventsObserver } from './tablemouse/mouseeventsobserver.js';
-import { TableUtils } from './tableutils.js';
-/**
- * This plugin enables a table cells' selection with the mouse.
- * It is loaded automatically by the {@link module:table/table~Table} plugin.
- */
-export class TableMouse extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'TableMouse';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [TableSelection, TableUtils];
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        // Currently the MouseObserver only handles `mousedown` and `mouseup` events.
-        // TODO move to the engine?
-        editor.editing.view.addObserver(MouseEventsObserver);
-        this._enableShiftClickSelection();
-        this._enableMouseDragSelection();
-    }
-    /**
-     * Enables making cells selection by <kbd>Shift</kbd>+click. Creates a selection from the cell which previously held
-     * the selection to the cell which was clicked. It can be the same cell, in which case it selects a single cell.
-     */
-    _enableShiftClickSelection() {
-        const editor = this.editor;
-        const tableUtils = editor.plugins.get(TableUtils);
-        let blockSelectionChange = false;
-        const tableSelection = editor.plugins.get(TableSelection);
-        this.listenTo(editor.editing.view.document, 'mousedown', (evt, domEventData) => {
-            const selection = editor.model.document.selection;
-            if (!this.isEnabled || !tableSelection.isEnabled) {
-                return;
-            }
-            if (!domEventData.domEvent.shiftKey) {
-                return;
-            }
-            const anchorCell = tableSelection.getAnchorCell() || tableUtils.getTableCellsContainingSelection(selection)[0];
-            if (!anchorCell) {
-                return;
-            }
-            const targetCell = this._getModelTableCellFromDomEvent(domEventData);
-            if (targetCell && haveSameTableParent(anchorCell, targetCell)) {
-                blockSelectionChange = true;
-                tableSelection.setCellSelection(anchorCell, targetCell);
-                domEventData.preventDefault();
-            }
-        });
-        this.listenTo(editor.editing.view.document, 'mouseup', () => {
-            blockSelectionChange = false;
-        });
-        // We need to ignore a `selectionChange` event that is fired after we render our new table cells selection.
-        // When downcasting table cells selection to the view, we put the view selection in the last selected cell
-        // in a place that may not be natively a "correct" location. This is – we put it directly in the `<td>` element.
-        // All browsers fire the native `selectionchange` event.
-        // However, all browsers except Safari return the selection in the exact place where we put it
-        // (even though it's visually normalized). Safari returns `<td><p>^foo` that makes our selection observer
-        // fire our `selectionChange` event (because the view selection that we set in the first step differs from the DOM selection).
-        // Since `selectionChange` is fired, we automatically update the model selection that moves it that paragraph.
-        // This breaks our dear cells selection.
-        //
-        // Theoretically this issue concerns only Safari that is the only browser that do normalize the selection.
-        // However, to avoid code branching and to have a good coverage for this event blocker, I enabled it for all browsers.
-        //
-        // Note: I'm keeping the `blockSelectionChange` state separately for shift+click and mouse drag (exact same logic)
-        // so I don't have to try to analyze whether they don't overlap in some weird cases. Probably they don't.
-        // But I have other things to do, like writing this comment.
-        this.listenTo(editor.editing.view.document, 'selectionChange', evt => {
-            if (blockSelectionChange) {
-                // @if CK_DEBUG // console.log( 'Blocked selectionChange to avoid breaking table cells selection.' );
-                evt.stop();
-            }
-        }, { priority: 'highest' });
-    }
-    /**
-     * Enables making cells selection by dragging.
-     *
-     * The selection is made only on mousemove. Mouse tracking is started on mousedown.
-     * However, the cells selection is enabled only after the mouse cursor left the anchor cell.
-     * Thanks to that normal text selection within one cell works just fine. However, you can still select
-     * just one cell by leaving the anchor cell and moving back to it.
-     */
-    _enableMouseDragSelection() {
-        const editor = this.editor;
-        let anchorCell, targetCell;
-        let beganCellSelection = false;
-        let blockSelectionChange = false;
-        const tableSelection = editor.plugins.get(TableSelection);
-        this.listenTo(editor.editing.view.document, 'mousedown', (evt, domEventData) => {
-            if (!this.isEnabled || !tableSelection.isEnabled) {
-                return;
-            }
-            // Make sure to not conflict with the shift+click listener and any other possible handler.
-            if (domEventData.domEvent.shiftKey || domEventData.domEvent.ctrlKey || domEventData.domEvent.altKey) {
-                return;
-            }
-            anchorCell = this._getModelTableCellFromDomEvent(domEventData);
-        });
-        this.listenTo(editor.editing.view.document, 'mousemove', (evt, domEventData) => {
-            if (!domEventData.domEvent.buttons) {
-                return;
-            }
-            if (!anchorCell) {
-                return;
-            }
-            const newTargetCell = this._getModelTableCellFromDomEvent(domEventData);
-            if (newTargetCell && haveSameTableParent(anchorCell, newTargetCell)) {
-                targetCell = newTargetCell;
-                // Switch to the cell selection mode after the mouse cursor left the anchor cell.
-                // Switch off only on mouseup (makes selecting a single cell possible).
-                if (!beganCellSelection && targetCell != anchorCell) {
-                    beganCellSelection = true;
-                }
-            }
-            // Yep, not making a cell selection yet. See method docs.
-            if (!beganCellSelection) {
-                return;
-            }
-            blockSelectionChange = true;
-            tableSelection.setCellSelection(anchorCell, targetCell);
-            domEventData.preventDefault();
-        });
-        this.listenTo(editor.editing.view.document, 'mouseup', () => {
-            beganCellSelection = false;
-            blockSelectionChange = false;
-            anchorCell = null;
-            targetCell = null;
-        });
-        // See the explanation in `_enableShiftClickSelection()`.
-        this.listenTo(editor.editing.view.document, 'selectionChange', evt => {
-            if (blockSelectionChange) {
-                // @if CK_DEBUG // console.log( 'Blocked selectionChange to avoid breaking table cells selection.' );
-                evt.stop();
-            }
-        }, { priority: 'highest' });
-    }
-    /**
-     * Returns the model table cell element based on the target element of the passed DOM event.
-     *
-     * @returns Returns the table cell or `undefined`.
-     */
-    _getModelTableCellFromDomEvent(domEventData) {
-        // Note: Work with positions (not element mapping) because the target element can be an attribute or other non-mapped element.
-        const viewTargetElement = domEventData.target;
-        const viewPosition = this.editor.editing.view.createPositionAt(viewTargetElement, 0);
-        const modelPosition = this.editor.editing.mapper.toModelPosition(viewPosition);
-        const modelElement = modelPosition.parent;
-        return modelElement.findAncestor('tableCell', { includeSelf: true });
-    }
-}
-function haveSameTableParent(cellA, cellB) {
-    return cellA.parent.parent == cellB.parent.parent;
-}

package/src/tableproperties/commands/tablealignmentcommand.js

@@ -1,30 +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 { TablePropertyCommand } from './tablepropertycommand.js';
-/**
- * The table alignment command.
- *
- * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * the `'tableAlignment'` editor command.
- *
- * To change the alignment of the selected table, execute the command:
- *
- * ```ts
- * editor.execute( 'tableAlignment', {
- *   value: 'right'
- * } );
- * ```
- */
-export class TableAlignmentCommand extends TablePropertyCommand {
-    /**
-     * Creates a new `TableAlignmentCommand` instance.
-     *
-     * @param editor An editor in which this command will be used.
-     * @param defaultValue The default value for the "alignment" attribute.
-     */
-    constructor(editor, defaultValue) {
-        super(editor, 'tableAlignment', defaultValue);
-    }
-}

package/src/tableproperties/commands/tablebackgroundcolorcommand.js

@@ -1,30 +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 { TablePropertyCommand } from './tablepropertycommand.js';
-/**
- * The table background color command.
- *
- * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * the `'tableBackgroundColor'` editor command.
- *
- * To change the background color of the selected table, execute the command:
- *
- * ```ts
- * editor.execute( 'tableBackgroundColor', {
- *   value: '#f00'
- * } );
- * ```
- */
-export class TableBackgroundColorCommand extends TablePropertyCommand {
-    /**
-     * Creates a new `TableBackgroundColorCommand` instance.
-     *
-     * @param editor An editor in which this command will be used.
-     * @param defaultValue The default value of the attribute.
-     */
-    constructor(editor, defaultValue) {
-        super(editor, 'tableBackgroundColor', defaultValue);
-    }
-}

package/src/tableproperties/commands/tablebordercolorcommand.js

@@ -1,44 +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 { TablePropertyCommand } from './tablepropertycommand.js';
-import { getSingleValue } from '../../utils/table-properties.js';
-/**
- * The table border color command.
- *
- * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * the `'tableBorderColor'` editor command.
- *
- * To change the border color of the selected table, execute the command:
- *
- * ```ts
- * editor.execute( 'tableBorderColor', {
- *   value: '#f00'
- * } );
- * ```
- */
-export class TableBorderColorCommand extends TablePropertyCommand {
-    /**
-     * Creates a new `TableBorderColorCommand` instance.
-     *
-     * @param editor An editor in which this command will be used.
-     * @param defaultValue The default value of the attribute.
-     */
-    constructor(editor, defaultValue) {
-        super(editor, 'tableBorderColor', defaultValue);
-    }
-    /**
-     * @inheritDoc
-     */
-    _getValue(table) {
-        if (!table) {
-            return;
-        }
-        const value = getSingleValue(table.getAttribute(this.attributeName));
-        if (value === this._defaultValue) {
-            return;
-        }
-        return value;
-    }
-}

package/src/tableproperties/commands/tableborderstylecommand.js

@@ -1,44 +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 { TablePropertyCommand } from './tablepropertycommand.js';
-import { getSingleValue } from '../../utils/table-properties.js';
-/**
- * The table style border command.
- *
- * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * the `'tableBorderStyle'` editor command.
- *
- * To change the border style of the selected table, execute the command:
- *
- * ```ts
- * editor.execute( 'tableBorderStyle', {
- *   value: 'dashed'
- * } );
- * ```
- */
-export class TableBorderStyleCommand extends TablePropertyCommand {
-    /**
-     * Creates a new `TableBorderStyleCommand` instance.
-     *
-     * @param editor An editor in which this command will be used.
-     * @param defaultValue The default value of the attribute.
-     */
-    constructor(editor, defaultValue) {
-        super(editor, 'tableBorderStyle', defaultValue);
-    }
-    /**
-     * @inheritDoc
-     */
-    _getValue(table) {
-        if (!table) {
-            return;
-        }
-        const value = getSingleValue(table.getAttribute(this.attributeName));
-        if (value === this._defaultValue) {
-            return;
-        }
-        return value;
-    }
-}

package/src/tableproperties/commands/tableborderwidthcommand.js

@@ -1,64 +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 { TablePropertyCommand } from './tablepropertycommand.js';
-import { addDefaultUnitToNumericValue, getSingleValue } from '../../utils/table-properties.js';
-/**
- * The table width border command.
- *
- * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * the `'tableBorderWidth'` editor command.
- *
- * To change the border width of the selected table, execute the command:
- *
- * ```ts
- * editor.execute( 'tableBorderWidth', {
- *   value: '5px'
- * } );
- * ```
- *
- * **Note**: This command adds the default `'px'` unit to numeric values. Executing:
- *
- * ```ts
- * editor.execute( 'tableBorderWidth', {
- *   value: '5'
- * } );
- * ```
- *
- * will set the `borderWidth` attribute to `'5px'` in the model.
- */
-export class TableBorderWidthCommand extends TablePropertyCommand {
-    /**
-     * Creates a new `TableBorderWidthCommand` instance.
-     *
-     * @param editor An editor in which this command will be used.
-     * @param defaultValue The default value of the attribute.
-     */
-    constructor(editor, defaultValue) {
-        super(editor, 'tableBorderWidth', defaultValue);
-    }
-    /**
-     * @inheritDoc
-     */
-    _getValue(table) {
-        if (!table) {
-            return;
-        }
-        const value = getSingleValue(table.getAttribute(this.attributeName));
-        if (value === this._defaultValue) {
-            return;
-        }
-        return value;
-    }
-    /**
-     * @inheritDoc
-     */
-    _getValueToSet(value) {
-        const newValue = addDefaultUnitToNumericValue(value, 'px');
-        if (newValue === this._defaultValue) {
-            return;
-        }
-        return newValue;
-    }
-}

package/src/tableproperties/commands/tableheightcommand.js

@@ -1,54 +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 table/tableproperties/commands/tableheightcommand
- */
-import { TablePropertyCommand } from './tablepropertycommand.js';
-import { addDefaultUnitToNumericValue } from '../../utils/table-properties.js';
-/**
- * The table height command.
- *
- * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * the `'tableHeight'` editor command.
- *
- * To change the height of the selected table, execute the command:
- *
- * ```ts
- * editor.execute( 'tableHeight', {
- *   value: '500px'
- * } );
- * ```
- *
- * **Note**: This command adds the default `'px'` unit to numeric values. Executing:
- *
- * ```ts
- * editor.execute( 'tableHeight', {
- *   value: '50'
- * } );
- * ```
- *
- * will set the `height` attribute to `'50px'` in the model.
- */
-export class TableHeightCommand extends TablePropertyCommand {
-    /**
-     * Creates a new `TableHeightCommand` instance.
-     *
-     * @param editor An editor in which this command will be used.
-     * @param defaultValue The default value of the attribute.
-     */
-    constructor(editor, defaultValue) {
-        super(editor, 'tableHeight', defaultValue);
-    }
-    /**
-     * @inheritDoc
-     */
-    _getValueToSet(value) {
-        value = addDefaultUnitToNumericValue(value, 'px');
-        if (value === this._defaultValue) {
-            return;
-        }
-        return value;
-    }
-}

package/src/tableproperties/commands/tablepropertycommand.js

@@ -1,103 +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 { Command } from 'ckeditor5/src/core.js';
-import { getSelectionAffectedTable } from '../../utils/common.js';
-/**
- * The table cell attribute command.
- *
- * This command is a base command for other table property commands.
- */
-export class TablePropertyCommand extends Command {
-    /**
-     * The attribute that will be set by the command.
-     */
-    attributeName;
-    /**
-     * The default value for the attribute.
-     *
-     * @readonly
-     */
-    _defaultValue;
-    /**
-     * The default value for the attribute for the content table.
-     */
-    _defaultContentTableValue;
-    /**
-     * The default value for the attribute for the layout table.
-     */
-    _defaultLayoutTableValue;
-    /**
-     * Creates a new `TablePropertyCommand` instance.
-     *
-     * @param editor An editor in which this command will be used.
-     * @param attributeName Table cell attribute name.
-     * @param defaultValue The default value of the attribute.
-     */
-    constructor(editor, attributeName, defaultValue) {
-        super(editor);
-        this.attributeName = attributeName;
-        this._defaultContentTableValue = defaultValue;
-        this._defaultLayoutTableValue = attributeName === 'tableBorderStyle' ? 'none' : undefined;
-    }
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const editor = this.editor;
-        const selection = editor.model.document.selection;
-        const table = getSelectionAffectedTable(selection);
-        this._defaultValue = !table || table.getAttribute('tableType') !== 'layout' ?
-            this._defaultContentTableValue :
-            this._defaultLayoutTableValue;
-        this.isEnabled = !!table;
-        this.value = this._getValue(table);
-    }
-    /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @param options.value If set, the command will set the attribute on the selected table.
-     * If not set, the command will remove the attribute from the selected table.
-     * @param options.batch Pass the model batch instance to the command to aggregate changes,
-     * for example, to allow a single undo step for multiple executions.
-     */
-    execute(options = {}) {
-        const model = this.editor.model;
-        const selection = model.document.selection;
-        const { value, batch } = options;
-        const table = getSelectionAffectedTable(selection);
-        const valueToSet = this._getValueToSet(value);
-        model.enqueueChange(batch, writer => {
-            if (valueToSet) {
-                writer.setAttribute(this.attributeName, valueToSet, table);
-            }
-            else {
-                writer.removeAttribute(this.attributeName, table);
-            }
-        });
-    }
-    /**
-     * Returns the attribute value for a table.
-     */
-    _getValue(table) {
-        if (!table) {
-            return;
-        }
-        const value = table.getAttribute(this.attributeName);
-        if (value === this._defaultValue) {
-            return;
-        }
-        return value;
-    }
-    /**
-     * Returns the proper model value. It can be used to add a default unit to numeric values.
-     */
-    _getValueToSet(value) {
-        if (value === this._defaultValue) {
-            return;
-        }
-        return value;
-    }
-}

package/src/tableproperties/commands/tablewidthcommand.js

@@ -1,54 +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 table/tableproperties/commands/tablewidthcommand
- */
-import { TablePropertyCommand } from './tablepropertycommand.js';
-import { addDefaultUnitToNumericValue } from '../../utils/table-properties.js';
-/**
- * The table width command.
- *
- * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * the `'tableWidth'` editor command.
- *
- * To change the width of the selected table, execute the command:
- *
- * ```ts
- * editor.execute( 'tableWidth', {
- *   value: '400px'
- * } );
- * ```
- *
- * **Note**: This command adds the default `'px'` unit to numeric values. Executing:
- *
- * ```ts
- * editor.execute( 'tableWidth', {
- *   value: '50'
- * } );
- * ```
- *
- * will set the `width` attribute to `'50px'` in the model.
- */
-export class TableWidthCommand extends TablePropertyCommand {
-    /**
-     * Creates a new `TableWidthCommand` instance.
-     *
-     * @param editor An editor in which this command will be used.
-     * @param defaultValue The default value of the attribute.
-     */
-    constructor(editor, defaultValue) {
-        super(editor, 'tableWidth', defaultValue);
-    }
-    /**
-     * @inheritDoc
-     */
-    _getValueToSet(value) {
-        value = addDefaultUnitToNumericValue(value, 'px');
-        if (value === this._defaultValue) {
-            return;
-        }
-        return value;
-    }
-}