@ckeditor/ckeditor5-table 0.0.0-nightly-next-20260127.0 → 0.0.0-nightly-20260128.0

package/src/tablemouse.js

@@ -0,0 +1,178 @@
+/**
+ * @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/{dist → src}/tableproperties/commands/tablealignmentcommand.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/tableproperties/commands/tablealignmentcommand
  */
-import type { Editor } from '@ckeditor/ckeditor5-core';
+import type { Editor } from 'ckeditor5/src/core.js';
 import { TablePropertyCommand } from './tablepropertycommand.js';
 /**
  * The table alignment command.

package/src/tableproperties/commands/tablealignmentcommand.js

@@ -0,0 +1,30 @@
+/**
+ * @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/{dist → src}/tableproperties/commands/tablebackgroundcolorcommand.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/tableproperties/commands/tablebackgroundcolorcommand
  */
-import type { Editor } from '@ckeditor/ckeditor5-core';
+import type { Editor } from 'ckeditor5/src/core.js';
 import { TablePropertyCommand } from './tablepropertycommand.js';
 /**
  * The table background color command.

package/src/tableproperties/commands/tablebackgroundcolorcommand.js

@@ -0,0 +1,30 @@
+/**
+ * @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/{dist → src}/tableproperties/commands/tablebordercolorcommand.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module table/tableproperties/commands/tablebordercolorcommand
  */
-import type { ModelElement } from '@ckeditor/ckeditor5-engine';
-import type { Editor } from '@ckeditor/ckeditor5-core';
+import type { ModelElement } from 'ckeditor5/src/engine.js';
+import type { Editor } from 'ckeditor5/src/core.js';
 import { TablePropertyCommand } from './tablepropertycommand.js';
 /**
  * The table border color command.

package/src/tableproperties/commands/tablebordercolorcommand.js

@@ -0,0 +1,44 @@
+/**
+ * @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/{dist → src}/tableproperties/commands/tableborderstylecommand.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module table/tableproperties/commands/tableborderstylecommand
  */
-import type { ModelElement } from '@ckeditor/ckeditor5-engine';
+import type { ModelElement } from 'ckeditor5/src/engine.js';
 import { TablePropertyCommand } from './tablepropertycommand.js';
-import type { Editor } from '@ckeditor/ckeditor5-core';
+import type { Editor } from 'ckeditor5/src/core.js';
 /**
  * The table style border command.
  *

package/src/tableproperties/commands/tableborderstylecommand.js

@@ -0,0 +1,44 @@
+/**
+ * @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/{dist → src}/tableproperties/commands/tableborderwidthcommand.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module table/tableproperties/commands/tableborderwidthcommand
  */
-import type { ModelElement } from '@ckeditor/ckeditor5-engine';
-import type { Editor } from '@ckeditor/ckeditor5-core';
+import type { ModelElement } from 'ckeditor5/src/engine.js';
+import type { Editor } from 'ckeditor5/src/core.js';
 import { TablePropertyCommand } from './tablepropertycommand.js';
 /**
  * The table width border command.

package/src/tableproperties/commands/tableborderwidthcommand.js

@@ -0,0 +1,64 @@
+/**
+ * @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/{dist → src}/tableproperties/commands/tableheightcommand.d.ts

@@ -6,7 +6,7 @@
  * @module table/tableproperties/commands/tableheightcommand
  */
 import { TablePropertyCommand } from './tablepropertycommand.js';
-import type { Editor } from '@ckeditor/ckeditor5-core';
+import type { Editor } from 'ckeditor5/src/core.js';
 /**
  * The table height command.
  *

package/src/tableproperties/commands/tableheightcommand.js

@@ -0,0 +1,54 @@
+/**
+ * @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/{dist → src}/tableproperties/commands/tablepropertycommand.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module table/tableproperties/commands/tablepropertycommand
  */
-import type { Batch, ModelElement } from '@ckeditor/ckeditor5-engine';
-import { Command, type Editor } from '@ckeditor/ckeditor5-core';
+import type { Batch, ModelElement } from 'ckeditor5/src/engine.js';
+import { Command, type Editor } from 'ckeditor5/src/core.js';
 export interface TablePropertyCommandExecuteOptions {
     batch?: Batch;
     columnWidths?: string;

package/src/tableproperties/commands/tablepropertycommand.js

@@ -0,0 +1,103 @@
+/**
+ * @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/{dist → src}/tableproperties/commands/tablewidthcommand.d.ts

@@ -6,7 +6,7 @@
  * @module table/tableproperties/commands/tablewidthcommand
  */
 import { TablePropertyCommand } from './tablepropertycommand.js';
-import type { Editor } from '@ckeditor/ckeditor5-core';
+import type { Editor } from 'ckeditor5/src/core.js';
 /**
  * The table width command.
  *