[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:
committed by
David Monjoie
parent
fd0c0976c2
commit
c82c38b178
@@ -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(), {
|
||||
|
||||
Reference in New Issue
Block a user