[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
This commit is contained in:
Nicolas Bayet
2021-12-02 15:16:34 +00:00
committed by Younn Olivier
parent 2a70b21af3
commit 7a0e58f8d7
2 changed files with 17 additions and 6 deletions
@@ -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
@@ -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
//--------------------------------------------------------------------------