[FIX] html_editor: prevent header content loss on type change

Problem:
When trying to change the header type of "All products" in the
"/shop" page on Website, the title disappears.

Cause:
The title is `h1[data-oe-field]`. When we update it, we replace the
node with a new header node. This triggers `handleMutations` with
both the removed node and the new node. The old removed node with no
content is processed in `normalizeHandler`, which causes removal of
the content from the new node as well.

Solution:
We disable `setTag` on `o_editable`.

Steps to reproduce:
1. Enter Website.
2. Go to the cart and select the header "Order Summary".
3. Attempt to change the font style (Header 1, Header 2, etc.).
→ The header disappears.

opw-5106712

closes odoo#233286

X-original-commit: a10217b
Signed-off-by: David Monjoie (dmo) <[email protected]>
Signed-off-by: Walid Sahli (wasa) <[email protected]>

Author: walidsahli

addons/html_builder/static/src/core/setup_editor_plugin.js

@@ -9,6 +9,7 @@ export class SetupEditorPlugin extends Plugin {
         clean_for_save_handlers: this.cleanForSave.bind(this),
         closest_savable_providers: withSequence(10, (el) => el.closest(".o_editable")),
         o_editable_selectors: "[data-oe-model]",
+        unremovable_node_predicates: (node) => node.classList?.contains("o_editable"),
     };
 
     setup() {

addons/html_builder/static/tests/editor.test.js

@@ -276,4 +276,14 @@ describe("font types", () => {
         expect(".o-we-toolbar .btn[name='font']").toHaveText("Small");
         expect(editor.editable.querySelector("p")).toHaveClass("small");
     });
+
+    test("Should not be able to change tag of `o_editable` element", async () => {
+        const { getEditor } = await setupHTMLBuilder(`<h1 class="o_editable">abcd</h1>`);
+        const editor = getEditor();
+        const h1 = editor.editable.querySelector("h1");
+        setSelection({ anchorNode: h1, anchorOffset: 0, focusOffset: 1 });
+        await waitFor(".o-we-toolbar");
+        await expandToolbar();
+        expect(".o-we-toolbar .btn[name='font']").toHaveCount(0);
+    });
 });

addons/html_editor/static/src/core/dom_plugin.js

@@ -574,10 +574,30 @@ export class DomPlugin extends Plugin {
         this.dependencies.selection.setSelection({ anchorNode, anchorOffset });
     }
 
+    /**
+     * Determines if a block element can be safely retagged.
+     *
+     * Certain blocks (like 'o_editable') should not be retagged because doing so
+     * will recreate the block, potentially causing issues. This function checks
+     * if retagging a block is safe.
+     *
+     * @param {HTMLElement} block
+     * @returns {boolean}
+     */
+    isRetaggingSafe(block) {
+        return !(
+            (isParagraphRelatedElement(block) ||
+                isListItemElement(block) ||
+                isPhrasingContent(block)) &&
+            this.getResource("unremovable_node_predicates").some((predicate) => predicate(block))
+        );
+    }
+
     getBlocksToSet() {
         const targetedBlocks = [...this.dependencies.selection.getTargetedBlocks()];
         return targetedBlocks.filter(
             (block) =>
+                this.isRetaggingSafe(block) &&
                 !descendants(block).some((descendant) => targetedBlocks.includes(descendant)) &&
                 block.isContentEditable
         );