[FIX] html_editor: fix table picker in rtl

Spec:
=====
- When `direction='rtl'` we need `ArrowLeft` to add columns and
`ArrowRight` to remove columns in the `TablePicker`.
- Expand the tablepicker to the left when adding columns.
- Show correct label in `rtl`  lang

addons/html_editor/static/src/main/table/table_menu.js

@@ -11,6 +11,7 @@ export class TableMenu extends Component {
         overlay: Object,
         dropdownState: Object,
         target: { validate: (el) => el.nodeType === Node.ELEMENT_NODE },
+        direction: String,
     };
     static components = { Dropdown, DropdownItem };
 
@@ -32,29 +33,31 @@ export class TableMenu extends Component {
     }
 
     colItems() {
+        const beforeLabel = this.props.direction === "ltr" ? "left" : "right";
+        const afterLabel = this.props.direction === "ltr" ? "right" : "left";
         return [
             !this.isFirst && {
                 name: "move_left",
                 icon: "fa-chevron-left disabled",
-                text: _t("Move left"),
+                text: _t(`Move ${beforeLabel}`),
                 action: this.moveColumn.bind(this, "left"),
             },
             !this.isLast && {
                 name: "move_right",
                 icon: "fa-chevron-right",
-                text: _t("Move right"),
+                text: _t(`Move ${afterLabel}`),
                 action: this.moveColumn.bind(this, "right"),
             },
             {
                 name: "insert_left",
                 icon: "fa-plus",
-                text: _t("Insert left"),
+                text: _t(`Insert ${beforeLabel}`),
                 action: this.insertColumn.bind(this, "before"),
             },
             {
                 name: "insert_right",
                 icon: "fa-plus",
-                text: _t("Insert right"),
+                text: _t(`Insert ${afterLabel}`),
                 action: this.insertColumn.bind(this, "after"),
             },
             {

addons/html_editor/static/src/main/table/table_picker.js

@@ -8,6 +8,7 @@ export class TablePicker extends Component {
             validate: (el) => el.nodeType === Node.ELEMENT_NODE,
         },
         overlay: Object,
+        direction: String,
     };
 
     setup() {
@@ -21,6 +22,7 @@ export class TablePicker extends Component {
         });
         useExternalListener(this.props.editable, "keydown", (ev) => {
             const key = ev.key;
+            const isRTL = this.props.direction === "rtl";
             switch (key) {
                 case "Escape":
                     this.props.overlay.close();
@@ -41,13 +43,23 @@ export class TablePicker extends Component {
                     break;
                 case "ArrowLeft":
                     ev.preventDefault();
-                    if (this.state.cols > 1) {
-                        this.state.cols -= 1;
+                    if (isRTL) {
+                        this.state.cols += 1;
+                    } else {
+                        if (this.state.cols > 1) {
+                            this.state.cols -= 1;
+                        }
                     }
                     break;
                 case "ArrowRight":
-                    this.state.cols += 1;
                     ev.preventDefault();
+                    if (isRTL) {
+                        if (this.state.cols > 1) {
+                            this.state.cols -= 1;
+                        }
+                    } else {
+                        this.state.cols += 1;
+                    }
                     break;
             }
         });

addons/html_editor/static/src/main/table/table_ui_plugin.js

@@ -35,6 +35,20 @@ export class TableUIPlugin extends Plugin {
         /** @type {import("@html_editor/core/overlay_plugin").Overlay} */
         this.picker = this.shared.createOverlay(TablePicker, {
             position: "bottom-start",
+            onPositioned: (picker, position) => {
+                const popperRect = picker.getBoundingClientRect();
+                const { left } = position;
+                if (this.config.direction === "rtl") {
+                    // position from the right instead of the left as it is needed
+                    // to ensure the expand animation is properly done
+                    if (left < 0) {
+                        picker.style.right = `${-popperRect.width - left}px`;
+                    } else {
+                        picker.style.right = `${window.innerWidth - left - popperRect.width}px`;
+                    }
+                    picker.style.removeProperty("left");
+                }
+            },
         });
 
         this.activeTd = null;
@@ -79,6 +93,7 @@ export class TableUIPlugin extends Plugin {
                 dispatch: this.dispatch,
                 editable: this.editable,
                 overlay: this.picker,
+                direction: this.config.direction,
             },
         });
     }
@@ -152,6 +167,7 @@ export class TableUIPlugin extends Plugin {
                     overlay: this.colMenu,
                     target: td,
                     dropdownState: this.createDropdownState(this.rowMenu),
+                    direction: this.config.direction,
                 },
             });
         }

addons/html_editor/static/tests/table/adding_table.test.js

@@ -4,7 +4,7 @@ import { setupEditor } from "../_helpers/editor";
 import { getContent } from "../_helpers/selection";
 import { insertText } from "../_helpers/user_actions";
 import { unformat } from "../_helpers/format";
-import { press, waitFor } from "@odoo/hoot-dom";
+import { press, waitFor, queryOne } from "@odoo/hoot-dom";
 
 function expectContentToBe(el, html) {
     expect(getContent(el)).toBe(unformat(html));
@@ -108,3 +108,41 @@ test.tags("iframe", "desktop")(
         expect(":iframe .o_table").toHaveCount(1);
     }
 );
+
+test.tags("desktop")("Expand columns in the correct direction in 'rtl'", async () => {
+    const { editor } = await setupEditor("<p>a[]</p>", {
+        config: {
+            direction: "rtl",
+        },
+    });
+    insertText(editor, "/table");
+    press("Enter");
+    await waitFor(".o-we-tablepicker");
+
+    // Initially we have 3 columns
+    const tablePickerOverlay = queryOne(".overlay");
+    expect(tablePickerOverlay).toHaveStyle({ right: /px$/ });
+    const right = tablePickerOverlay.style.right;
+    const width3Columns = tablePickerOverlay.getBoundingClientRect().width;
+    expect(".o-we-cell.active").toHaveCount(9);
+
+    // Add one column -> we have 4 columns
+    press("ArrowLeft");
+    await animationFrame();
+    expect(tablePickerOverlay.getBoundingClientRect().width).toBeGreaterThan(width3Columns);
+    expect(tablePickerOverlay).toHaveStyle({ right });
+    expect(".o-we-cell.active").toHaveCount(12);
+
+    // Remove one column -> we have 3 columns
+    press("ArrowRight");
+    await animationFrame();
+    expect(".o-we-cell.active").toHaveCount(9);
+    expect(tablePickerOverlay).toHaveStyle({ right });
+
+    // Remove one column -> we have 2 columns
+    press("ArrowRight");
+    await animationFrame();
+    expect(tablePickerOverlay.getBoundingClientRect().width).toBeLessThan(width3Columns);
+    expect(tablePickerOverlay).toHaveStyle({ right });
+    expect(".o-we-cell.active").toHaveCount(6);
+});