[REF] web_editor, mass_mailing: new iframe mechanism

Since we reverted the saas-12.2 editor in favor of the 12.0 one,
we faced a dilemna regarding how the editor iframe is handled in
mass_mailing.

The 12.0 version was using a special controller to get the website
assets required for mass_mailing while the saas-12.2 version used
a completely different mechanism that was, obviously, not handled
by the 12.0 version.

We did not want to reintroduce the old controllers who were
considered to be a hack to load the assets in the mass_mailing
iframe. However, we were very cautious about changing the editor
itself to avoid introducing new bugs in the editor core of 13.0.

The approach we chose at the end, is to use the loadAsset mechanism
introduced in saas-12.2 to load the necessary assets and inject them
in the mass_mailing iframe. This did not reintroduce the controllers
nor did it require to change the code of the editor itself. However,
it required moderate changes to the wysiwyg interface.

Part of PR 35677.

Co-authored-by: Nicolas Bayet <nby@odoo.com>
Co-authored-by: Antoine Guenet <age@odoo.com>
Co-authored-by: Christophe Matthieu <chm@odoo.com>
Co-authored-by: David Monjoie <dmo@odoo.com>

3 files changed, 25 insertions, 36 deletions

diff --git a/addons/mass_mailing/static/src/js/mass_mailing_widget.js b/addons/mass_mailing/static/src/js/mass_mailing_widget.js
index 812aec0e909..a9705c7f1a1 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_widget.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_widget.js
@@ -93,35 +93,6 @@ var MassMailingFieldHtml = FieldHtml.extend({
     //--------------------------------------------------------------------------
 
     /**
-     * Add generateOptions options to change wysiwyg configuration:
-     * - Remove table menu in toolbar
-     * - Remove table popover
-     * - Add rules for isEditableNode, the TD must content a not TABLE node as
-     *   children to be editable.
-     *
-     * @override
-     */
-    _getWysiwygOptions: function () {
-        var options = this._super();
-        options.generateOptions = function (options) {
-            options.toolbar = _.filter(options.toolbar, function (item) {
-                return item[0] !== 'table';
-            });
-            delete options.popover.table;
-
-            var isEditableNode = options.isEditableNode;
-            options.isEditableNode = function (node) {
-                if (node.tagName === "TD" && !$(node).children('*:not(table):first').length) {
-                    return false;
-                }
-                return isEditableNode.call(this, node);
-            };
-
-            return options;
-        };
-        return options;
-    },
-    /**
      * Returns true if must force the user to choose a theme.
      *
      * @private
@@ -293,12 +264,12 @@ var MassMailingFieldHtml = FieldHtml.extend({
         } else if ($old_layout.length) {
             $contents = ($old_layout.hasClass('oe_structure') ? $old_layout : $old_layout.find('.oe_structure').first()).contents();
         } else {
-            $contents = this.$content.find('.note-editable').contents();
+            $contents = this.$content.find('.o_editable').contents();
         }
 
         $newWrapperContent.append($contents);
         this._switchImages(themeParams, $newWrapperContent);
-        this.$content.find('.note-editable').empty().append($newLayout);
+        this.$content.find('.o_editable').empty().append($newLayout);
         $old_layout.remove();
 
         if (firstChoice) {
@@ -326,6 +297,9 @@ var MassMailingFieldHtml = FieldHtml.extend({
         if (this._isFromInline) {
             this._fromInline();
         }
+        if (this.snippetsLoaded) {
+            this._onSnippetsLoaded(this.snippetsLoaded);
+        }
         this._super();
     },
     /**
@@ -334,6 +308,10 @@ var MassMailingFieldHtml = FieldHtml.extend({
      */
     _onSnippetsLoaded: function (ev) {
         var self = this;
+        if (!this.$content) {
+            this.snippetsLoaded = ev;
+            return;
+        }
         var $snippetsSideBar = ev.data;
         var $themes = $snippetsSideBar.find("#email_designer_themes").children();
         var $snippets = $snippetsSideBar.find(".oe_snippet");
@@ -341,7 +319,6 @@ var MassMailingFieldHtml = FieldHtml.extend({
 
         if (config.device.isMobile) {
             $snippetsSideBar.hide();
-            console.log(this.$content[0]);
             this.$content.attr('style', 'padding-left: 0px !important');
         }
 
diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
index 297b241070c..7aec2b165e9 100644
--- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
+++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
@@ -35,17 +35,23 @@
 
     .dropdown-menu {
         position: absolute;
-        bottom: -1px;
+        bottom: -2px;
         top: -3px !important;
         left: -5px !important;
-        right: 3px !important;
+        right: -2px !important;
         margin: 0;
         border-radius: 0;
         overflow: auto;
         background-color: $o-wysiwyg-bg-color;
         z-index: 1050;
 
-        .dropdown-item { 
+        &.show {
+            bottom: 31px !important;
+            top: -2px !important;
+            right: 3px !important;
+        }
+
+        .dropdown-item {
             padding: 10px 10px;
             &:first-child {
                 display: none;
@@ -182,6 +188,13 @@ body.o_force_mail_theme_choice {
     overflow: initial;
 }
 
+#web_editor-toolbars .popover .note-color {
+    .note-back-color-preview .dropdown-toggle,
+    .note-fore-color-preview .dropdown-toggle {
+        height: $o-wysiwyg-toolbar-height - 1;
+    }
+}
+
 .oe_structure {
     width: 100%;
 }
diff --git a/addons/mass_mailing/static/src/scss/themes/theme_default.scss b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
index 4d49a7ef22c..13bc9d56894 100644
--- a/addons/mass_mailing/static/src/scss/themes/theme_default.scss
+++ b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
@@ -56,7 +56,6 @@ td:not([align]) {
 
     > .o_mail_wrapper {
         width: 100%;
-        margin: 24px 0;
         border-collapse: separate; // Allow the first and last td to have the
                                    // same width