[FIX] html_editor: update font size selector on set tag in toolbar

In website builder:

1. Select text
2. Change heading type in the toolbar

-> the font size selector in the toolbar is blank.

This is because the font size input is in an iframe, and a chain of
events triggered by changing the heading type (`setTag`) leads to the
iframe's document to be re-rendered. This only happens in the website
builder because of a call to `updateContainers` as a step_added handler
that triggers the `change_current_options_containers_listeners`.

These listeners are triggered because `setTag` replaced the block which
was the target of the `BuilderOptionsPlugin` with another. The target is
not connected anymore so it was assumed we would always need to reset
the containers, but the target didn't really change, it was simply
replaced to change its tag. So this allows going through the checks to
see if updating the containers is needed before triggering the
listeners. Since in this case it isn't, they won't be and the iframe
will remain intact.

Author: Zynton

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

@@ -115,14 +115,16 @@ export class BuilderOptionsPlugin extends Plugin {
         if (!this.target || !this.target.isConnected) {
             this.lastContainers = this.lastContainers.filter((c) => c.element.isConnected);
             this.target = this.lastContainers.at(-1)?.element;
-            this.dependencies.history.setStepExtra("optionSelection", this.target);
-            this.dispatchTo("change_current_options_containers_listeners", this.lastContainers);
-            return;
         }
 
         const newContainers = this.computeContainers(this.target);
         // Do not update the containers if they did not change or not forced to update.
-        if (newContainers.length === this.lastContainers.length && !force) {
+        if (
+            this.target &&
+            this.target.isConnected &&
+            newContainers.length === this.lastContainers.length &&
+            !force
+        ) {
             const previousIds = this.lastContainers.map((c) => c.id);
             const newIds = newContainers.map((c) => c.id);
             const areSameElements = newIds.every((id, i) => id === previousIds[i]);

addons/website/static/tests/builder/editor.test.js

@@ -3,7 +3,7 @@ import { expect, test, describe } from "@odoo/hoot";
 import { animationFrame } from "@odoo/hoot-mock";
 import { contains, patchWithCleanup } from "@web/../tests/web_test_helpers";
 import { defineWebsiteModels, setupWebsiteBuilder } from "./website_helpers";
-import { click, manuallyDispatchProgrammaticEvent, waitFor } from "@odoo/hoot-dom";
+import { click, manuallyDispatchProgrammaticEvent, waitFor, queryOne } from "@odoo/hoot-dom";
 import { isTextNode } from "@html_editor/utils/dom_info";
 import { parseHTML } from "@html_editor/utils/html";
 import { setSelection } from "@html_editor/../tests/_helpers/selection";
@@ -81,6 +81,60 @@ test("should set contenteditable to false on .o_not_editable elements", async ()
     expect(snippet).toHaveAttribute("contenteditable", "false");
 });
 
+test("should preserve iframe in the toolbar's font size input", async () => {
+    const { getEditor } = await setupWebsiteBuilder(`
+        <section class="s_text_block pt40 pb40 o_colored_level" data-snippet="s_text_block" data-name="Text">
+            <div class="container s_allow_columns">
+                <p>Some text.</p>
+                <p>Some more text.</p>
+            </div>
+        </section>
+    `);
+    const editor = getEditor();
+    const p = editor.editable.querySelector("p")
+    const p2 = p.nextElementSibling;
+    // Activate the text block snippet.
+    click(p);
+
+    // Select the word "more".
+    editor.shared.selection.setSelection({
+        anchorNode: p2.firstChild,
+        anchorOffset: 5,
+        focusNode: p2.firstChild,
+        focusOffset: 9,
+    });
+    await waitFor(".o-we-toolbar");
+    // Get the font size selector input.
+    let iframeEl = queryOne(".o-we-toolbar [name='font_size_selector'] iframe");
+    let inputEl = iframeEl.contentWindow.document?.querySelector("input");
+    // Change the font style from paragraph to paragraph.
+    await contains(".o-we-toolbar .btn[name='font'].dropdown-toggle").click();
+    await waitFor(".btn[name='font'].dropdown-toggle.show");
+    await contains(".dropdown-menu [name='p']").click();
+    iframeEl = queryOne(".o-we-toolbar [name='font_size_selector'] iframe");
+    let newInputEl = iframeEl.contentWindow.document?.querySelector("input");
+    expect(newInputEl).toBe(inputEl); // The input shouldn't have been changed.
+
+    // Select the first word "text".
+    editor.shared.selection.setSelection({
+        anchorNode: p.firstChild,
+        anchorOffset: 5,
+        focusNode: p.firstChild,
+        focusOffset: 9,
+    });
+    await waitFor(".o-we-toolbar");
+    // Get the font size selector input.
+    iframeEl = queryOne(".o-we-toolbar [name='font_size_selector'] iframe");
+    inputEl = iframeEl.contentWindow.document?.querySelector("input");
+    // Change the font style from paragraph to header 1.
+    await contains(".o-we-toolbar .btn[name='font'].dropdown-toggle").click();
+    await waitFor(".btn[name='font'].dropdown-toggle.show");
+    await contains(".dropdown-menu [name='h2']").click();
+    iframeEl = queryOne(".o-we-toolbar [name='font_size_selector'] iframe");
+    newInputEl = iframeEl.contentWindow.document?.querySelector("input");
+    expect(newInputEl).toBe(inputEl); // The input shouldn't have been changed.
+});
+
 describe("toolbar dropdowns", () => {
     const setup = async () => {
         const { getEditor } = await setupWebsiteBuilder(`<p>abc</p>`);