[FIX] web_editor: filter inline styles when changing media type

Since [1] and even after [2] when replacing a media by a media of a
different type only classes were cleaned - but all inline styles were
copied.

This commit filters the inline styles when replacing a media by a media
of another type.

Steps to reproduce:
- Drop a "Text - Image".
- Replace the image by an icon.
- Apply solid colors for the foreground and the background.
- Replace the icon by an image.
=> The applied colors were kept in the inline style of the image.

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

task-2687506

closes odoo/odoo#95853

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/src/components/media_dialog/document_selector.js

@@ -69,6 +69,7 @@ export class DocumentSelector extends FileSelector {
     }
 }
 DocumentSelector.mediaSpecificClasses = ['o_image'];
+DocumentSelector.mediaSpecificStyles = [];
 DocumentSelector.mediaExtraClasses = [];
 DocumentSelector.tagNames = ['A'];
 DocumentSelector.attachmentsListTemplate = 'web_editor.DocumentsListTemplate';

addons/web_editor/static/src/components/media_dialog/icon_selector.js

@@ -63,6 +63,7 @@ export class IconSelector extends Component {
     }
 }
 IconSelector.mediaSpecificClasses = ['fa'];
+IconSelector.mediaSpecificStyles = ['color', 'background-color'];
 IconSelector.mediaExtraClasses = [
     'rounded-circle', 'rounded', 'img-thumbnail', 'shadow',
     /^text-\S+$/, /^bg-\S+$/, /^fa-\S+$/,

addons/web_editor/static/src/components/media_dialog/image_selector.js

@@ -291,6 +291,7 @@ export class ImageSelector extends FileSelector {
 }
 
 ImageSelector.mediaSpecificClasses = ['img', 'img-fluid', 'o_we_custom_image'];
+ImageSelector.mediaSpecificStyles = [];
 ImageSelector.mediaExtraClasses = [
     'rounded-circle', 'rounded', 'img-thumbnail', 'shadow',
     'w-25', 'w-50', 'w-75', 'w-100',

addons/web_editor/static/src/components/media_dialog/media_dialog.js

@@ -159,6 +159,9 @@ export class MediaDialog extends Component {
                     }
                 }
                 for (const otherTab of Object.keys(TABS).filter(key => key !== this.state.activeTab)) {
+                    for (const property of TABS[otherTab].Component.mediaSpecificStyles) {
+                        element.style.removeProperty(property);
+                    }
                     element.classList.remove(...TABS[otherTab].Component.mediaSpecificClasses);
                     const extraClassesToRemove = [];
                     for (const name of TABS[otherTab].Component.mediaExtraClasses) {

addons/web_editor/static/src/components/media_dialog/video_selector.js

@@ -200,6 +200,7 @@ export class VideoSelector extends Component {
     }
 }
 VideoSelector.mediaSpecificClasses = ['media_iframe_video'];
+VideoSelector.mediaSpecificStyles = [];
 VideoSelector.mediaExtraClasses = [];
 VideoSelector.tagNames = ['IFRAME', 'DIV'];
 VideoSelector.template = 'web_editor.VideoSelector';