From 196cf4a7ce021b0cef22e3dd3eff6b934ba07ddf Mon Sep 17 00:00:00 2001
From: Rodolpho Lima <rcdl@odoo.com>
Date: Wed, 26 Apr 2023 15:43:40 +0200
Subject: [PATCH] [FIX] web_editor: update UI on link content change

When changing a link's content, its URL (href attribute) might change
(if the new label is a valid URL), due to a mechanism in OdooEditor.

Before this commit, when a change in the link's content leads to a href
change:
- if the LinkTools is opened, the URL input field would become outdated
and display an incorrect URL.
- likewise, if the popover is shown, its content and position would be
outdated (possibly covering the link's new content).

This commit makes sure both the LinkTools URL input field and the
popover stay up-to-date if a link's content or href changes.

task-3284649

X-original-commit: 1b0952f3635f5677ba3ab221a28ceb26920a1862
Part-of: odoo/odoo#136278
---
 .../js/wysiwyg/widgets/link_popover_widget.js | 19 ++++++++++++
 .../src/js/wysiwyg/widgets/link_tools.js      | 31 ++++++++++++++-----
 2 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js
index b9371126d08..1002420997a 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js
@@ -183,6 +183,24 @@ export class LinkPopoverWidget {
         if (document !== this.wysiwyg.odooEditor.document) {
             $(this.wysiwyg.odooEditor.document).on('mouseup.link_popover', onClickDocument);
         }
+
+        // Update popover's content and position upon changes
+        // on the link's label or href.
+        this._observer = new MutationObserver(records => {
+            if (!popoverShown) {
+                return;
+            }
+            if (records.some(record => record.type === 'attributes')) {
+                this._loadAsyncLinkPreview();
+            }
+            this.$target.popover('update');
+        });
+        this._observer.observe(this.target, {
+            subtree: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: ['href'],
+        });
     }
     /**
      *
@@ -196,6 +214,7 @@ export class LinkPopoverWidget {
         $(document).off('.link_popover');
         $(this.wysiwyg.odooEditor.document).off('.link_popover');
         this.$target.popover('dispose');
+        this._observer.disconnect();
     }
 
     /**
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
index 9e4a427f130..0b1d5ae0263 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
@@ -5,6 +5,8 @@ import { ColorPalette } from '@web_editor/js/wysiwyg/widgets/color_palette';
 import weUtils from "@web_editor/js/common/utils";
 import {
     onWillUpdateProps,
+    onMounted,
+    onWillUnmount,
     useState,
 } from "@odoo/owl";
 import { normalizeCSSColor } from '@web/core/utils/colors';
@@ -54,16 +56,32 @@ export class LinkTools extends Link {
             this._setSelectOptionFromLink();
             this._updateOptionsUI();
         });
+        onMounted(() => {
+            this._observer = new MutationObserver(records => {
+                if (records.some(record => record.type === 'attributes')) {
+                    this.state.url = this.props.link.getAttribute('href') || '';
+                    this._setUrl();
+                }
+                this._updateLabelInput();
+            });
+            this._observerOptions = {
+                subtree: true,
+                childList: true,
+                characterData: true,
+                attributes: true,
+                attributeFilter: ['href'],
+            };
+            this._observer.observe(this.props.link, this._observerOptions);
+        });
+        onWillUnmount(() => {
+            this._observer.disconnect();
+        });
     }
     /**
      * @override
      */
     async _updateState() {
         await super._updateState(...arguments);
-        this._observer = new MutationObserver(async () => {
-            this._updateLabelInput();
-        });
-        this._observer.observe(this.props.link, {subtree: true, childList: true, characterData: true});
         // Keep track of each selected custom color and colorpicker.
         this.customColors = {};
         this.PREFIXES = {
@@ -102,7 +120,6 @@ export class LinkTools extends Link {
         if (shouldUnlink(this.$link[0], this.colorCombinationClass)) {
             $contents.unwrap();
         }
-        this._observer.disconnect();
         super.destroy(...arguments);
         this.props.onDestroy();
     }
@@ -112,7 +129,7 @@ export class LinkTools extends Link {
         super.applyLinkToDom(...arguments);
         this.props.wysiwyg.odooEditor.historyStep();
         this.props.onPostApplyLink();
-        this._observer.observe(this.props.link, {subtree: true, childList: true, characterData: true});
+        this._observer.observe(this.props.link, this._observerOptions);
     }
 
     //--------------------------------------------------------------------------
@@ -489,7 +506,7 @@ export class LinkTools extends Link {
         // Force update of link's content with new data using 'force: true'.
         // Without this, no update if input is same as original text.
         this._updateLinkContent(this.$link, data, {force: true});
-        this._observer.observe(this.props.link, {subtree: true, childList: true, characterData: true});
+        this._observer.observe(this.props.link, this._observerOptions);
     }
     /* If content is equal to previous URL, update it to match current URL.
      *