[FIX] web_editor: delete behavior in LI

Before this commit:

* A backspace at the beginning of a List Item (LI), the indentation of the list item was reduced by 1 unit.
If not possible, the current LI was merge with the previous LI.
* A delete at the end of a LI, first we remove one unit of indentation from the next LI,
only when not possible anymore we merge next LI in the current LI.

After this commit:

* A backspace at the beginning toggle off the current LI ( the LI tag is remove and popped out of the List )
The parent List is splitted if needed.
* A delete at the end of a LI directly merge next element inside the current LI.

task-3186679

Part-of: odoo/odoo#125211
Co-authored-by: Aashish Thakur <aath@odoo.com>

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

@@ -258,13 +258,14 @@ HTMLElement.prototype.oDeleteBackward = function (offset, alreadyMoved = false,
 };
 
 HTMLLIElement.prototype.oDeleteBackward = function (offset, alreadyMoved = false) {
-    if (offset > 0 || this.previousElementSibling) {
-        // If backspace inside li content or if the li is not the first one,
-        // it behaves just like in a normal element.
-        HTMLElement.prototype.oDeleteBackward.call(this, offset, alreadyMoved);
+    // If the deleteBackward is performed at the begening of a LI element,
+    // we take the current LI out of the list.
+    if (offset === 0) {
+        this.oToggleList(offset);
         return;
     }
-    this.oShiftTab(offset);
+    // Otherwise, call the HTMLElement deleteBackward method.
+    HTMLElement.prototype.oDeleteBackward.call(this, offset, alreadyMoved);
 };
 
 HTMLBRElement.prototype.oDeleteBackward = function (offset, alreadyMoved = false) {

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

@@ -25,6 +25,7 @@ import {
     childNodeIndex,
     boundariesOut,
     isEditorTab,
+    isVisible,
 } from '../utils/utils.js';
 
 /**
@@ -144,7 +145,32 @@ HTMLElement.prototype.oDeleteForward = function (offset) {
         firstLeafNode.oDeleteBackward(Math.min(1, nodeSize(firstLeafNode)));
         return;
     }
+
     const nextSibling = this.nextSibling;
+    if (
+        (
+            offset === this.childNodes.length ||
+            (this.childNodes.length === 1 && this.childNodes[0].tagName === 'BR')
+        ) &&
+        this.parentElement &&
+        nextSibling &&
+        ['LI', 'UL', 'OL'].includes(nextSibling.tagName)
+    ) {
+        const nextSiblingNestedLi = nextSibling.querySelector('li:first-child');
+        if (nextSiblingNestedLi) {
+            // Add the first LI from the next sibbling list to the current list.
+            this.after(nextSiblingNestedLi);
+            // Remove the next sibbling list if it's empty.
+            if (!isVisible(nextSibling, false) || nextSibling.textContent === '') {
+                nextSibling.remove();
+            }
+            HTMLElement.prototype.oDeleteBackward.call(nextSiblingNestedLi, 0, true);
+        } else {
+            HTMLElement.prototype.oDeleteBackward.call(nextSibling, 0);
+        }
+        return;
+    }
+
     // Remove the nextSibling if it is a non-editable element.
     if (
         nextSibling &&
@@ -176,6 +202,13 @@ HTMLElement.prototype.oDeleteForward = function (offset) {
     );
     if (firstOutNode) {
         const [node, offset] = leftPos(firstOutNode);
+        // If the next node is a <LI> we call directly the htmlElement
+        // oDeleteBackward : because we don't want the special cases of
+        // deleteBackward for LI when we comme from a deleteForward.
+        if (node.tagName === 'LI') {
+            HTMLElement.prototype.oDeleteBackward.call(node, offset);
+            return;
+        }
         node.oDeleteBackward(offset);
         return;
     }