From 9ca349bbdb75505e8dbd31898f05ba8d694e7953 Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Tue, 5 Jul 2022 13:17:52 +0000
Subject: [PATCH] [FIX] web_editor: restore media dialog cleanup of each media
 type

Since [1] when the media dialog was refactored to owl, some of the
classes clean up when switching across media types were lost.

This commit restores the clean up for each media type - as they were
before [1].

Steps to reproduce:
(Just one example - there are many scenarios)
- Drop a "Text - Image" block.
- Apply a rounded circle on the image.
- Replace the image by a video.
=> The rounded circle effect remains but cannot be removed.

[1]: https://github.com/odoo/odoo/commit/7fd0698cf765a79959566b51e33cb76bff83d344

task-2829971

Part-of: odoo/odoo#95287
---
 .../components/media_dialog/document_selector.js    |  1 +
 .../src/components/media_dialog/icon_selector.js    |  6 +++++-
 .../src/components/media_dialog/image_selector.js   |  3 +++
 .../src/components/media_dialog/media_dialog.js     | 13 +++++++++++++
 .../src/components/media_dialog/video_selector.js   |  1 +
 5 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/components/media_dialog/document_selector.js b/addons/web_editor/static/src/components/media_dialog/document_selector.js
index 73d241fc143..0c2272cbbf4 100644
--- a/addons/web_editor/static/src/components/media_dialog/document_selector.js
+++ b/addons/web_editor/static/src/components/media_dialog/document_selector.js
@@ -66,6 +66,7 @@ export class DocumentSelector extends FileSelector {
     }
 }
 DocumentSelector.mediaSpecificClasses = ['o_image'];
+DocumentSelector.mediaExtraClasses = [];
 DocumentSelector.tagNames = ['A'];
 DocumentSelector.attachmentsListTemplate = 'web_editor.DocumentsListTemplate';
 DocumentSelector.components = {
diff --git a/addons/web_editor/static/src/components/media_dialog/icon_selector.js b/addons/web_editor/static/src/components/media_dialog/icon_selector.js
index 70cea8bb396..b4e130dd57a 100644
--- a/addons/web_editor/static/src/components/media_dialog/icon_selector.js
+++ b/addons/web_editor/static/src/components/media_dialog/icon_selector.js
@@ -62,7 +62,11 @@ export class IconSelector extends Component {
         return allFonts;
     }
 }
-IconSelector.mediaSpecificClasses = [];
+IconSelector.mediaSpecificClasses = ['fa'];
+IconSelector.mediaExtraClasses = [
+    'rounded-circle', 'rounded', 'thumbnail', 'shadow',
+    /^text-\S+$/, /^bg-\S+$/, /^fa-\S+$/,
+];
 IconSelector.tagNames = ['SPAN', 'I'];
 IconSelector.template = 'web_editor.IconSelector';
 IconSelector.components = {
diff --git a/addons/web_editor/static/src/components/media_dialog/image_selector.js b/addons/web_editor/static/src/components/media_dialog/image_selector.js
index 475adc9b75c..65b18bd08f7 100644
--- a/addons/web_editor/static/src/components/media_dialog/image_selector.js
+++ b/addons/web_editor/static/src/components/media_dialog/image_selector.js
@@ -253,6 +253,9 @@ export class ImageSelector extends FileSelector {
     }
 }
 ImageSelector.mediaSpecificClasses = ['img', 'img-fluid', 'o_we_custom_image'];
+ImageSelector.mediaExtraClasses = [
+    'rounded-circle', 'rounded', 'thumbnail', 'shadow', /^img-\S+$/,
+];
 ImageSelector.tagNames = ['IMG'];
 ImageSelector.attachmentsListTemplate = 'web_editor.ImagesListTemplate';
 ImageSelector.components = {
diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.js b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
index 29b6293ab30..ec9a4c4ff12 100644
--- a/addons/web_editor/static/src/components/media_dialog/media_dialog.js
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
@@ -160,6 +160,19 @@ export class MediaDialog extends Component {
                 }
                 for (const otherTab of Object.keys(TABS).filter(key => key !== this.state.activeTab)) {
                     element.classList.remove(...TABS[otherTab].Component.mediaSpecificClasses);
+                    const extraClassesToRemove = [];
+                    for (const name of TABS[otherTab].Component.mediaExtraClasses) {
+                        if (typeof(name) === 'string') {
+                            extraClassesToRemove.push(name);
+                        } else { // Regex
+                            for (const className of element.classList) {
+                                if (className.match(name)) {
+                                    extraClassesToRemove.push(className);
+                                }
+                            }
+                        }
+                    }
+                    element.classList.remove(...extraClassesToRemove);
                 }
                 element.classList.remove(...this.initialIconClasses);
                 element.classList.remove('o_modified_image_to_save');
diff --git a/addons/web_editor/static/src/components/media_dialog/video_selector.js b/addons/web_editor/static/src/components/media_dialog/video_selector.js
index a8a31345cb9..d07180fa89c 100644
--- a/addons/web_editor/static/src/components/media_dialog/video_selector.js
+++ b/addons/web_editor/static/src/components/media_dialog/video_selector.js
@@ -193,6 +193,7 @@ export class VideoSelector extends Component {
     }
 }
 VideoSelector.mediaSpecificClasses = ['media_iframe_video'];
+VideoSelector.mediaExtraClasses = [];
 VideoSelector.tagNames = ['IFRAME', 'DIV'];
 VideoSelector.template = 'web_editor.VideoSelector';
 VideoSelector.components = {