From 22246567bec45a28062487b784c5d512ec7cf2e7 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Mon, 24 Apr 2023 14:12:22 +0000
Subject: [PATCH] [FIX] web_editor: fix .img-fluid for Outlook

Outlook needs explicit dimensions for images, which .img-fluid - by
design - doesn't provide. This puts them in mso conditionals with said
dimensions for Outlook.

X-original-commit: d0949de8ce895b7da5fd128fb5d72d23d5634866
Part-of: odoo/odoo#124465
---
 .../web_editor/static/src/js/backend/convert_inline.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

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 82c1d477c70..e7ce9a41ee3 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -696,6 +696,16 @@ async function toInline($editable, cssRules, $iframe) {
     for (const imgTop of editable.querySelectorAll('.card-img-top')) {
         imgTop.style.setProperty('height', _getHeight(imgTop) + 'px');
     }
+    // Fix img-fluid for Outlook.
+    for (const image of editable.querySelectorAll('img.img-fluid')) {
+        const width = _getWidth(image);
+        const clone = image.cloneNode();
+        clone.setAttribute('width', width);
+        clone.style.setProperty('width', width + 'px');
+        clone.style.removeProperty('max-width');
+        image.before(_createMso(clone.outerHTML));
+        _hideForOutlook(image);
+    }
 
     attachmentThumbnailToLinkImg($editable);
     fontToImg($editable);