From 849666bb00a6eeb09d23c25e778244e04c001293 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Fri, 7 Oct 2022 09:32:26 +0000
Subject: [PATCH] [FIX] web_editor: fix button size restored when focused

Steps to reproduce the bug :
    - In Website (edit mode), drag & drop a "text-image" snippet.
    - Click on the button.
    - Change the size of the button to "small".
    - Click outside the button.
    - Re-click on the button.
    - The size selected in the options is "medium" and not "small".

Note that the same bug exist in backend with the link dialog.

This bug was introduced in ([1]), the code of the "else" (which was
removed by it) made it possible to take into account the cases where the
option had no "value" (e.g. "medium" size button). And so, without this
"else", the options without "value" were activated in any case.

This previous commit, which fixed an issue with the presence of the
"btn-success" class on a link, could in fact be based on what had
already been done for the links with the "btn-link" class (in [2]).

In this commit, this issue with the "btn-success" class is handled the
same way as for "btn-link".

[1]: https://github.com/odoo/odoo/commit/4c68b3e923610e1d573b4bd2b241b2fc5923c412
[2]: https://github.com/odoo/odoo/commit/c3e08e7a7baab1035c3d5c48d668cc02a232e1ac

task-3002177

closes odoo/odoo#110809

X-original-commit: 5e98953d67042dcffa978ab7d240d8677e847456
Signed-off-by: Outagant Mehdi (mou) <mou@odoo.com>
---
 .../static/src/js/wysiwyg/widgets/link.js     | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 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 54b7028177f..5c881e71d0e 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
@@ -54,6 +54,11 @@ const Link = Widget.extend({
             // all btn-* classes anyway.
         ];
 
+        // The classes in the following array should not be in editable areas
+        // but as there are still some (e.g. in the "newsletter block" snippet)
+        // we make sure the options system works with them.
+        this.toleratedClasses = ['btn-link', 'btn-success'];
+
         this.editable = editable;
         this.$editable = $(editable);
 
@@ -129,8 +134,8 @@ const Link = Widget.extend({
     start: async function () {
         for (const option of this._getLinkOptions()) {
             const $option = $(option);
-            const value = $option.is('input') ? $option.val() : $option.data('value');
-            let active = true;
+            const value = $option.is('input') ? $option.val() : $option.data('value') || option.getAttribute('value');
+            let active = false;
             if (value) {
                 const subValues = value.split(',');
                 let subActive = true;
@@ -139,6 +144,10 @@ const Link = Widget.extend({
                     subActive = subActive && classPrefix.test(this.data.iniClassName);
                 }
                 active = subActive;
+            } else {
+                active = !this.data.iniClassName
+                         || this.toleratedClasses.some(val => this.data.iniClassName.split(' ').includes(val))
+                         || !this.data.iniClassName.includes('btn-');
             }
             this._setSelectOption($option, active);
         }
@@ -182,8 +191,15 @@ const Link = Widget.extend({
     applyLinkToDom: function (data) {
         // Some mass mailing template use <a class="btn btn-link"> instead of just a simple <a>.
         // And we need to keep the classes because the a.btn.btn-link have some special css rules.
-        if (!data.classes.includes('btn') && this.data.iniClassName.includes("btn-link")) {
-            data.classes += " btn btn-link";
+        // Same thing for the "btn-success" class, this class cannot be added
+        // by the options but we still have to ensure that it is not removed if
+        // it exists in a template (e.g. "Newsletter Block" snippet).
+        if (!data.classes.split(' ').includes('btn')) {
+            for (const linkClass of this.toleratedClasses) {
+                if (this.data.iniClassName && this.data.iniClassName.split(' ').includes(linkClass)) {
+                    data.classes += " btn " + linkClass;
+                }
+            }
         }
         if (['btn-custom', 'btn-outline-custom', 'btn-fill-custom'].some(className =>
             data.classes.includes(className)