[FIX] web_editor: fix icons losing classes when modifying them

Previously, when double clicking and image, video, icon, or document in
the web-editor and replacing it with a different media type, it would
lose its custom classes. This means among other things, that it would
lose margins and paddings from bootstrap classes, or in the case of the
three columns snippet, that the new media would not be properly rounded
in its top corner, or not show up at all in the case of the video. The
only exception was when changing any media type to an icon, but in that
case it would also keep some of the media-specific classes that are
supposed to be removed (eg img-fluid or media_iframe_video).

This commit fixes that as well as some _clear behaviour that didn't
remove all classes that had to be removed, eg some fa-classes would
linger depending on their order, and the o_image class from documents
would always remain

Part of: odoo/odoo#60450
Linked to: #60432 #60443
task-2282542

closes odoo/odoo#64230

X-original-commit: 99531f5dd8966fc4ad89d1e9c2886ad701527f3a
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 26 insertions, 16 deletions

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
index 628992206a6..22fb54604b9 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
@@ -251,15 +251,7 @@ var FileWidget = SearchableMediaWidget.extend({
      * @override
      */
     _clear: function () {
-        if (this.$media.is('img')) {
-            return;
-        }
-        var allImgClasses = /(^|\s+)((img(\s|$)|img-(?!circle|rounded|thumbnail))[^\s]*)/g;
-        var allImgClassModifiers = /(^|\s+)(rounded-circle|shadow|rounded|img-thumbnail|mx-auto)([^\s]*)/g;
-        this.media.className = this.media.className && this.media.className
-            .replace('o_we_custom_image', '')
-            .replace(allImgClasses, ' ')
-            .replace(allImgClassModifiers, ' ');
+        this.media.className = this.media.className && this.media.className.replace(/(^|\s+)(o_image)(?=\s|$)/g, ' ');
     },
     /**
      * Returns the domain for attachments used in media dialog.
@@ -955,6 +947,14 @@ var ImageWidget = FileWidget.extend({
         this.libraryMedia = [];
         this._super(...arguments);
     },
+    /**
+     * @override
+     */
+    _clear: function (type) {
+        // Not calling _super: we don't want to call the document widget's _clear method on images
+        var allImgClasses = /(^|\s+)(img|img-\S*|o_we_custom_image|rounded-circle|rounded|thumbnail|shadow)(?=\s|$)/g;
+        this.media.className = this.media.className && this.media.className.replace(allImgClasses, ' ');
+    },
 });
 
 
@@ -1034,9 +1034,11 @@ var IconWidget = SearchableMediaWidget.extend({
             var cls = classes[i];
             if (_.contains(this.alias, cls)) {
                 this.selectedIcon = cls;
+                this.initialIcon = cls;
                 this._highlightSelectedIcon();
             }
         }
+        // Kept for compat in stable, no longer in use: remove in master
         this.nonIconClasses = _.without(classes, 'media_iframe_video', this.selectedIcon);
 
         return this._super.apply(this, arguments);
@@ -1052,7 +1054,6 @@ var IconWidget = SearchableMediaWidget.extend({
     save: function () {
         var style = this.$media.attr('style') || '';
         var iconFont = this._getFont(this.selectedIcon) || {base: 'fa', font: ''};
-        var finalClasses = _.uniq(this.nonIconClasses.concat([iconFont.base, iconFont.font]));
         if (!this.$media.is('span, i')) {
             var $span = $('<span/>');
             $span.data(this.$media.data());
@@ -1060,10 +1061,8 @@ var IconWidget = SearchableMediaWidget.extend({
             this.media = this.$media[0];
             style = style.replace(/\s*width:[^;]+/, '');
         }
-        this.$media.attr({
-            class: _.compact(finalClasses).join(' '),
-            style: style || null,
-        });
+        this.$media.removeClass(this.initialIcon).addClass([iconFont.base, iconFont.font]);
+        this.$media.attr('style', style || null);
         return Promise.resolve(this.media);
     },
     /**
@@ -1101,7 +1100,7 @@ var IconWidget = SearchableMediaWidget.extend({
      * @override
      */
     _clear: function () {
-        var allFaClasses = /(^|\s)(fa(\s|$)|fa-[^\s]*)/g;
+        var allFaClasses = /(^|\s)(fa|(text-|bg-|fa-)\S*|rounded-circle|rounded|thumbnail|shadow)(?=\s|$)/g;
         this.media.className = this.media.className && this.media.className.replace(allFaClasses, ' ');
     },
     /**
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
index c1160ae0e52..0832aa45571 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
@@ -39,6 +39,7 @@ var MediaDialog = Dialog.extend({
     init: function (parent, options, media) {
         var $media = $(media);
         media = $media[0];
+        this.media = media;
 
         options = _.extend({}, options);
         var onlyImages = options.onlyImages || this.multiImages || (media && ($media.parent().data('oeField') === 'image' || $media.parent().data('oeType') === 'image'));
@@ -83,6 +84,7 @@ var MediaDialog = Dialog.extend({
         } else {
             this.activeWidget = [this.imageWidget, this.documentWidget, this.videoWidget, this.iconWidget].find(w => !!w);
         }
+        this.initiallyActiveWidget = this.activeWidget;
     },
     /**
      * Adds the appropriate class to the current modal and appends the media
@@ -161,7 +163,16 @@ var MediaDialog = Dialog.extend({
         var _super = this._super;
         var args = arguments;
         return this.activeWidget.save().then(function (data) {
-            self._clearWidgets();
+            if (self.activeWidget !== self.initiallyActiveWidget) {
+                self._clearWidgets();
+            }
+            // Restore classes if the media was replaced (when changing type)
+            if (self.media !== data) {
+                var oldClasses = self.media && _.toArray(self.media.classList);
+                if (oldClasses) {
+                    data.className = _.union(_.toArray(data.classList), oldClasses).join(' ');
+                }
+            }
             self.final_data = data;
             _super.apply(self, args);
             $(data).trigger('content_changed');