[FIX] web_editor,website_mass_mailing: display the popup preview

closes odoo/odoo#63343

X-original-commit: a0470eed4e57f2df19d4306ab4e894b986971eef
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>

addons/web/static/src/js/views/form/form_controller.js

@@ -143,7 +143,7 @@ var FormController = BasicController.extend({
     renderButtons: function ($node) {
         var $footer = this.footerToButtons
             ? this.renderer.$el && this.renderer.$('footer').filter(function () {
-                return !this.closest('.oe_form_field');
+                return !this.closest('.o_field_widget');
             })
             : null;
         var mustRenderFooterButtons = $footer && $footer.length;
@@ -285,7 +285,7 @@ var FormController = BasicController.extend({
         }
         if (this.footerToButtons) {
             var $footer = this.renderer.$el && this.renderer.$('footer').filter(function () {
-                return !this.closest('.oe_form_field');
+                return !this.closest('.o_field_widget');
             });
             if ($footer && $footer.length) {
                 this.$buttons.empty().append($footer);

addons/web/static/tests/views/form_tests.js

@@ -6,7 +6,7 @@ var BasicModel = require('web.BasicModel');
 var concurrency = require('web.concurrency');
 var core = require('web.core');
 var fieldRegistry = require('web.field_registry');
-var basicFields = require('web.basic_fields');
+const basicFields = require('web.basic_fields');
 const fieldRegistryOwl = require('web.field_registry_owl');
 var FormView = require('web.FormView');
 var mixins = require('web.mixins');
@@ -2260,7 +2260,7 @@ QUnit.module('Views', {
 
         var MyWidget = basicFields.FieldChar.extend({
             _renderEdit: function () {
-                var $el = $(`<div class="oe_form_field">Coucou<footer>this should not be moved</footer></div>`);
+                var $el = $(`<div class="o_field_widget">Coucou<footer>this should not be moved</footer></div>`);
                 this.$el.replaceWith($el);
                 this.$el = $el;
 

addons/web_editor/static/src/js/backend/field_html.js

@@ -23,8 +23,9 @@ var jinjaRegex = /(^|\n)\s*%\s(end|set\s)/;
  * nodeOptions:
  *  - style-inline => convert class to inline style (no re-edition) => for sending by email
  *  - no-attachment
- *  - cssEdit
- *  - cssReadonly
+ *  - cssEdit => in edition mode use specific css into a shadow dom
+ *  - cssEditIframe => in edition mode use specific css into an iframe
+ *  - cssReadonly => in readonly mode use specific css into a shadow dom
  *  - snippets
  *  - wrapper
  */
@@ -55,9 +56,11 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
         if (this.nodeOptions.cssReadonly) {
             this.cssReadonly = await ajax.loadAsset(this.nodeOptions.cssReadonly);
         }
-        if (this.nodeOptions.cssEdit || this.nodeOptions['style-inline']) {
+        const cssEdit = this.nodeOptions.cssEdit || this.nodeOptions.cssEditIframe;
+        if (cssEdit || this.nodeOptions['style-inline']) {
             this.needShadow = true;
-            this.cssEdit = await ajax.loadAsset(this.nodeOptions.cssEdit || 'web_editor.assets_edit_html_field');
+            this.needIframe = !!this.nodeOptions.cssEditIframe;
+            this.cssEdit = await ajax.loadAsset(cssEdit || 'web_editor.assets_edit_html_field');
         }
     },
     /**
@@ -175,7 +178,9 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
      */
     _getWysiwygOptions: async function () {
         let main = '<t t-zone="main"/>';
-
+        if (this.nodeOptions.wrapper) {
+            main = this._wrap(main);
+        }
         if (this.needShadow) {
             let style = '';
             if (this.cssEdit) {
@@ -188,7 +193,11 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
                     }),
                 ].join('');
             }
-            main = '<t-shadow style="width: 100%;">' + style + '\n' + main + '</t-shadow>';
+            if (this.needIframe) {
+                main = '<t-iframe style="width: 100%;">' + style + '\n' + main + '</t-iframe>';
+            } else {
+                main = '<t-shadow style="width: 100%;">' + style + '\n' + main + '</t-shadow>';
+            }
         }
         const scrollAuto = !this.needShadow;
 
@@ -258,10 +267,6 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
         if (this.attrs.class && this.attrs.class.indexOf("oe_read_only") !== -1) {
             return this._renderReadonly();
         }
-        var value = this._textToHtml(this.value);
-        if (this.nodeOptions.wrapper) {
-            value = this._wrap(value);
-        }
         var fieldNameAttachment = _.chain(this.recordData)
             .pairs()
             .find(function (value) {
@@ -331,17 +336,6 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
         }
         return value;
     },
-    /**
-     * Move HTML contents out of their wrapper.
-     *
-     * @private
-     * @param {string} html content
-     * @returns {string} html content
-     */
-    _unWrap: function (html) {
-        var $wrapper = $(html).find('#wrapper');
-        return $wrapper.length ? $wrapper.html() : html;
-    },
     /**
      * Wrap HTML in order to create a custom display.
      *

addons/website_mass_mailing/static/src/scss/website_mass_mailing_popup.scss

@@ -20,3 +20,13 @@
         opacity: 1;
     }
 }
+
+#website_mass_mailing_edition_wrapper {
+    position: relative;
+    width: 100%;
+    height: 60vh;
+}
+#website_mass_mailing_edition_wrapper .modal {
+    position: absolute;
+    z-index: 0;
+}

addons/website_mass_mailing/static/src/xml/website_mass_mailing.xml

@@ -1,13 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
 <t t-name="website_mass_mailing.edition.wrapper">
-    <div class="modal fade show d-block o_newsletter_modal">
-        <div role="dialog" class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <header class="modal-header">
-                    <button type="button" class="close" aria-label="Close" tabindex="-1">×</button>
-                </header>
-                <div id="wrapper" class="modal-body p-0 oe_structure oe_empty"></div>
+    <div id="website_mass_mailing_edition_wrapper">
+        <div class="modal fade show d-block o_newsletter_modal">
+            <div role="dialog" class="modal-dialog modal-dialog-centered">
+                <div class="modal-content">
+                    <header class="modal-header">
+                        <button type="button" class="close" aria-label="Close" tabindex="-1">×</button>
+                    </header>
+                    <div id="wrapper" class="modal-body p-0 oe_structure oe_empty"></div>
+                </div>
             </div>
         </div>
     </div>

addons/website_mass_mailing/views/website_mass_mailing_views.xml

@@ -13,8 +13,9 @@
                     <field name="popup_content" widget="html" options="{
                             'snippets': 'website.snippets',
                             'cssEdit': 'website_mass_mailing.iframe_css_assets_edit',
+                            'cssReadonly': 'website_mass_mailing.iframe_css_assets_edit',
                             'wrapper': 'website_mass_mailing.edition.wrapper',
-                        }"/>
+                        }" style="height: 60vh;"/>
                 </sheet>
             </form>
         </field>