[FIX] web_editor: link preview on label change

Before this commit, the link preview in the Link Dialog would not be
updated after changes on the label input field, depending on other
actions to be updated (e.g. picking a different type of link/button or
changing the URL input field).

This commit makes sure the link preview reacts to changes on the label
input field.

task-3580621

closes odoo/odoo#148202

X-original-commit: c7954225e8680821a46c9628e5e05df2ae575da7
Signed-off-by: Nicolas Bayet (nby) <nby@odoo.com>
Signed-off-by: Rodolpho Cammarosano de Lima (rcdl) <rcdl@odoo.com>

addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js

@@ -21,6 +21,7 @@ export class LinkDialog extends Link {
         super.setup();
         onMounted(() => {
             this.$el.find('[name="link_style_color"]').on('change', this._onTypeChange.bind(this));
+            this.$el.find('input[name="label"]').on('input', this._adaptPreview.bind(this));
             const el = this.props.focusField === 'url' ? this.inputUrlRef.el : this.inputTextRef.el;
             el.focus();
         });

addons/web_editor/static/tests/html_field_tests.js

@@ -896,4 +896,49 @@ QUnit.module("WebEditor.HtmlField", ({ beforeEach }) => {
             "The video should be embedded as an iframe"
         );
     });
+
+    QUnit.module("Link");
+
+    QUnit.test("link preview in Link Dialog", async (assert) => {
+        assert.expect(4);
+
+        serverData.models.partner.records.push({
+            id: 1,
+            txt: "<p class='test_target'><a href='/test'>This website</a></p>",
+        });
+        await makeView({
+            type: "form",
+            resId: 1,
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="txt" widget="html"/>
+                </form>`,
+        });
+
+        const p = document.querySelector(".test_target");
+        // Select link label to open the floating toolbar.
+        setSelection(p, 0, p, 1);
+        await nextTick();
+        // Click on create-link button to open the Link Dialog.
+        document.querySelector("#toolbar #create-link").click();
+        await nextTick();
+
+        const labelInputField = document.querySelector(".modal input#o_link_dialog_label_input");
+        const linkPreview = document.querySelector(".modal a#link-preview");
+        assert.strictEqual(labelInputField.value, 'This website',
+            "The label input field should match the link's content");
+        assert.strictEqual(linkPreview.innerText, 'This website',
+            "Link label in preview should match label input field");
+
+        // Edit link label.
+        await editInput(labelInputField, null, "New label");
+        assert.strictEqual(linkPreview.innerText, "New label",
+            "Preview should be updated on label input field change");
+        // Click "Save".
+        await click(document, ".modal .modal-footer button.btn-primary");
+        assert.strictEqual(p.innerText.replaceAll('\u200B', ''), 'New label',
+            "The link's label should be updated");
+    });
 });