From 7a0e58f8d7237514d23d815cdf3d81fc79edb1ec Mon Sep 17 00:00:00 2001
From: Nicolas Bayet <nby@odoo.com>
Date: Mon, 22 Nov 2021 11:24:21 +0000
Subject: [PATCH] [FIX] web_editor: prevent setting modified link label

When editing the link label from a website page, and then changing its
url from the link tools, the label was reset to what it was before the
edition. This commit fixes it by keeping the label consistent when
changing the link options from the link tools.

task-2680461

X-original-commit: 5f5b9dfa1bdfb6c814e68e355503a8820bb8b452
Part-of: odoo/odoo#80763
---
 .../static/src/js/wysiwyg/widgets/link.js     |  4 +++-
 .../src/js/wysiwyg/widgets/link_tools.js      | 19 ++++++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
index 08bb9e31617..1432850ff7c 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
@@ -31,6 +31,8 @@ const Link = Widget.extend({
             title: _t("Link to"),
         }, this.options));
 
+        this._setLinkContent = true;
+
         this.data = data || {};
         this.isButton = this.data.isButton;
         this.$button = $button;
@@ -201,7 +203,7 @@ const Link = Widget.extend({
         if (!this.$link.attr('target')) {
             this.$link[0].removeAttribute('target');
         }
-        if (data.content !== this.data.originalText || data.url !== this.data.url) {
+        if (this._setLinkContent && (data.content !== this.data.originalText || data.url !== this.data.url)) {
             const content = (data.content && data.content.length) ? data.content : data.url;
             // If there is a this.data.originalText, it means that we selected
             // the text and we could not change the content through the text
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 185c8d2e75f..0dd67dcebd9 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
@@ -4,7 +4,6 @@ odoo.define('wysiwyg.widgets.LinkTools', function (require) {
 const Link = require('wysiwyg.widgets.Link');
 const {ColorPaletteWidget} = require('web_editor.ColorPalette');
 const {ColorpickerWidget} = require('web.Colorpicker');
-const OdooEditorLib = require('@web_editor/../lib/odoo-editor/src/OdooEditor');
 const dom = require('web.dom');
 const {
     computeColorClasses,
@@ -14,8 +13,6 @@ const {
     isColorGradient,
 } = require('web_editor.utils');
 
-const setSelection = OdooEditorLib.setSelection;
-
 /**
  * Allows to customize link content and style.
  */
@@ -37,8 +34,13 @@ const LinkTools = Link.extend({
             $(node).wrap('<a href="#"/>');
             node = node.parentElement;
         }
-        const link = node || this.getOrCreateLink(editable);
-        this._super(parent, options, editable, data, $button, link);
+        this._link = node || this.getOrCreateLink(editable);
+        this._observer = new MutationObserver(() =>{
+            this._setLinkContent = false;
+            this._observer.disconnect();
+        });
+        this._observer.observe(this._link, {subtree: true, childList: true, characterData: true});
+        this._super(parent, options, editable, data, $button, this._link);
         // Keep track of each selected custom color and colorpicker.
         this.customColors = {};
         this.colorpickers = {};
@@ -70,9 +72,16 @@ const LinkTools = Link.extend({
         this.options.wysiwyg.odooEditor.observerActive();
         this.applyLinkToDom(this._getData());
         this.options.wysiwyg.odooEditor.historyStep();
+        this._observer.disconnect();
         this._super(...arguments);
     },
 
+    applyLinkToDom() {
+        this._observer.disconnect();
+        this._super(...arguments);
+        this._observer.observe(this._link, {subtree: true, childList: true, characterData: true});
+    },
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------