[FIX] mass_mailing: ensure body_arch and body_html have the same fonts

Zynton · Zynton · commit af6f39d0c0cc · 2022-01-21T08:43:04.000Z
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#82233
diff --git a/addons/mass_mailing/tests/test_mailing_ui.py b/addons/mass_mailing/tests/test_mailing_ui.py
@@ -20,4 +20,4 @@ def test_01_mass_mailing_editor_tour(self):
         # 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
@@ -14,14 +14,15 @@
 
     <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">
         <style>
             * {
                 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
@@ -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') || '';

Original file line number	Diff line number	Diff line change
`@@ -289,6 +289,10 @@ function classToStyle($editable, cssRules) {`
`289`	`289`	`node.style[styleName] = '';`
`290`	`290`	`}`
`291`	`291`	`}`
	`292`	`+ // Ignore font-family (mail-safe font declared in <head>)`
	`293`	`+ if ('font-family' in css) {`
	`294`	`+ delete css['font-family'];`
	`295`	`+ }`
`292`	`296`
`293`	`297`	`// Do not apply css that would override inline styles (which are prioritary).`
`294`	`298`	`let style = $target.attr('style') \|\| '';`