[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

@@ -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>')

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. */

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') || '';