[FIX] web_editor: delete behaviour on heading elements

Before this commit:

1. When an empty heading from H4 to H6 is the only element in the editable
   area, the backspace key doesn't turn it into paragraphs.
2. When the cursor is at the start of a heading element with text content, and the
   user hits the backspace key, the element gets converted into a paragraph.

After this commit:

All heading elements are removed on backspace if they're empty.

task-3456815

closes odoo#159004

X-original-commit: 6a52ac3
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>

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

@@ -184,13 +184,16 @@ HTMLElement.prototype.oDeleteBackward = function (offset, alreadyMoved = false,
          */
         if (
             !this.previousElementSibling &&
-            ['BLOCKQUOTE', 'H1', 'H2', 'H3', 'PRE'].includes(this.nodeName) &&
+            paragraphRelatedElements.includes(this.nodeName) &&
+            this.nodeName !== 'P' &&
             !closestLi
         ) {
-            const p = document.createElement('p');
-            p.replaceChildren(...this.childNodes);
-            this.replaceWith(p);
-            setSelection(p, offset);
+            if (!this.textContent) {
+                const p = document.createElement('p');
+                p.replaceChildren(...this.childNodes);
+                this.replaceWith(p);
+                setSelection(p, offset);
+            }
             return;
         } else {
             moveDest = leftPos(this);

addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js

@@ -3314,9 +3314,31 @@ X[]
                     contentAfter: `<p>[]<br></p>`,
                 });
                 await testEditor(BasicEditor, {
-                    contentBefore: `<h1>[]abcd</h1>`,
+                    contentBefore: `<h1><br>[]</h1>`,
                     stepFunction: deleteBackward,
-                    contentAfter: `<p>[]abcd</p>`,
+                    contentAfter: `<p>[]<br></p>`,
+                });
+                await testEditor(BasicEditor, {
+                    contentBefore: `<h4><br>[]</h4>`,
+                    stepFunction: deleteBackward,
+                    contentAfter: `<p>[]<br></p>`,
+                });
+            });
+            it('should not delete the block and appends a paragraph if the element has textContent ', async () => {
+                await testEditor(BasicEditor, {
+                    contentBefore: `<h1>[]abc</h1>`,
+                    stepFunction: deleteBackward,
+                    contentAfter: `<h1>[]abc</h1>`,
+                });
+                await testEditor(BasicEditor, {
+                    contentBefore: `<h1><font style="background-color: rgb(255, 0, 0);">[]abc</font></h1>`,
+                    stepFunction: deleteBackward,
+                    contentAfter: `<h1><font style="background-color: rgb(255, 0, 0);">[]abc</font></h1>`,
+                });
+                await testEditor(BasicEditor, {
+                    contentBefore: `<table><tbody><tr><td><h1>[]ab</h1></td><td>cd</td><td>ef</td></tr><tr><td><br></td><td><br></td><td><br></td></tr></tbody></table>`,
+                    stepFunction: deleteBackward,
+                    contentAfter: `<table><tbody><tr><td><h1>[]ab</h1></td><td>cd</td><td>ef</td></tr><tr><td><br></td><td><br></td><td><br></td></tr></tbody></table>`,
                 });
             });
             describe('Nested editable zone (inside contenteditable=false element)', () => {