From c82c38b17824d68cb54ff2d6fd282866c3a33a85 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Thu, 20 Jan 2022 15:47:11 +0000
Subject: [PATCH] [FIX] web_editor, mass_mailing: fix 0 dimensions of img when
 not visible

The conversion process of emails for mail clients involves retrieving
the dimensions of images and icons in order set them as element
attributes. This can however not possibly work if they are invisible at
the time of conversion. This therefore makes sure they are visible by
changing the visibility of whichever parent was invisible before
conversion and restoring it when we're done.

opw-2686316
opw-2735636

closes odoo/odoo#83233

Related: odoo/enterprise#23695
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
---
 .../static/src/js/mass_mailing_widget.js      |  2 +-
 .../static/src/js/backend/convert_inline.js   | 27 +++++++++++++++++--
 2 files changed, 26 insertions(+), 3 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 789f15a8fda..37dc21a1351 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_widget.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_widget.js
@@ -72,7 +72,7 @@ var MassMailingFieldHtml = FieldHtml.extend({
             self._isDirty = self.wysiwyg.isDirty();
             self._doAction();
 
-            convertInline.toInline($editable, self.cssRules);
+            convertInline.toInline($editable, self.cssRules, self.wysiwyg.$iframe);
 
             self.trigger_up('field_changed', {
                 dataPointID: self.dataPointID,
diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js
index 5c2d0f36215..6ce7e909c15 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -347,8 +347,9 @@ function classToStyle($editable, cssRules) {
  * @param {Object[]} [cssRules] Array<{selector: string;
  *                                   style: {[styleName]: string};
  *                                   specificity: number;}>
+ * @param {JQuery} [$iframe] the iframe containing the editable, if any
  */
-function toInline($editable, cssRules) {
+function toInline($editable, cssRules, $iframe) {
     const doc = $editable[0].ownerDocument;
     cssRules = cssRules || doc._rulesCache;
     if (!cssRules) {
@@ -356,6 +357,24 @@ function toInline($editable, cssRules) {
         doc._rulesCache = cssRules;
     }
 
+    // If the editable is not visible, we need to make it visible in order to
+    // retrieve image/icon dimensions. This iterates over ancestors to make them
+    // visible again. We then restore it at the end of this function.
+    const displaysToRestore = [];
+    if (!$editable.is(':visible')) {
+        let $ancestor = $editable;
+        while ($ancestor[0] && !$ancestor.is('html') && !$ancestor.is(':visible')) {
+            if ($ancestor.css('display') === 'none') {
+                displaysToRestore.push([$ancestor, $ancestor[0].style.display]);
+                $ancestor.css('display', 'block');
+            }
+            $ancestor = $ancestor.parent();
+            if ((!$ancestor[0] || $ancestor.is('html')) && $iframe && $iframe[0]) {
+                $ancestor = $iframe;
+            }
+        }
+    }
+
     // Fix outlook image rendering bug (this change will be kept in both
     // fields).
     _.each(['width', 'height'], function (attribute) {
@@ -376,6 +395,10 @@ function toInline($editable, cssRules) {
     formatTables($editable);
     normalizeColors($editable);
     normalizeRem($editable);
+
+    for (const displayToRestore of displaysToRestore) {
+        $(displayToRestore[0]).css('display', displayToRestore[1]);
+    }
 }
 /**
  * Convert font icons to images.
@@ -1041,7 +1064,7 @@ FieldHtml.include({
         $odooEditor.removeClass('odoo-editor');
         $editable.html(html);
 
-        toInline($editable, this.cssRules);
+        toInline($editable, this.cssRules, this.wysiwyg.$iframe);
         $odooEditor.addClass('odoo-editor');
 
         this.wysiwyg.setValue($editable.html(), {