@ckeditor/ckeditor5-table 44.3.0-alpha.7 → 45.0.0-alpha.0

package/src/tableclipboard.d.ts

@@ -29,6 +29,15 @@ export default class TableClipboard extends Plugin {
      * @inheritDoc
      */
     init(): void;
+    /**
+     * Sets up listening for events from the clipboard pipeline to properly handle
+     * table content merging during paste/drop operations.
+     *
+     * When a user is dragging and dropping a table, we want to insert the entire table into
+     * a table cell instead of merging table contents. For paste and other events,
+     * the normal table merge behavior is applied.
+     */
+    private _listenToContentInsertion;
     /**
      * Copies table content to a clipboard on "copy" & "cut" events.
      *

package/src/tableclipboard.js

@@ -39,9 +39,36 @@ export default class TableClipboard extends Plugin {
         const viewDocument = editor.editing.view.document;
         this.listenTo(viewDocument, 'copy', (evt, data) => this._onCopyCut(evt, data));
         this.listenTo(viewDocument, 'cut', (evt, data) => this._onCopyCut(evt, data));
-        this.listenTo(editor.model, 'insertContent', (evt, [content, selectable]) => this._onInsertContent(evt, content, selectable), { priority: 'high' });
+        this._listenToContentInsertion();
         this.decorate('_replaceTableSlotCell');
     }
+    /**
+     * Sets up listening for events from the clipboard pipeline to properly handle
+     * table content merging during paste/drop operations.
+     *
+     * When a user is dragging and dropping a table, we want to insert the entire table into
+     * a table cell instead of merging table contents. For paste and other events,
+     * the normal table merge behavior is applied.
+     */
+    _listenToContentInsertion() {
+        const { editor } = this;
+        const clipboardPipeline = editor.plugins.get(ClipboardPipeline);
+        const tableSelection = editor.plugins.get(TableSelection);
+        let isPaste = false;
+        clipboardPipeline.on('contentInsertion', (evt, data) => {
+            isPaste = data.method === 'paste';
+        });
+        this.listenTo(editor.model, 'insertContent', (evt, [content, selectable]) => {
+            // Handles drag-and-drop of tables, where tables are inserted into selected cells rather than merged.
+            // The `isPaste` flag handles scenarios where other features (e.g., Templates) insert tables into specific cells.
+            if (isPaste || tableSelection.getSelectedTableCells() !== null) {
+                this._onInsertContent(evt, content, selectable);
+            }
+        }, { priority: 'high' });
+        clipboardPipeline.on('contentInsertion', () => {
+            isPaste = false;
+        }, { priority: 'lowest' });
+    }
     /**
      * Copies table content to a clipboard on "copy" & "cut" events.
      *

package/src/tablecolumnresize/constants.d.ts

@@ -18,3 +18,7 @@ export declare const COLUMN_MIN_WIDTH_IN_PIXELS = 40;
  * Determines how many digits after the decimal point are used to store the column width as a percentage value.
  */
 export declare const COLUMN_WIDTH_PRECISION = 2;
+/**
+ * The distance in pixels that the mouse has to move to start resizing the column.
+ */
+export declare const COLUMN_RESIZE_DISTANCE_THRESHOLD = 3;

package/src/tablecolumnresize/constants.js

@@ -18,3 +18,7 @@ export const COLUMN_MIN_WIDTH_IN_PIXELS = 40;
  * Determines how many digits after the decimal point are used to store the column width as a percentage value.
  */
 export const COLUMN_WIDTH_PRECISION = 2;
+/**
+ * The distance in pixels that the mouse has to move to start resizing the column.
+ */
+export const COLUMN_RESIZE_DISTANCE_THRESHOLD = 3;

package/src/tablecolumnresize/tablecolumnresizeediting.d.ts

@@ -35,6 +35,10 @@ export default class TableColumnResizeEditing extends Plugin {
      * A local reference to the {@link module:table/tableutils~TableUtils} plugin.
      */
     private _tableUtilsPlugin;
+    /**
+     * Starting mouse position data used to add a threshold to the resizing process.
+     */
+    private _initialMouseEventData;
     /**
      * @inheritDoc
      */
@@ -111,6 +115,10 @@ export default class TableColumnResizeEditing extends Plugin {
      * @param domEventData The data related to the DOM event.
      */
     private _onMouseDownHandler;
+    /**
+     * Starts the resizing process after the threshold is reached.
+     */
+    private _startResizingAfterThreshold;
     /**
      * Handles the `mousemove` event.
      *  * If resizing process is not in progress, it does nothing.

package/src/tablecolumnresize/tablecolumnresizeediting.js

@@ -5,7 +5,7 @@
 /**
  * @module table/tablecolumnresize/tablecolumnresizeediting
  */
-import { throttle, isEqual } from 'lodash-es';
+import { throttle, isEqual } from 'es-toolkit/compat';
 import { global, DomEmitterMixin } from 'ckeditor5/src/utils.js';
 import { Plugin } from 'ckeditor5/src/core.js';
 import MouseEventsObserver from '../../src/tablemouse/mouseeventsobserver.js';
@@ -15,11 +15,32 @@ import TableWalker from '../tablewalker.js';
 import TableWidthsCommand from './tablewidthscommand.js';
 import { downcastTableResizedClass, upcastColgroupElement } from './converters.js';
 import { clamp, createFilledArray, sumArray, getColumnEdgesIndexes, getChangedResizedTables, getColumnMinWidthAsPercentage, getElementWidthInPixels, getTableWidthInPixels, normalizeColumnWidths, toPrecision, getDomCellOuterWidth, updateColumnElements, getColumnGroupElement, getTableColumnElements, getTableColumnsWidths } from './utils.js';
-import { COLUMN_MIN_WIDTH_IN_PIXELS } from './constants.js';
+import { COLUMN_MIN_WIDTH_IN_PIXELS, COLUMN_RESIZE_DISTANCE_THRESHOLD } from './constants.js';
 /**
  * The table column resize editing plugin.
  */
 export default class TableColumnResizeEditing extends Plugin {
+    /**
+     * A flag indicating if the column resizing is in progress.
+     */
+    _isResizingActive;
+    /**
+     * A temporary storage for the required data needed to correctly calculate the widths of the resized columns. This storage is
+     * initialized when column resizing begins, and is purged upon completion.
+     */
+    _resizingData;
+    /**
+     * DOM emitter.
+     */
+    _domEmitter;
+    /**
+     * A local reference to the {@link module:table/tableutils~TableUtils} plugin.
+     */
+    _tableUtilsPlugin;
+    /**
+     * Starting mouse position data used to add a threshold to the resizing process.
+     */
+    _initialMouseEventData = null;
     /**
      * @inheritDoc
      */
@@ -233,9 +254,8 @@ export default class TableColumnResizeEditing extends Plugin {
         // Table width style
         conversion.for('upcast').attributeToAttribute({
             view: {
-                name: 'figure',
-                key: 'style',
-                value: {
+                name: /^(figure|table)$/,
+                styles: {
                     width: /[\s\S]+/
                 }
             },
@@ -336,13 +356,21 @@ export default class TableColumnResizeEditing extends Plugin {
         }
         domEventData.preventDefault();
         eventInfo.stop();
-        // The column widths are calculated upon mousedown to allow lazy applying the `columnWidths` attribute on the table.
-        const columnWidthsInPx = _calculateDomColumnWidths(modelTable, this._tableUtilsPlugin, editor);
+        this._initialMouseEventData = domEventData;
+    }
+    /**
+     * Starts the resizing process after the threshold is reached.
+     */
+    _startResizingAfterThreshold() {
+        const domEventData = this._initialMouseEventData;
+        const { target } = domEventData;
+        const modelTable = this.editor.editing.mapper.toModelElement(target.findAncestor('figure'));
         const viewTable = target.findAncestor('table');
-        const editingView = editor.editing.view;
+        // Calculate the initial column widths in pixels.
+        const columnWidthsInPx = _calculateDomColumnWidths(modelTable, this._tableUtilsPlugin, this.editor);
         // Insert colgroup for the table that is resized for the first time.
         if (!Array.from(viewTable.getChildren()).find(viewCol => viewCol.is('element', 'colgroup'))) {
-            editingView.change(viewWriter => {
+            this.editor.editing.view.change(viewWriter => {
                 _insertColgroupElement(viewWriter, columnWidthsInPx, viewTable);
             });
         }
@@ -350,7 +378,7 @@ export default class TableColumnResizeEditing extends Plugin {
         this._resizingData = this._getResizingData(domEventData, columnWidthsInPx);
         // At this point we change only the editor view - we don't want other users to see our changes yet,
         // so we can't apply them in the model.
-        editingView.change(writer => _applyResizingAttributesToTable(writer, viewTable, this._resizingData));
+        this.editor.editing.view.change(writer => _applyResizingAttributesToTable(writer, viewTable, this._resizingData));
         /**
          * Calculates the DOM columns' widths. It is done by taking the width of the widest cell
          * from each table column (we rely on the  {@link module:table/tablewalker~TableWalker}
@@ -415,6 +443,17 @@ export default class TableColumnResizeEditing extends Plugin {
      * @param mouseEventData The native DOM event.
      */
     _onMouseMoveHandler(eventInfo, mouseEventData) {
+        if (this._initialMouseEventData) {
+            const mouseEvent = this._initialMouseEventData.domEvent;
+            const distanceX = Math.abs(mouseEventData.clientX - mouseEvent.clientX);
+            if (distanceX >= COLUMN_RESIZE_DISTANCE_THRESHOLD) {
+                this._startResizingAfterThreshold();
+                this._initialMouseEventData = null;
+            }
+            else {
+                return;
+            }
+        }
         if (!this._isResizingActive) {
             return;
         }
@@ -455,6 +494,7 @@ export default class TableColumnResizeEditing extends Plugin {
      *  * Otherwise it propagates the changes from view to the model by executing the adequate commands.
      */
     _onMouseUpHandler() {
+        this._initialMouseEventData = null;
         if (!this._isResizingActive) {
             return;
         }

package/src/tableconfig.d.ts

@@ -200,6 +200,16 @@ export interface TableConfig {
      * Read more about configuring the table feature in {@link module:table/tableconfig~TableConfig}.
      */
     tableCellProperties?: TableCellPropertiesConfig;
+    /**
+     * Configuration of the table layout feature.
+     *
+     * ```ts
+     * const tableConfig = {
+     * 	tableLayout: ... // Table layout feature config.
+     * };
+     * ```
+     */
+    tableLayout?: TableLayoutConfig;
 }
 /**
  * The configuration of the table properties user interface (balloon).
@@ -341,3 +351,31 @@ export interface TableCellPropertiesOptions {
      */
     verticalAlignment?: string;
 }
+/**
+ * The configuration of the table layout feature.
+ */
+export interface TableLayoutConfig {
+    /**
+     * Sets the preferred type for loading external tables.
+     *
+     * This setting overrides the default detection method and uses the specified type ('content' or 'layout').
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( {
+     * 		table: {
+     * 			tableLayout: {
+     * 				preferredExternalTableType: 'content' // or 'layout'
+     * 			}
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     */
+    preferredExternalTableType: TableType;
+}
+/**
+ * The type of the table.
+ */
+export type TableType = 'content' | 'layout';

package/src/tableediting.js

@@ -30,6 +30,10 @@ import '../theme/tableediting.css';
  * The table editing feature.
  */
 export default class TableEditing extends Plugin {
+    /**
+     * Handlers for creating additional slots in the table.
+     */
+    _additionalSlots;
     /**
      * @inheritDoc
      */

package/src/tablelayout/commands/tabletypecommand.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module table/tablelayout/commands/tabletypecommand
+ */
+import { Command } from 'ckeditor5/src/core.js';
+import type { TableType } from '../../tableconfig.js';
+/**
+ * The set table type command.
+ *
+ * The command is registered by {@link module:table/tablelayout/tablelayoutediting~TableLayoutEditing}
+ * as the `'tableType'` editor command.
+ *
+ * To set the table type at the current selection, execute the command and specify the table type:
+ *
+ * ```ts
+ * editor.execute( 'tableType', 'layout' );
+ * ```
+ */
+export default class TableTypeCommand extends Command {
+    /**
+     * The table type of selected table.
+     *
+     * @observable
+     * @readonly
+     */
+    value: TableType | null;
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command.
+     *
+     * Set table type by the given table type parameter.
+     *
+     * @param tableType The type of table it should become.
+     * @fires execute
+     */
+    execute(tableType: TableType): void;
+}

package/src/tablelayout/commands/tabletypecommand.js

@@ -0,0 +1,68 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module table/tablelayout/commands/tabletypecommand
+ */
+import { Command } from 'ckeditor5/src/core.js';
+import { getSelectionAffectedTable } from '../../utils/common.js';
+/**
+ * The set table type command.
+ *
+ * The command is registered by {@link module:table/tablelayout/tablelayoutediting~TableLayoutEditing}
+ * as the `'tableType'` editor command.
+ *
+ * To set the table type at the current selection, execute the command and specify the table type:
+ *
+ * ```ts
+ * editor.execute( 'tableType', 'layout' );
+ * ```
+ */
+export default class TableTypeCommand extends Command {
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const model = this.editor.model;
+        const selection = model.document.selection;
+        const selectedTable = getSelectionAffectedTable(selection);
+        if (selectedTable) {
+            this.isEnabled = true;
+            this.value = selectedTable.getAttribute('tableType');
+        }
+        else {
+            this.isEnabled = false;
+            this.value = null;
+        }
+    }
+    /**
+     * Executes the command.
+     *
+     * Set table type by the given table type parameter.
+     *
+     * @param tableType The type of table it should become.
+     * @fires execute
+     */
+    execute(tableType) {
+        const editor = this.editor;
+        const model = editor.model;
+        const selection = model.document.selection;
+        const table = getSelectionAffectedTable(selection);
+        const currentTableType = table.getAttribute('tableType');
+        if (currentTableType === tableType) {
+            return;
+        }
+        model.change(writer => {
+            writer.setAttribute('tableType', tableType, table);
+            model.schema.removeDisallowedAttributes([table], writer);
+            const tableChildren = table.getChildren();
+            // Check if all children are allowed for the new table type.
+            for (const child of tableChildren) {
+                if (!model.schema.checkChild(table, child)) {
+                    writer.remove(child);
+                }
+            }
+        });
+    }
+}

package/src/tablelayout/tablelayoutediting.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module table/tablelayout/tablelayoutediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import TableColumnResize from '../tablecolumnresize.js';
+import '../../theme/tablelayout.css';
+/**
+ * The table layout editing plugin.
+ */
+export default class TableLayoutEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "TableLayoutEditing";
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof TableColumnResize];
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Defines the schema for the table layout feature.
+     */
+    private _defineSchema;
+    /**
+     * Defines the converters for the table layout feature.
+     */
+    private _defineConverters;
+    /**
+     * Handles the clipboard content insertion events.
+     *
+     * - If the content is from another editor, do not override the table type.
+     * - If the content is from another source, set the table type to 'content'.
+     *
+     * It handles the scenario when user copies `<table></table>` from Word. We do not want to
+     * change the table type to `layout` because it is really `content` table.
+     */
+    private _defineClipboardPasteHandlers;
+    /**
+     * Registers a post-fixer that sets the `tableType` attribute to `content` for inserted "default" tables.
+     * Also fixes potential issues with the table structure when the `tableType` attribute has been changed.
+     */
+    private _registerTableTypeAttributePostfixer;
+}