From 7c59e055953aca2a9a3da8a829ebd46b66b23699 Mon Sep 17 00:00:00 2001
From: "Mahdi Cheikh Rouhou (macr)" <macr@odoo.com>
Date: Tue, 12 Mar 2024 14:09:18 +0100
Subject: [PATCH] [FIX] web_editor: expand tablepicker in correct direction

Issue:
======
Table picker isn't intuitive in rlt language and doesn't expand in the
correct direction.

Steps to reproduce the issue:
=============================
- Install arabic language
- Go to notes and create a new one
- Write `/` and choose table
- Use left/right arrow keys to see how the table expand.

Solution:
=========
For rtl direction it's better to make left for increase and right for
decrease since that's the direction of the langauge. Also the table
should be fixed on the right and expand on the left. (exactly the
opposite of ltr direction).

task-3721794

X-original-commit: 9d4c937e67cb72ff7152e01cda23255bf3c4d344
Part-of: odoo/odoo#159643
---
 .../js/editor/odoo-editor/src/OdooEditor.js   |  1 +
 .../src/tablepicker/TablePicker.js            | 12 +++++++---
 .../js/editor/odoo-editor/src/utils/utils.js  | 23 +++++++++++++++++++
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
index ec7da9719ab..777d4e07871 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
@@ -396,6 +396,7 @@ export class OdooEditor extends EventTarget {
             document: this.document,
             floating: true,
             getContextFromParentRect: this.options.getContextFromParentRect,
+            direction: this.options.direction,
         });
         document.body.appendChild(this.powerboxTablePicker.el);
         this.powerboxTablePicker.addEventListener('cell-selected', ev => {
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/tablepicker/TablePicker.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/tablepicker/TablePicker.js
index 95b2dfefdbc..be36cf12a5e 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/tablepicker/TablePicker.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/tablepicker/TablePicker.js
@@ -99,14 +99,15 @@ export class TablePicker extends EventTarget {
     }
 
     _showFloating() {
+        const isRtl = this.options.direction === 'rtl';
         const keydown = e => {
             const actions = {
                 ArrowRight: {
-                    colNumber: this.colNumber + 1,
+                    colNumber: (this.colNumber + (isRtl ? -1 : 1)) || 1,
                     rowNumber: this.rowNumber,
                 },
                 ArrowLeft: {
-                    colNumber: this.colNumber - 1 || 1,
+                    colNumber: (this.colNumber + (isRtl ? 1 : -1)) || 1,
                     rowNumber: this.rowNumber,
                 },
                 ArrowUp: {
@@ -135,7 +136,12 @@ export class TablePicker extends EventTarget {
         };
 
         const offset = getRangePosition(this.el, this.options.document, this.options);
-        this.el.style.left = `${offset.left}px`;
+        if (isRtl) {
+            this.el.style.right = `${offset.right}px`;
+        } else {
+            this.el.style.left = `${offset.left}px`;
+        }
+
         this.el.style.top = `${offset.top}px`;
 
         const stop = () => {
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
index 6293c74f913..acf8a9d6a12 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
@@ -2813,6 +2813,7 @@ export function getRangePosition(el, document, options = {}) {
     const selection = document.getSelection();
     if (!selection.rangeCount) return;
     const range = selection.getRangeAt(0);
+    const isRtl = options.direction === 'rtl';
 
     const marginRight = options.marginRight || 20;
     const marginBottom = options.marginBottom || 20;
@@ -2840,6 +2841,18 @@ export function getRangePosition(el, document, options = {}) {
         clonedRange.detach();
     }
 
+    if (isRtl) {
+        // To handle the RTL case we shift the elelement to the left by its size
+        // and handle it the same as left.
+        offset.right = offset.left - el.offsetWidth;
+        const leftMove = Math.max(0, offset.right + el.offsetWidth + marginLeft - window.innerWidth);
+        if (leftMove && offset.right - leftMove > marginRight) {
+            offset.right -= leftMove;
+        } else if (offset.right - leftMove < marginRight) {
+            offset.right = marginRight;
+        }
+    }
+
     const leftMove = Math.max(0, offset.left + el.offsetWidth + marginRight - window.innerWidth);
     if (leftMove && offset.left - leftMove > marginLeft) {
         offset.left -= leftMove;
@@ -2850,6 +2863,9 @@ export function getRangePosition(el, document, options = {}) {
     if (options.parentContextRect) {
         offset.left += options.parentContextRect.left;
         offset.top += options.parentContextRect.top;
+        if (isRtl) {
+            offset.right += options.parentContextRect.left;
+        }
     }
 
     if (
@@ -2864,6 +2880,13 @@ export function getRangePosition(el, document, options = {}) {
     if (offset) {
         offset.top += window.scrollY;
         offset.left += window.scrollX;
+        if (isRtl) {
+            offset.right += window.scrollX;
+        }
+    }
+    if (isRtl) {
+        // Get the actual right value.
+        offset.right = window.innerWidth - offset.right - el.offsetWidth;
     }
 
     return offset;