From dd064ab9aa578dba83a6eeb31e012487c4d35eaf Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Tue, 3 Jan 2023 15:50:23 +0000
Subject: [PATCH] [FIX] web_editor: force custom style in ui on non-custom link
 with style

This reverts commit [1] so as to avoid updating the DOM in two separate
places of the code for link edition. Said commit intended to prevent the
removal of custom styles on a button on which styles were applied
(erroneously) without applying a custom button class. This fixes that
issue by adapting the UI to show the button is custom if there are
custom styles applied. This way, if any change is applied, when
modifying the DOM, the custom class will be applied as well. This is the
order in which such corrections are usually applied with the snippets
bar.

[1]: https://github.com/odoo/odoo/commit/eb4edac560227b46efdcfe958e3b93e0b88def64

closes odoo/odoo#112152

X-original-commit: 1b65244a1ae7ed37d7bc1faef2225ed982c94320
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/wysiwyg/widgets/link.js     |  7 ++++++
 .../src/js/wysiwyg/widgets/link_tools.js      | 22 +++++++++----------
 2 files changed, 18 insertions(+), 11 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 75b305c4b04..87381b57e09 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
@@ -208,6 +208,13 @@ const Link = Widget.extend({
             this.$link.css('border-width', data.customBorderWidth);
             this.$link.css('border-style', data.customBorderStyle);
             this.$link.css('border-color', data.customBorder);
+        } else {
+            this.$link.css('color', '');
+            this.$link.css('background-color', '');
+            this.$link.css('background-image', '');
+            this.$link.css('border-width', '');
+            this.$link.css('border-style', '');
+            this.$link.css('border-color', '');
         }
         const attrs = Object.assign({}, this.data.oldAttributes, {
             href: data.url,
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 99160708d92..0c421861a27 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
@@ -44,9 +44,18 @@ const LinkTools = Link.extend({
     /**
      * @override
      */
-    start: function () {
+    start: async function () {
         this._addHintClasses();
-        return this._super(...arguments);
+        const ret = await this._super(...arguments);
+        const link = this.$link[0];
+        const customStyleProps = ['color', 'background-color', 'background-image', 'border-width', 'border-style', 'border-color'];
+        if (customStyleProps.some(s => link.style[s])) {
+            // Force custom style if style exists on the link.
+            const customOption = this.el.querySelector('[name="link_style_color"] we-button[data-value="custom"]');
+            this._setSelectOption($(customOption), true);
+            await this._updateOptionsUI();
+        }
+        return ret;
     },
     destroy: function () {
         if (!this.el) {
@@ -381,15 +390,6 @@ const LinkTools = Link.extend({
         if ($target.closest('[name="link_border_style"]').length) {
             return;
         }
-        if ($target.closest('[name="link_style_color"]')) {
-            // Reset custom styles when changing link style.
-            this.$link.css('color', '');
-            this.$link.css('background-color', '');
-            this.$link.css('background-image', '');
-            this.$link.css('border-width', '');
-            this.$link.css('border-style', '');
-            this.$link.css('border-color', '');
-        }
         const $select = $target.closest('we-select');
         $select.find('we-selection-items we-button').toggleClass('active', false);
         this._setSelectOption($target, true);