[FIX] web_editor: left/right/center image for mail

When creating a banner using the web editor, the targeted image
appears centered in the editor but is aligned on the left in the
email.

The issue also happened with other alignment (left in a centered
widget, right, ...) for example on outlook 2007 and should be solved
with this changeset.

note: 12.0 version of #29214

opw-1904827
Co-authored-by: Nicolas Lempereur <nle@odoo.com>
closes #29954

1 files changed, 8 insertions, 2 deletions

diff --git a/addons/web_editor/static/src/js/editor/transcoder.js b/addons/web_editor/static/src/js/editor/transcoder.js
index fb161a3887e..85903f6b4eb 100644
--- a/addons/web_editor/static/src/js/editor/transcoder.js
+++ b/addons/web_editor/static/src/js/editor/transcoder.js
@@ -251,6 +251,9 @@ function applyOverDescendants(node, func) {
         if (node.nodeName === 'A' && $node.hasClass('btn') && !$node.children().length && $(node).parents('.o_outlook_hack').length)  {
             node = $(node).parents('.o_outlook_hack')[0];
         }
+        else if (node.nodeName === 'IMG' && $node.parent('p').hasClass('o_outlook_hack')) {
+            node = $node.parent()[0];
+        }
         node = node.nextSibling;
     }
 }
@@ -307,6 +310,9 @@ function classToStyle($editable) {
                 $(node).remove();
             }
         }
+        else if (node.nodeName === 'IMG' && $target.is('.mx-auto.d-block')) {
+            $target.wrap('<p class="o_outlook_hack" style="text-align:center;margin:0"/>');
+        }
     });
 }
 
@@ -318,8 +324,8 @@ function classToStyle($editable) {
  */
 function styleToClass($editable) {
     // Outlook revert
-    $editable.find('table.o_outlook_hack').each(function () {
-        $(this).after($('a', this));
+    $editable.find('.o_outlook_hack').each(function () {
+        $(this).after($('a,img', this));
     }).remove();
 
     getMatchedCSSRules($editable[0]);