From badd8922f7facde6c9fbcf529e96f7dfb53ae253 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Mon, 10 Jan 2022 14:22:12 +0000
Subject: [PATCH] [FIX] mass_mailing: ensure body_arch and body_html have the
 same fonts

The mail-safe font is applied to a style in <head> for emails. But the
way it was applied, <div>s were forgotten. Since most of those are
converted to tables when converting body_arch to body_html, it resulted
in visible font differences between body_arch and body_html.

Part-of: odoo/odoo#83233
---
 addons/mass_mailing/tests/test_mailing_ui.py              | 2 +-
 addons/mass_mailing/views/assets.xml                      | 3 ++-
 addons/web_editor/static/src/js/backend/convert_inline.js | 4 ++++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/addons/mass_mailing/tests/test_mailing_ui.py b/addons/mass_mailing/tests/test_mailing_ui.py
index 10f8801eb07..22b6ab5e224 100644
--- a/addons/mass_mailing/tests/test_mailing_ui.py
+++ b/addons/mass_mailing/tests/test_mailing_ui.py
@@ -20,4 +20,4 @@ class TestUi(HttpCaseWithUserDemo):
         # for email client compatibility should be saved in body_html. This
         # ensures both fields have different values.
         self.assertEqual(mail.body_arch, '<p><br></p>')
-        self.assertEqual(mail.body_html, '<p style="margin:0px 0 14px 0;box-sizing:border-box;font-family:Arial, sans-serif;"><br style="box-sizing:border-box;"></p>')
+        self.assertEqual(mail.body_html, '<p style="margin:0px 0 14px 0;box-sizing:border-box;"><br style="box-sizing:border-box;"></p>')
diff --git a/addons/mass_mailing/views/assets.xml b/addons/mass_mailing/views/assets.xml
index 2540cc69d34..3897ef499f4 100644
--- a/addons/mass_mailing/views/assets.xml
+++ b/addons/mass_mailing/views/assets.xml
@@ -14,6 +14,7 @@
 
     <template id="iframe_css_assets_readonly" groups="base.group_user">
         <link rel="stylesheet" type="text/scss" href="/mass_mailing/static/src/css/basic_theme_readonly.css"/>
+        <t t-call="mass_mailing.mass_mailing_mail_style"/>
     </template>
 
     <template id="mass_mailing_mail_style">
@@ -21,7 +22,7 @@
             * {
                 box-sizing: border-box !important;
             }
-            * h1, h2, h3, h4, h5, h6, p, td, th {
+            * h1, h2, h3, h4, h5, h6, p, td, th, div {
                 font-family: Arial, sans-serif !important;
             }
             /* Remove space around the email design. */
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 c0c6cb92d30..98ca47c9d36 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -289,6 +289,10 @@ function classToStyle($editable, cssRules) {
                 node.style[styleName] = '';
             }
         }
+        // Ignore font-family (mail-safe font declared in <head>)
+        if ('font-family' in css) {
+            delete css['font-family'];
+        }
 
         // Do not apply css that would override inline styles (which are prioritary).
         let style = $target.attr('style') || '';