[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>
This commit is contained in:
Antoine Guenet
2022-01-24 15:09:27 +00:00
committed by David Monjoie
parent fd0c0976c2
commit c82c38b178
2 changed files with 26 additions and 3 deletions
@@ -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,
@@ -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(), {