@ckeditor/ckeditor5-table 0.0.0-nightly-20250305.0 → 0.0.0-nightly-20250306.0

package/dist/index.js

@@ -2,13 +2,14 @@
  * @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
  */
-import { Command, Plugin, icons } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { toWidgetEditable, toWidget, Widget, isWidget, WidgetToolbarRepository } from '@ckeditor/ckeditor5-widget/dist/index.js';
 import { first, global, CKEditorError, KeystrokeHandler, FocusTracker, Collection, getLocalizedArrowKeyCodeDirection, Rect, DomEmitterMixin } from '@ckeditor/ckeditor5-utils/dist/index.js';
-import { View, addKeyboardHandlingForGrid, ButtonView, createDropdown, MenuBarMenuView, SwitchButtonView, SplitButtonView, addListToDropdown, ViewModel, ViewCollection, FocusCycler, InputTextView, ColorSelectorView, FormHeaderView, submitHandler, LabelView, LabeledFieldView, createLabeledDropdown, createLabeledInputText, ToolbarView, BalloonPanelView, ContextualBalloon, normalizeColorOptions, getLocalizedColorOptions, clickOutsideHandler } from '@ckeditor/ckeditor5-ui/dist/index.js';
+import { IconTable, IconTableColumn, IconTableRow, IconTableMergeCell, IconCheck, IconCancel, IconAlignBottom, IconAlignMiddle, IconAlignTop, IconAlignJustify, IconAlignRight, IconAlignCenter, IconAlignLeft, IconTableCellProperties, IconObjectInlineRight, IconObjectCenter, IconObjectInlineLeft, IconTableProperties, IconCaption } from '@ckeditor/ckeditor5-icons/dist/index.js';
+import { View, addKeyboardHandlingForGrid, ButtonView, createDropdown, MenuBarMenuView, SwitchButtonView, SplitButtonView, addListToDropdown, ViewModel, ViewCollection, FocusCycler, InputTextView, ColorSelectorView, FormHeaderView, FormRowView, submitHandler, LabelView, LabeledFieldView, createLabeledDropdown, createLabeledInputText, ToolbarView, BalloonPanelView, ContextualBalloon, normalizeColorOptions, getLocalizedColorOptions, clickOutsideHandler } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { ClipboardMarkersUtils, ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard/dist/index.js';
 import { DomEventObserver, isColor, isLength, isPercentage, addBorderRules, addPaddingRules, addBackgroundRules, enablePlaceholder, Element } from '@ckeditor/ckeditor5-engine/dist/index.js';
-import { isObject, debounce, isEqual, throttle } from 'lodash-es';
+import { isObject, debounce, isEqual, throttle } from 'es-toolkit/compat';
 
 /**
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
@@ -2238,6 +2239,9 @@ import { isObject, debounce, isEqual, throttle } from 'lodash-es';
 /**
  * Determines how many digits after the decimal point are used to store the column width as a percentage value.
  */ const COLUMN_WIDTH_PRECISION = 2;
+/**
+ * The distance in pixels that the mouse has to move to start resizing the column.
+ */ const COLUMN_RESIZE_DISTANCE_THRESHOLD = 3;
 
 /**
  * Returns all the inserted or changed table model elements in a given change set. Only the tables
@@ -4750,12 +4754,6 @@ function getMaxOffset(tableCell, start, currentMaxOffset, which) {
     }
 }
 
-var tableColumnIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1zM2 2v16h16V2H2z\" opacity=\".6\"/><path d=\"M18 7v1H2V7h16zm0 5v1H2v-1h16z\" opacity=\".6\"/><path d=\"M14 1v18a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1zm-2 1H8v4h4V2zm0 6H8v4h4V8zm0 6H8v4h4v-4z\"/></svg>";
-
-var tableRowIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1zM2 2v16h16V2H2z\" opacity=\".6\"/><path d=\"M7 2h1v16H7V2zm5 0h1v16h-1V2z\" opacity=\".6\"/><path d=\"M1 6h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm1 2v4h4V8H2zm6 0v4h4V8H8zm6 0v4h4V8h-4z\"/></svg>";
-
-var tableMergeCellIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1zM2 2v16h16V2H2z\" opacity=\".6\"/><path d=\"M7 2h1v16H7V2zm5 0h1v7h-1V2zm6 5v1H2V7h16zM8 12v1H2v-1h6z\" opacity=\".6\"/><path d=\"M7 7h12a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm1 2v9h10V9H8z\"/></svg>";
-
 /**
  * The table UI plugin. It introduces:
  *
@@ -4790,7 +4788,7 @@ var tableMergeCellIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2
             dropdownView.bind('isEnabled').to(command);
             // Decorate dropdown's button.
             dropdownView.buttonView.set({
-                icon: icons.table,
+                icon: IconTable,
                 label: t('Insert table'),
                 tooltip: true
             });
@@ -4832,7 +4830,7 @@ var tableMergeCellIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2
             });
             menuView.buttonView.set({
                 label: t('Table'),
-                icon: icons.table
+                icon: IconTable
             });
             menuView.panelView.children.add(insertTableView);
             menuView.bind('isEnabled').to(command);
@@ -4880,7 +4878,7 @@ var tableMergeCellIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2
                     }
                 }
             ];
-            return this._prepareDropdown(t('Column'), tableColumnIcon, options, locale);
+            return this._prepareDropdown(t('Column'), IconTableColumn, options, locale);
         });
         editor.ui.componentFactory.add('tableRow', (locale)=>{
             const options = [
@@ -4924,7 +4922,7 @@ var tableMergeCellIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2
                     }
                 }
             ];
-            return this._prepareDropdown(t('Row'), tableRowIcon, options, locale);
+            return this._prepareDropdown(t('Row'), IconTableRow, options, locale);
         });
         editor.ui.componentFactory.add('mergeTableCells', (locale)=>{
             const options = [
@@ -4974,7 +4972,7 @@ var tableMergeCellIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2
                     }
                 }
             ];
-            return this._prepareMergeSplitButtonDropdown(t('Merge cells'), tableMergeCellIcon, options, locale);
+            return this._prepareMergeSplitButtonDropdown(t('Merge cells'), IconTableMergeCell, options, locale);
         });
     }
     /**
@@ -5350,7 +5348,25 @@ var tableMergeCellIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2
         const startRow = Math.min(startLocation.row, endLocation.row);
         const endRow = Math.max(startLocation.row, endLocation.row);
         const startColumn = Math.min(startLocation.column, endLocation.column);
-        const endColumn = Math.max(startLocation.column, endLocation.column);
+        // Adjust the selection to include the entire row if a cell with colspan is selected.
+        // This ensures that the selection covers the full width of the colspan cell.
+        //
+        // Example:
+        // +---+---+---+---+
+        // | A | B | C | D |
+        // +---+---+---+---+
+        // | E             |
+        // +---+---+---+---+
+        //
+        // If the selection starts at `B` and ends at `E`, the entire first row should be selected.
+        //
+        // In other words, the selection will represent the following cells:
+        // 	* Without this adjustment, only `B`, `A` and `E` would be selected.
+        // 	* With this adjustment, `A`, `B`, `C`, `D`, and `E` are selected.
+        //
+        // See: https://github.com/ckeditor/ckeditor5/issues/17538
+        const endColumnExtraColspan = parseInt(targetCell.getAttribute('colspan') || '1') - 1;
+        const endColumn = Math.max(startLocation.column, endLocation.column + endColumnExtraColspan);
         // 2-dimensional array of the selected cells to ease flipping the order of cells for backward selections.
         const selectionMap = new Array(endRow - startRow + 1).fill(null).map(()=>[]);
         const walkerOptions = {
@@ -7210,56 +7226,6 @@ function colorConfigToColorGridDefinitions(colorConfig) {
         }));
 }
 
-/**
- * The class representing a single row in a complex form,
- * used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}.
- *
- * **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table),
- * it will become a component in ckeditor5-ui.
- *
- * @internal
- */ class FormRowView extends View {
-    /**
-	 * A collection of row items (buttons, dropdowns, etc.).
-	 */ children;
-    /**
-	 * Creates an instance of the form row class.
-	 *
-	 * @param locale The locale instance.
-	 * @param options.labelView When passed, the row gets the `group` and `aria-labelledby`
-	 * DOM attributes and gets described by the label.
-	 */ constructor(locale, options = {}){
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('class', options.class || null);
-        this.children = this.createCollection();
-        if (options.children) {
-            options.children.forEach((child)=>this.children.add(child));
-        }
-        this.set('_role', null);
-        this.set('_ariaLabelledBy', null);
-        if (options.labelView) {
-            this.set({
-                _role: 'group',
-                _ariaLabelledBy: options.labelView.id
-            });
-        }
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-form__row',
-                    bind.to('class')
-                ],
-                role: bind.to('_role'),
-                'aria-labelledby': bind.to('_ariaLabelledBy')
-            },
-            children: this.children
-        });
-    }
-}
-
 /**
  * The class representing a table cell properties form, allowing users to customize
  * certain style aspects of a table cell, for instance, border, padding, text alignment, etc..
@@ -7705,13 +7671,13 @@ function colorConfigToColorGridDefinitions(colorConfig) {
         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 ---------------------------------------------------
@@ -7780,7 +7746,7 @@ function colorConfigToColorGridDefinitions(colorConfig) {
         ];
         saveButtonView.set({
             label: t('Save'),
-            icon: icons.check,
+            icon: IconCheck,
             class: 'ck-button-save',
             type: 'submit',
             withText: true
@@ -7790,7 +7756,7 @@ function colorConfigToColorGridDefinitions(colorConfig) {
         });
         cancelButtonView.set({
             label: t('Cancel'),
-            icon: icons.cancel,
+            icon: IconCancel,
             class: 'ck-button-cancel',
             withText: true
         });
@@ -7934,8 +7900,6 @@ const BALLOON_POSITIONS = /* #__PURE__ */ (()=>[
     return Rect.getBoundingRect(rects);
 }
 
-var tableCellProperties = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.105 18-.17 1H2.5A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1h15A1.5 1.5 0 0 1 19 2.5v9.975l-.85-.124-.15-.302V8h-5v4h.021l-.172.351-1.916.28-.151.027c-.287.063-.54.182-.755.341L8 13v5h3.105zM2 12h5V8H2v4zm10-4H8v4h4V8zM2 2v5h5V2H2zm0 16h5v-5H2v5zM13 7h5V2h-5v5zM8 2v5h4V2H8z\" opacity=\".6\"/><path d=\"m15.5 11.5 1.323 2.68 2.957.43-2.14 2.085.505 2.946L15.5 18.25l-2.645 1.39.505-2.945-2.14-2.086 2.957-.43L15.5 11.5zM13 6a1 1 0 0 1 1 1v3.172a2.047 2.047 0 0 0-.293.443l-.858 1.736-1.916.28-.151.027A1.976 1.976 0 0 0 9.315 14H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm-1 2H8v4h4V8z\"/></svg>";
-
 /**
  * Returns a string if all four values of box sides are equal.
  *
@@ -8122,7 +8086,7 @@ const propertyToCommandMap$1 = {
             const view = new ButtonView(locale);
             view.set({
                 label: t('Cell properties'),
-                icon: tableCellProperties,
+                icon: IconTableCellProperties,
                 tooltip: true
             });
             this.listenTo(view, 'execute', ()=>this._showView());
@@ -10044,9 +10008,9 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
         fillToolbar({
             view: this,
             icons: {
-                left: icons.objectLeft,
-                center: icons.objectCenter,
-                right: icons.objectRight
+                left: IconObjectInlineLeft,
+                center: IconObjectCenter,
+                right: IconObjectInlineRight
             },
             toolbar: alignmentToolbar,
             labels: this._alignmentLabels,
@@ -10077,7 +10041,7 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
         ];
         saveButtonView.set({
             label: t('Save'),
-            icon: icons.check,
+            icon: IconCheck,
             class: 'ck-button-save',
             type: 'submit',
             withText: true
@@ -10087,7 +10051,7 @@ const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
         });
         cancelButtonView.set({
             label: t('Cancel'),
-            icon: icons.cancel,
+            icon: IconCancel,
             class: 'ck-button-cancel',
             withText: true
         });
@@ -10125,8 +10089,6 @@ function isBorderStyleSet(value) {
     return value !== 'none';
 }
 
-var tableProperties = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8 2v5h4V2h1v5h5v1h-5v4h.021l-.172.351-1.916.28-.151.027c-.287.063-.54.182-.755.341L8 13v5H7v-5H2v-1h5V8H2V7h5V2h1zm4 6H8v4h4V8z\" opacity=\".6\"/><path d=\"m15.5 11.5 1.323 2.68 2.957.43-2.14 2.085.505 2.946L15.5 18.25l-2.645 1.39.505-2.945-2.14-2.086 2.957-.43L15.5 11.5zM17 1a2 2 0 0 1 2 2v9.475l-.85-.124-.857-1.736a2.048 2.048 0 0 0-.292-.44L17 3H3v14h7.808l.402.392L10.935 19H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h14z\"/></svg>";
-
 const ERROR_TEXT_TIMEOUT = 500;
 // Map of view properties and related commands.
 const propertyToCommandMap = {
@@ -10200,7 +10162,7 @@ const propertyToCommandMap = {
             const view = new ButtonView(locale);
             view.set({
                 label: t('Table properties'),
-                icon: tableProperties,
+                icon: IconTableProperties,
                 tooltip: true
             });
             this.listenTo(view, 'execute', ()=>this._showView());
@@ -10799,7 +10761,7 @@ const propertyToCommandMap = {
             const command = editor.commands.get('toggleTableCaption');
             const view = new ButtonView(locale);
             view.set({
-                icon: icons.caption,
+                icon: IconCaption,
                 tooltip: true,
                 isToggleable: true
             });
@@ -10957,6 +10919,9 @@ const propertyToCommandMap = {
     /**
 	 * 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
 	 */ static get requires() {
@@ -11273,13 +11238,20 @@ const propertyToCommandMap = {
         }
         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);
             });
         }
@@ -11287,7 +11259,7 @@ const propertyToCommandMap = {
         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}
@@ -11348,6 +11320,16 @@ const propertyToCommandMap = {
 	 * @param eventInfo An object containing information about the fired event.
 	 * @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;
         }
@@ -11384,6 +11366,7 @@ const propertyToCommandMap = {
 	 *  * If resizing is active but not allowed, it cancels the resizing process restoring the original widths.
 	 *  * Otherwise it propagates the changes from view to the model by executing the adequate commands.
 	 */ _onMouseUpHandler() {
+        this._initialMouseEventData = null;
         if (!this._isResizingActive) {
             return;
         }