From 9ae5e637e1caa0bbc4a4435d74ddea49655d7ac0 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Mon, 18 Oct 2021 16:08:25 +0000
Subject: [PATCH] [FIX] web_editor: prevent several blocks in one column on
 convert grid

The following structure is not always properly rendered in mail clients:

```html
<table>
    <tbody>
        <tr>
            <td>
                <h1>Text</h1>
                <p>Text</p>
            </td>
        </tr>
    </tbody>
</table>
```

where the h1 and p can be any block-level element.

This prevents that from happening by wrapping each block in a separate
row/column combo like so:

```html
<table>
    <tbody>
        <tr>
            <td>
                <h1>Text</h1>
            </td>
        <tr>
            <td>
                <p>Text</p>
            </td>
        </tr>
    </tbody>
</table>
```

X-original-commit: 01404499277b63dc64a5a26a93bc419cca092440
Part-of: odoo/odoo#80621
---
 addons/web_editor/static/src/js/backend/convert_inline.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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 50c81a2395f..0c37ca52078 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -2,7 +2,7 @@
 'use strict';
 
 import FieldHtml from 'web_editor.field.html';
-import { rgbToHex } from '../../../lib/odoo-editor/src/utils/utils';
+import { isBlock, rgbToHex } from '../../../lib/odoo-editor/src/utils/utils';
 
 const SELECTORS_IGNORE = /(^\*$|:hover|:before|:after|:active|:link|::|'|\([^(),]+[,(])/;
 
@@ -426,6 +426,9 @@ function bootstrapToTable($editable) {
 
 
         // ROWS
+        // First give all siblings of rows a separate row/col parent combo.
+        $table.children().filter((i, child) => isBlock(child) && !$(child).hasClass('row')).wrap('<div class="row"><div class="col-12"/></div>');
+
         const $bootstrapRows = $table.children().filter('.row');
         for (const bootstrapRow of $bootstrapRows) {
             const $bootstrapRow = $(bootstrapRow);