@ckeditor/ckeditor5-table 45.0.0-alpha.6 → 45.0.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "45.0.0-alpha.6",
+  "version": "45.0.0-alpha.7",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,14 +13,14 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "45.0.0-alpha.6",
-    "@ckeditor/ckeditor5-clipboard": "45.0.0-alpha.6",
-    "@ckeditor/ckeditor5-core": "45.0.0-alpha.6",
-    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.6",
-    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.6",
-    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.6",
-    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.6",
-    "@ckeditor/ckeditor5-widget": "45.0.0-alpha.6",
+    "ckeditor5": "45.0.0-alpha.7",
+    "@ckeditor/ckeditor5-clipboard": "45.0.0-alpha.7",
+    "@ckeditor/ckeditor5-core": "45.0.0-alpha.7",
+    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.7",
+    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.7",
+    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.7",
+    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.7",
+    "@ckeditor/ckeditor5-widget": "45.0.0-alpha.7",
     "es-toolkit": "1.32.0"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/tablecolumnresize/tablecolumnresizeediting.d.ts

@@ -104,6 +104,34 @@ export default class TableColumnResizeEditing extends Plugin {
      * Registers listeners to handle resizing process.
      */
     private _registerResizingListeners;
+    /**
+     * Calculate and set `top` and `bottom` styles to the column resizer element to fit the height of the table.
+     *
+     * @param viewResizer The column resizer element.
+     */
+    private _recalculateResizerElement;
+    /**
+     * Remove `top` and `bottom` styles of the column resizer element.
+     *
+     * @param viewResizer The column resizer element.
+     */
+    private _resetResizerStyles;
+    /**
+     * Handles the `mouseover` event on column resizer element.
+     * Recalculates the `top` and `bottom` styles of the column resizer element to fit the height of the table.
+     *
+     * @param eventInfo An object containing information about the fired event.
+     * @param domEventData The data related to the DOM event.
+     */
+    private _onMouseOverHandler;
+    /**
+     * Handles the `mouseout` event on column resizer element.
+     * When resizing is not active, it resets the `top` and `bottom` styles of the column resizer element.
+     *
+     * @param eventInfo An object containing information about the fired event.
+     * @param domEventData The data related to the DOM event.
+     */
+    private _onMouseOutHandler;
     /**
      * Handles the `mousedown` event on column resizer element:
      *  * calculates the initial column pixel widths,

package/src/tablecolumnresize/tablecolumnresizeediting.js

@@ -6,7 +6,7 @@
  * @module table/tablecolumnresize/tablecolumnresizeediting
  */
 import { throttle, isEqual } from 'es-toolkit/compat';
-import { global, DomEmitterMixin } from 'ckeditor5/src/utils.js';
+import { global, DomEmitterMixin, Rect, toUnit } from 'ckeditor5/src/utils.js';
 import { Plugin } from 'ckeditor5/src/core.js';
 import MouseEventsObserver from '../../src/tablemouse/mouseeventsobserver.js';
 import TableEditing from '../tableediting.js';
@@ -16,6 +16,7 @@ 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, COLUMN_RESIZE_DISTANCE_THRESHOLD } from './constants.js';
+const toPx = /* #__PURE__ */ toUnit('px');
 /**
  * The table column resize editing plugin.
  */
