[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

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 => {

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 = () => {

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;