[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.

This is a backport of commit [1] from 16.0.

[1]: https://github.com/odoo/odoo/commit/dba3259adedb12a81591bd2aff19ce676a1c698c

Part-of: odoo/odoo#125146

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

@@ -503,6 +503,19 @@ function toInline($editable, cssRules, $iframe) {
     const rootFontSize = parseFloat(rootFontSizeProperty.replace(/[^\d\.]/g, ''));
     normalizeRem($editable, rootFontSize);
 
+    // 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(document.createComment(`[if mso]>${clone.outerHTML}<![endif]`));
+        image.setAttribute('style', `${image.getAttribute('style') || ''} mso-hide: all;`.trim());
+        image.before(document.createComment('[if !mso]><!'));
+        image.after(document.createComment('<![endif]'));
+    }
+
     for (const [node, displayValue] of displaysToRestore) {
         node.style.setProperty('display', displayValue);
     }