From 71c4b35ea17407fe9f76311c6a91bbddfa02b3f9 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Fri, 1 Oct 2021 13:35:22 +0000
Subject: [PATCH] [FIX] web_editor: properly size text on transpiling for
 emails

The body's font size and line height were lost on transpiling it for
emails. This restores them by applying them to the mailing's top
element.

Part-of: odoo/odoo#77724
---
 .../static/src/js/backend/convert_inline.js   | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

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 f3b79fc54a7..37245fbd0fd 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -87,7 +87,9 @@ function getMatchedCSSRules(a) {
     var style;
     a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
     for (r = 0; r < rulesCache.length; r++) {
-        if (a.matches(rulesCache[r].selector)) {
+        // The top element of a mailing has the class 'o_layout'. Give it the
+        // body's styles so they can trickle down.
+        if (a.matches(rulesCache[r].selector) || (a.classList.contains('o_layout') && rulesCache[r].selector === 'body')) {
             style = rulesCache[r].style;
             if (style.parentRule) {
                 var style_obj = {};
@@ -363,16 +365,28 @@ const tableAttributes = {
 const tableStyles = {
     'border-collapse': 'collapse',
     'text-align': 'inherit',
+    'font-size': 'unset',
+    'line-height': 'unset',
 };
 function _createTable(attributes = []) {
     const $table = $('<table/>');
-    $table.attr(tableAttributes).css(tableStyles);
+    $table.attr(tableAttributes);
     $table[0].style.setProperty('width', '100%', 'important');
     for (const attr of attributes) {
-        if (attr.name !== 'width' && attr.value !== '100%') {
+        if (!(attr.name === 'width' && attr.value === '100%')) {
             $table.attr(attr.name, attr.value);
         }
     }
+    if ($table.hasClass('o_layout')) {
+        // The top mailing element inherits the body's font size and line-height
+        // and should keep them.
+        const layoutStyles = {...tableStyles};
+        delete layoutStyles['font-size'];
+        delete layoutStyles['line-height'];
+        $table.css(layoutStyles);
+    } else {
+        $table.css(tableStyles);
+    }
     return $table;
 }
 function _createColumnGrid() {