@ckeditor/ckeditor5-table 44.3.0 → 45.0.0-alpha.1

package/src/tablecellproperties/tablecellpropertiesediting.js

@@ -6,8 +6,9 @@
  * @module table/tablecellproperties/tablecellpropertiesediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
+import { first } from 'ckeditor5/src/utils.js';
 import { addBorderRules, addPaddingRules, addBackgroundRules } from 'ckeditor5/src/engine.js';
-import { downcastAttributeToStyle, upcastBorderStyles } from './../converters/tableproperties.js';
+import { downcastAttributeToStyle, upcastBorderStyles } from '../converters/tableproperties.js';
 import TableEditing from './../tableediting.js';
 import TableCellWidthEditing from '../tablecellwidth/tablecellwidthediting.js';
 import TableCellPaddingCommand from './commands/tablecellpaddingcommand.js';
@@ -166,9 +167,19 @@ function enableHorizontalAlignmentProperty(schema, conversion, defaultValue) {
         },
         model: {
             key: 'tableCellHorizontalAlignment',
-            value: (viewElement) => {
+            value: (viewElement, conversionApi, data) => {
+                let localDefaultValue = defaultValue;
+                // Adjust default for layout tables.
+                if (data.modelRange) {
+                    const modelElement = first(data.modelRange.getItems({ shallow: true }));
+                    const tableElement = modelElement && modelElement.is('element') &&
+                        modelElement.findAncestor('table', { includeSelf: true });
+                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
+                        localDefaultValue = 'left';
+                    }
+                }
                 const align = viewElement.getStyle('text-align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     })
@@ -182,9 +193,19 @@ function enableHorizontalAlignmentProperty(schema, conversion, defaultValue) {
         },
         model: {
             key: 'tableCellHorizontalAlignment',
-            value: (viewElement) => {
+            value: (viewElement, conversionApi, data) => {
+                let localDefaultValue = defaultValue;
+                // Adjust default for layout tables.
+                if (data.modelRange) {
+                    const modelElement = first(data.modelRange.getItems({ shallow: true }));
+                    const tableElement = modelElement && modelElement.is('element') &&
+                        modelElement.findAncestor('table', { includeSelf: true });
+                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
+                        localDefaultValue = 'left';
+                    }
+                }
                 const align = viewElement.getAttribute('align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     });
@@ -222,9 +243,19 @@ function enableVerticalAlignmentProperty(schema, conversion, defaultValue) {
         },
         model: {
             key: 'tableCellVerticalAlignment',
-            value: (viewElement) => {
+            value: (viewElement, conversionApi, data) => {
+                let localDefaultValue = defaultValue;
+                // Adjust default for layout tables.
+                if (data.modelRange) {
+                    const modelElement = first(data.modelRange.getItems({ shallow: true }));
+                    const tableElement = modelElement && modelElement.is('element') &&
+                        modelElement.findAncestor('table', { includeSelf: true });
+                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
+                        localDefaultValue = 'middle';
+                    }
+                }
                 const align = viewElement.getStyle('vertical-align');
-                return align === defaultValue ? null : align;
+                return align === localDefaultValue ? null : align;
             }
         }
     })
@@ -238,9 +269,19 @@ function enableVerticalAlignmentProperty(schema, conversion, defaultValue) {
         },
         model: {
             key: 'tableCellVerticalAlignment',
-            value: (viewElement) => {
+            value: (viewElement, conversionApi, data) => {
+                let localDefaultValue = defaultValue;
+                // Adjust default for layout tables.
+                if (data.modelRange) {
+                    const modelElement = first(data.modelRange.getItems({ shallow: true }));
+                    const tableElement = modelElement && modelElement.is('element') &&
+                        modelElement.findAncestor('table', { includeSelf: true });
+                    if (tableElement && tableElement.getAttribute('tableType') == 'layout') {
+                        localDefaultValue = 'middle';
+                    }
+                }
                 const valign = viewElement.getAttribute('valign');
-                return valign === defaultValue ? null : valign;
+                return valign === localDefaultValue ? null : valign;
             }
         }
     });

package/src/tablecellproperties/tablecellpropertiesui.d.ts

@@ -18,7 +18,11 @@ export default class TableCellPropertiesUI extends Plugin {
     /**
      * The default table cell properties.
      */
-    private _defaultTableCellProperties;
+    private _defaultContentTableCellProperties;
+    /**
+     * The default layout table cell properties.
+     */
+    private _defaultLayoutTableCellProperties;
     /**
      * The contextual balloon plugin instance.
      */
@@ -27,6 +31,14 @@ export default class TableCellPropertiesUI extends Plugin {
      * The cell properties form view displayed inside the balloon.
      */
     view?: TableCellPropertiesView | null;
+    /**
+     * The cell properties form view displayed inside the balloon (content table).
+     */
+    private _viewWithContentTableDefaults?;
+    /**
+     * The cell properties form view displayed inside the balloon (layout table).
+     */
+    private _viewWithLayoutTableDefaults?;
     /**
      * The batch used to undo all changes made by the form (which are live, as the user types)
      * when "Cancel" was pressed. Each time the view is shown, a new batch is created.

package/src/tablecellproperties/tablecellpropertiesui.js

@@ -6,14 +6,14 @@
  * @module table/tablecellproperties/tablecellpropertiesui
  */
 import { Plugin } from 'ckeditor5/src/core.js';
+import { IconTableCellProperties } from 'ckeditor5/src/icons.js';
 import { ButtonView, clickOutsideHandler, ContextualBalloon, getLocalizedColorOptions, normalizeColorOptions } from 'ckeditor5/src/ui.js';
 import TableCellPropertiesView from './ui/tablecellpropertiesview.js';
 import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, defaultColors, lengthFieldValidator, lineWidthFieldValidator } from '../utils/ui/table-properties.js';
-import { debounce } from 'lodash-es';
-import { getTableWidgetAncestor } from '../utils/ui/widget.js';
+import { debounce } from 'es-toolkit/compat';
+import { getSelectionAffectedTableWidget, getTableWidgetAncestor } from '../utils/ui/widget.js';
 import { getBalloonCellPositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon.js';
-import tableCellProperties from './../../theme/icons/table-cell-properties.svg';
-import { getNormalizedDefaultCellProperties } from '../utils/table-properties.js';
+import { getNormalizedDefaultCellProperties, getNormalizedDefaultProperties } from '../utils/table-properties.js';
 const ERROR_TEXT_TIMEOUT = 500;
 // Map of view properties and related commands.
 const propertyToCommandMap = {
@@ -34,6 +34,40 @@ const propertyToCommandMap = {
  * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
  */
 export default class TableCellPropertiesUI extends Plugin {
+    /**
+     * The default table cell properties.
+     */
+    _defaultContentTableCellProperties;
+    /**
+     * The default layout table cell properties.
+     */
+    _defaultLayoutTableCellProperties;
+    /**
+     * The contextual balloon plugin instance.
+     */
+    _balloon;
+    /**
+     * The cell properties form view displayed inside the balloon.
+     */
+    view;
+    /**
+     * The cell properties form view displayed inside the balloon (content table).
+     */
+    _viewWithContentTableDefaults;
+    /**
+     * The cell properties form view displayed inside the balloon (layout table).
+     */
+    _viewWithLayoutTableDefaults;
+    /**
+     * The batch used to undo all changes made by the form (which are live, as the user types)
+     * when "Cancel" was pressed. Each time the view is shown, a new batch is created.
+     */
+    _undoStepBatch;
+    /**
+     * Flag used to indicate whether view is ready to execute update commands
+     * (it finished loading initial data).
+     */
+    _isReady;
     /**
      * @inheritDoc
      */
@@ -68,12 +102,17 @@ export default class TableCellPropertiesUI extends Plugin {
     init() {
         const editor = this.editor;
         const t = editor.t;
-        this._defaultTableCellProperties = getNormalizedDefaultCellProperties(editor.config.get('table.tableCellProperties.defaultProperties'), {
+        this._defaultContentTableCellProperties = getNormalizedDefaultCellProperties(editor.config.get('table.tableCellProperties.defaultProperties'), {
             includeVerticalAlignmentProperty: true,
             includeHorizontalAlignmentProperty: true,
             includePaddingProperty: true,
             isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
         });
+        this._defaultLayoutTableCellProperties = getNormalizedDefaultProperties(undefined, {
+            includeVerticalAlignmentProperty: true,
+            includeHorizontalAlignmentProperty: true,
+            isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
+        });
         this._balloon = editor.plugins.get(ContextualBalloon);
         this.view = null;
         this._isReady = false;
@@ -81,7 +120,7 @@ export default class TableCellPropertiesUI extends Plugin {
             const view = new ButtonView(locale);
             view.set({
                 label: t('Cell properties'),
-                icon: tableCellProperties,
+                icon: IconTableCellProperties,
                 tooltip: true
             });
             this.listenTo(view, 'execute', () => this._showView());
@@ -107,7 +146,7 @@ export default class TableCellPropertiesUI extends Plugin {
      *
      * @returns The cell properties form view instance.
      */
-    _createPropertiesView() {
+    _createPropertiesView(defaultTableCellProperties) {
         const editor = this.editor;
         const config = editor.config.get('table.tableCellProperties');
         const borderColorsConfig = normalizeColorOptions(config.borderColors);
@@ -118,7 +157,7 @@ export default class TableCellPropertiesUI extends Plugin {
         const view = new TableCellPropertiesView(editor.locale, {
             borderColors: localizedBorderColors,
             backgroundColors: localizedBackgroundColors,
-            defaultTableCellProperties: this._defaultTableCellProperties,
+            defaultTableCellProperties,
             colorPickerConfig: hasColorPicker ? (config.colorPicker || {}) : false
         });
         const t = editor.t;
@@ -207,7 +246,10 @@ export default class TableCellPropertiesUI extends Plugin {
         const borderStyleCommand = commands.get('tableCellBorderStyle');
         Object.entries(propertyToCommandMap)
             .map(([property, commandName]) => {
-            const defaultValue = this._defaultTableCellProperties[property] || '';
+            const propertyKey = property;
+            const defaultValue = this.view === this._viewWithContentTableDefaults ?
+                this._defaultContentTableCellProperties[propertyKey] || '' :
+                this._defaultLayoutTableCellProperties[propertyKey] || '';
             return [
                 property,
                 commands.get(commandName).value || defaultValue
@@ -231,9 +273,16 @@ export default class TableCellPropertiesUI extends Plugin {
      */
     _showView() {
         const editor = this.editor;
-        if (!this.view) {
-            this.view = this._createPropertiesView();
+        const viewTable = getSelectionAffectedTableWidget(editor.editing.view.document.selection);
+        const modelTable = viewTable && editor.editing.mapper.toModelElement(viewTable);
+        const useDefaults = !modelTable || modelTable.getAttribute('tableType') !== 'layout';
+        if (useDefaults && !this._viewWithContentTableDefaults) {
+            this._viewWithContentTableDefaults = this._createPropertiesView(this._defaultContentTableCellProperties);
+        }
+        else if (!useDefaults && !this._viewWithLayoutTableDefaults) {
+            this._viewWithLayoutTableDefaults = this._createPropertiesView(this._defaultLayoutTableCellProperties);
         }
+        this.view = useDefaults ? this._viewWithContentTableDefaults : this._viewWithLayoutTableDefaults;
         this.listenTo(editor.ui, 'update', () => {
             this._updateView();
         });

package/src/tablecellproperties/ui/tablecellpropertiesview.d.ts

@@ -9,7 +9,8 @@ import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewColle
 import { KeystrokeHandler, FocusTracker, type Locale } from 'ckeditor5/src/utils.js';
 import type ColorInputView from '../../ui/colorinputview.js';
 import type { TableCellPropertiesOptions } from '../../tableconfig.js';
-import '../../../theme/form.css';
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
+import '../../../theme/formrow.css';
 import '../../../theme/tableform.css';
 import '../../../theme/tablecellproperties.css';
 export interface TableCellPropertiesViewOptions {

package/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -5,12 +5,13 @@
 /**
  * @module table/tablecellproperties/ui/tablecellpropertiesview
  */
-import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, FormHeaderView, LabeledFieldView, LabelView, submitHandler, ToolbarView, View, ViewCollection } from 'ckeditor5/src/ui.js';
+import { addListToDropdown, ButtonView, createLabeledDropdown, createLabeledInputText, FocusCycler, FormRowView, FormHeaderView, LabeledFieldView, LabelView, submitHandler, ToolbarView, View, ViewCollection } from 'ckeditor5/src/ui.js';
 import { KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils.js';
-import { icons } from 'ckeditor5/src/core.js';
+import { IconAlignBottom, IconAlignCenter, IconAlignJustify, IconAlignLeft, IconAlignMiddle, IconAlignRight, IconAlignTop, IconCancel, IconCheck } from 'ckeditor5/src/icons.js';
 import { fillToolbar, getBorderStyleDefinitions, getBorderStyleLabels, getLabeledColorInputCreator } from '../../utils/ui/table-properties.js';
-import FormRowView from '../../ui/formrowview.js';
-import '../../../theme/form.css';
+// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
+import '../../../theme/formrow.css';
 import '../../../theme/tableform.css';
 import '../../../theme/tablecellproperties.css';
 /**
@@ -18,6 +19,74 @@ import '../../../theme/tablecellproperties.css';
  * certain style aspects of a table cell, for instance, border, padding, text alignment, etc..
  */
 export default class TableCellPropertiesView extends View {
+    /**
+     * Options passed to the view. See {@link #constructor} to learn more.
+     */
+    options;
+    /**
+     * Tracks information about the DOM focus in the form.
+     */
+    focusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    keystrokes;
+    /**
+     * A collection of child views in the form.
+     */
+    children;
+    /**
+     * A dropdown that allows selecting the style of the table cell border.
+     */
+    borderStyleDropdown;
+    /**
+     * An input that allows specifying the width of the table cell border.
+     */
+    borderWidthInput;
+    /**
+     * An input that allows specifying the color of the table cell border.
+     */
+    borderColorInput;
+    /**
+     * An input that allows specifying the table cell background color.
+     */
+    backgroundInput;
+    /**
+     * An input that allows specifying the table cell padding.
+     */
+    paddingInput;
+    /**
+     * An input that allows specifying the table cell width.
+     */
+    widthInput;
+    /**
+     * An input that allows specifying the table cell height.
+     */
+    heightInput;
+    /**
+     * A toolbar with buttons that allow changing the horizontal text alignment in a table cell.
+     */
+    horizontalAlignmentToolbar;
+    /**
+     * A toolbar with buttons that allow changing the vertical text alignment in a table cell.
+     */
+    verticalAlignmentToolbar;
+    /**
+     * The "Save" button view.
+     */
+    saveButtonView;
+    /**
+     * The "Cancel" button view.
+     */
+    cancelButtonView;
+    /**
+     * A collection of views that can be focused in the form.
+     */
+    _focusables;
+    /**
+     * Helps cycling over {@link #_focusables} in the form.
+     */
+    _focusCycler;
     /**
      * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
      * @param options Additional configuration of the view.
@@ -412,13 +481,13 @@ export default class TableCellPropertiesView extends View {
         const t = this.t;
         const alignmentLabel = new LabelView(locale);
         const ALIGNMENT_ICONS = {
-            left: icons.alignLeft,
-            center: icons.alignCenter,
-            right: icons.alignRight,
-            justify: icons.alignJustify,
-            top: icons.alignTop,
-            middle: icons.alignMiddle,
-            bottom: icons.alignBottom
+            left: IconAlignLeft,
+            center: IconAlignCenter,
+            right: IconAlignRight,
+            justify: IconAlignJustify,
+            top: IconAlignTop,
+            middle: IconAlignMiddle,
+            bottom: IconAlignBottom
         };
         alignmentLabel.text = t('Table cell text alignment');
         // -- Horizontal ---------------------------------------------------
@@ -489,7 +558,7 @@ export default class TableCellPropertiesView extends View {
         ];
         saveButtonView.set({
             label: t('Save'),
-            icon: icons.check,
+            icon: IconCheck,
             class: 'ck-button-save',
             type: 'submit',
             withText: true
@@ -499,7 +568,7 @@ export default class TableCellPropertiesView extends View {
         });
         cancelButtonView.set({
             label: t('Cancel'),
-            icon: icons.cancel,
+            icon: IconCancel,
             class: 'ck-button-cancel',
             withText: true
         });

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';