[FIX] web_editor: apply padding to plain text template for Apple Mail

Most e-mail clients apply some padding around their e-mails, like
mass_mailing does in its editor. So for the plain text email template,
we mostly don't want to transfer that padding, but for Apple Mail we do
want some padding lest the e-mail be crammed in a corner. The editor's
padding was lost in conversion because the padding was applied to a
table with `border-collapse: collapse` so it was not applied (see
[mdn]).

Since we can't change that property (or layouts will be broken), our
remaining option is to wrap the layout table's contents in a `div` and
apply the padding to it instead. Since we only want this for Apple Mail,
we apply it in a nested media query, which Apple Mail is currently the
only client to support. This is the only known way to target Apple Mail
specifically but since e-mail clients tend to be remarkably slow at
adopting new technologies, this should be safe for a while.

[mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

task-3062027

closes odoo/odoo#162629

X-original-commit: bc84a40ff49cc82f1c6dd43ffddbffea6e211af0
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Co-authored-by: David Monjoie <dmo@odoo.com>

addons/web_editor/static/src/js/backend/convert_inline.js

@@ -57,8 +57,22 @@ function addTables($editable) {
         const table = _createTable(snippet.attributes);
 
         const row = document.createElement('tr');
-        const col = document.createElement('td');
+        let col = document.createElement('td');
         row.appendChild(col);
+        if (snippet.classList.contains('o_basic_theme')) {
+            const div = document.createElement('div');
+            div.classList.add('o_apple_wrapper_padding');
+            col.appendChild(div);
+            col = div;
+            const style = document.createElement('style');
+            // We create a nested media query because it's only supported by a
+            // handful of clients, including Apple Mail, and we actually only
+            // want this for Apple Mail.
+            const padding = '34px'; // This is what's needed to align the content with Apple Mail's header.
+            style.textContent = `@media{@media{.o_basic_theme div.o_apple_wrapper_padding{padding:${snippet.style.padding};}}}` +
+                `@media(min-width:961px){@media{@media{.o_basic_theme div.o_apple_wrapper_padding{padding-left:${padding};}}}}`;
+            div.before(style);
+        }
         table.appendChild(row);
 
         for (const child of [...snippet.childNodes]) {