@@ -326,10 +327,83 @@ export default class TableColumnResizeEditing extends Plugin {
     _registerResizingListeners() {
         const editingView = this.editor.editing.view;
         editingView.addObserver(MouseEventsObserver);
+        editingView.document.on('mouseover', this._onMouseOverHandler.bind(this), { priority: 'high' });
         editingView.document.on('mousedown', this._onMouseDownHandler.bind(this), { priority: 'high' });
+        editingView.document.on('mouseout', this._onMouseOutHandler.bind(this), { priority: 'high' });
         this._domEmitter.listenTo(global.window.document, 'mousemove', throttle(this._onMouseMoveHandler.bind(this), 50));
         this._domEmitter.listenTo(global.window.document, 'mouseup', this._onMouseUpHandler.bind(this));
     }
+    /**
+     * Calculate and set `top` and `bottom` styles to the column resizer element to fit the height of the table.
+     *
+     * @param viewResizer The column resizer element.
+     */
+    _recalculateResizerElement(viewResizer) {
+        const editor = this.editor;
+        const domConverter = editor.editing.view.domConverter;
+        // Get DOM target figure ancestor element.
+        const domTable = domConverter.mapViewToDom(viewResizer.findAncestor('table'));
+        // Get DOM table cell element.
+        const domCell = domConverter.mapViewToDom(viewResizer.findAncestor(item => ['td', 'th'].includes(item.name)));
+        const rectTable = new Rect(domTable);
+        const rectCell = new Rect(domCell);
+        // Calculate the top, and bottom positions of the column resizer element.
+        const targetTopPosition = toPx(Number((rectTable.top - rectCell.top).toFixed(4)));
+        const targetBottomPosition = toPx(Number((rectCell.bottom - rectTable.bottom).toFixed(4)));
+        // Set `top` and `bottom` styles to the column resizer element.
+        editor.editing.view.change(viewWriter => {
+            viewWriter.setStyle('top', targetTopPosition, viewResizer);
+            viewWriter.setStyle('bottom', targetBottomPosition, viewResizer);
+        });
+    }
+    /**
+     * Remove `top` and `bottom` styles of the column resizer element.
+     *
+     * @param viewResizer The column resizer element.
+     */
+    _resetResizerStyles(viewResizer) {
+        this.editor.editing.view.change(viewWriter => {
+            viewWriter.removeStyle('top', viewResizer);
+            viewWriter.removeStyle('bottom', viewResizer);
+        });
+    }
+    /**
+     * Handles the `mouseover` event on column resizer element.
+     * Recalculates the `top` and `bottom` styles of the column resizer element to fit the height of the table.
+     *
+     * @param eventInfo An object containing information about the fired event.
+     * @param domEventData The data related to the DOM event.
+     */
+    _onMouseOverHandler(eventInfo, domEventData) {
+        const target = domEventData.target;
+        if (!target.hasClass('ck-table-column-resizer')) {
+            return;
+        }
+        if (!this._isResizingAllowed) {
+            return;
+        }
+        this._recalculateResizerElement(target);
+    }
+    /**
+     * Handles the `mouseout` event on column resizer element.
+     * When resizing is not active, it resets the `top` and `bottom` styles of the column resizer element.
+     *
+     * @param eventInfo An object containing information about the fired event.
+     * @param domEventData The data related to the DOM event.
+     */
+    _onMouseOutHandler(eventInfo, domEventData) {
+        const target = domEventData.target;
+        if (!target.hasClass('ck-table-column-resizer')) {
+            return;
+        }
+        if (!this._isResizingAllowed) {
+            return;
+        }
+        if (this._isResizingActive) {
+            return;
+        }
+        this._resetResizerStyles(target);
+    }
     /**
      * Handles the `mousedown` event on column resizer element:
      *  * calculates the initial column pixel widths,
@@ -461,7 +535,7 @@ export default class TableColumnResizeEditing extends Plugin {
             this._onMouseUpHandler();
             return;
         }
-        const { columnPosition, flags: { isRightEdge, isTableCentered, isLtrContent }, elements: { viewFigure, viewLeftColumn, viewRightColumn }, widths: { viewFigureParentWidth, tableWidth, leftColumnWidth, rightColumnWidth } } = this._resizingData;
+        const { columnPosition, flags: { isRightEdge, isTableCentered, isLtrContent }, elements: { viewFigure, viewLeftColumn, viewRightColumn, viewResizer }, widths: { viewFigureParentWidth, tableWidth, leftColumnWidth, rightColumnWidth } } = this._resizingData;
         const dxLowerBound = -leftColumnWidth + COLUMN_MIN_WIDTH_IN_PIXELS;
         const dxUpperBound = isRightEdge ?
             viewFigureParentWidth - tableWidth :
@@ -486,6 +560,7 @@ export default class TableColumnResizeEditing extends Plugin {
                 writer.setStyle('width', `${rightColumnWidthAsPercentage}%`, viewRightColumn);
             }
         });
+        this._recalculateResizerElement(viewResizer);
     }
     /**
      * Handles the `mouseup` event.
@@ -556,6 +631,10 @@ export default class TableColumnResizeEditing extends Plugin {
         editingView.change(writer => {
             writer.removeClass('ck-table-column-resizer__active', viewResizer);
         });
+        const element = editingView.domConverter.mapViewToDom(viewResizer);
+        if (!element.matches(':hover')) {
+            this._resetResizerStyles(viewResizer);
+        }
         this._isResizingActive = false;
         this._resizingData = null;
     }

package/theme/tablecolumnresize.css

@@ -16,10 +16,6 @@
 	table-layout: fixed;
 }
 
-.ck-content .table table {
-	overflow: hidden;
-}
-
 .ck-content .table td,
 .ck-content .table th {
 	/* To prevent text overflowing beyond its cell when columns are resized by resize handler
@@ -58,12 +54,6 @@
 .ck.ck-editor__editable .table .ck-table-column-resizer__active {
 	background-color: var(--ck-color-selector-column-resizer-hover);
 	opacity: 0.25;
-	/* The resizer element resides in each cell so to occupy the entire height of the table, which is unknown from a CSS point of view,
-	   it is extended to an extremely high height. Even for screens with a very high pixel density, the resizer will fulfill its role as
-	   it should, i.e. for a screen of 476 ppi the total height of the resizer will take over 350 sheets of A4 format, which is totally
-	   unrealistic height for a single table. */
-	top: -999999px;
-	bottom: -999999px;
 }
 
 .ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer {