[ADD] web_editor: when hovering a table border, use the resize cursors

This adds the feature of showing the appropriate resize cursor depending
on which border (vertical or horizontal) is hovered in a table.

task-2858455

Part-of: odoo/odoo#92200

addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js

@@ -1992,6 +1992,47 @@ export class OdooEditor extends EventTarget {
             this.toolbarShow();
         }
     }
+    /**
+     * If the mouse is hovering over one of the borders of a table cell element,
+     * return the side of that border ('left'|'top'|'right'|'bottom').
+     * Otherwise, return false.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     * @returns {boolean}
+     */
+    _isHoveringTdBorder(ev) {
+        if (ev.target && ev.target.nodeName === 'TD') {
+            const SENSITIVITY = 5;
+            const targetRect = ev.target.getBoundingClientRect();
+            if (ev.clientX <= targetRect.x + SENSITIVITY) {
+                return 'left';
+            } else if (ev.clientY <= targetRect.y + SENSITIVITY) {
+                return 'top';
+            } else if (ev.clientX >= targetRect.x + ev.target.clientWidth - SENSITIVITY) {
+                return 'right';
+            } else if (ev.clientY >= targetRect.y + ev.target.clientHeight - SENSITIVITY) {
+                return 'bottom';
+            }
+        }
+        return false;
+    }
+    /**
+     * Change the cursor to a resizing cursor, in the direction specified. If no
+     * direction is specified, return the cursor to its default.
+     *
+     * @private
+     * @param {'col'|'row'|false} direction 'col'/'row' to hint column/row,
+     *                                      false to remove the hints
+     */
+    _toggleTableResizeCursor(direction) {
+        this.editable.classList.remove('o_col_resize', 'o_row_resize');
+        if (direction === 'col') {
+            this.editable.classList.add('o_col_resize');
+        } else if (direction === 'row') {
+            this.editable.classList.add('o_resizing_row');
+        }
+    }
 
     // HISTORY
     // =======
@@ -2129,7 +2170,7 @@ export class OdooEditor extends EventTarget {
 
         const sel = this.document.getSelection();
         if (!hasTableSelection(this.editable)) {
-            if (this.editable.classList.contains('o_resizing_column') || this.editable.classList.contains('o_resizing_row')) {
+            if (this.editable.classList.contains('o_col_resize') || this.editable.classList.contains('o_row_resize')) {
                 show = false;
             }
             if (!sel.anchorNode) {
@@ -3309,6 +3350,8 @@ export class OdooEditor extends EventTarget {
         if (this._currentMouseState === 'mousedown') {
             this._handleSelectionInTable(ev);
         }
+        const sideToDirection = {top: 'row', right: 'col', bottom: 'row', left: 'col'};
+        this._toggleTableResizeCursor(sideToDirection[this._isHoveringTdBorder(ev)] || false);
     }
 
     /**

addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss

@@ -1,11 +1,27 @@
-.odoo-editor-editable ::selection {
-    /* For color conversion over white background, use X = (Y-(1-P)*255)/P where
-        X = converted color component (R, G, B) (0 <= X <= 255)
-        Y = desired apparent color component (R, G, B) (0 <= Y <= 255)
-        P = opacity (0 <= P <=1)
-        (limitation: Y + 255P >= 255)
-    */
-    background-color: rgba(117, 167, 249, 0.5) !important; /* #bad3fc equivalent when over white*/
+.odoo-editor-editable {
+    ::selection {
+        /* For color conversion over white background, use X = (Y-(1-P)*255)/P where
+            X = converted color component (R, G, B) (0 <= X <= 255)
+            Y = desired apparent color component (R, G, B) (0 <= Y <= 255)
+            P = opacity (0 <= P <=1)
+            (limitation: Y + 255P >= 255)
+        */
+        background-color: rgba(117, 167, 249, 0.5) !important; /* #bad3fc equivalent when over white*/
+    }
+    &.o_col_resize {
+        cursor: col-resize;
+
+        ::selection {
+            background-color: transparent;
+        }
+    }
+    &.o_row_resize {
+        cursor: row-resize;
+
+        ::selection {
+            background-color: transparent;
+        }
+    }
 }
 .o_selected_table {
     caret-color: transparent;