[FIX] web_editor: switch the checkbox of checklist to right for rtl

Reproduction:
1. Create a /checklist, switch the direction by /swith
2. Type something and the list element is rtl, but the checkbox is on
the left

Fix: add margin to the right for checklist with the same value as what
we have on the left, reset left and right position for the li element
when we have rtl direction on the whole list. When we switch direction
on a li element when set the direction on the list level, e.g. we get
the cloest list element and set the direction for the whole list.

opw-3215701

closes odoo/odoo#119423

X-original-commit: 01b42c7d76c814e13325f8880dc9de765b0f43c8
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Signed-off-by: Liu Jinjiu (jili) <jili@odoo.com>

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

@@ -377,7 +377,7 @@ export const editorCommands = {
         const changedElements = [];
         const defaultDirection = editor.options.direction;
         const shouldApplyStyle = !isSelectionFormat(editor.editable, 'switchDirection');
-        for (const block of new Set(selectedTextNodes.map(textNode => closestBlock(textNode)))) {
+        for (const block of new Set(selectedTextNodes.map(textNode => closestElement(textNode, 'ul,ol') || closestBlock(textNode)))) {
             if (!shouldApplyStyle) {
                 block.removeAttribute('dir');
             } else {

addons/web_editor/static/src/scss/web_editor.common.scss

@@ -143,6 +143,7 @@ ul.o_checklist {
         list-style: none;
         position: relative;
         margin-left: $o-checklist-margin-left;
+        margin-right: $o-checklist-margin-left;
 
         &:not(.oe-nested)::before {
             content: '';
@@ -169,6 +170,11 @@ ul.o_checklist {
         }
     }
 }
+ul.o_checklist[dir="rtl"] > li:not(.oe-nested)::before {
+    left: auto;
+    right: - $o-checklist-margin-left;
+    text-align: right;
+}
 ol > li.o_indent, ul > li.o_indent {
     margin-left: 0;
     list-style: none;