From 22a413f86809aedc331359afd8059c7efc2682f5 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Thu, 11 Aug 2022 14:03:01 +0000
Subject: [PATCH] [FIX] web_editor: preserve card alignment on mailing
 conversion

Card dimensions were not properly preserved on mailing conversion.

opw-2850967

X-original-commit: 1be80cc83bec6a08abf6a3e8493d22f44350d038
Part-of: odoo/odoo#98107
---
 .../static/src/js/backend/convert_inline.js    | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

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 1d991f241d0..1df52492ff2 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -298,6 +298,7 @@ function cardToTable($editable) {
     for (const card of editable.querySelectorAll('.card')) {
         const table = _createTable(card.attributes);
         table.style.removeProperty('overflow');
+        const cardImgTopSuperRows = [];
         for (const child of [...card.childNodes]) {
             const row = document.createElement('tr');
             const col = document.createElement('td');
@@ -326,6 +327,17 @@ function cardToTable($editable) {
             superCol.append(subTable);
             superRow.append(superCol);
             table.append(superRow);
+            if (child.classList && child.classList.contains('card-img-top')) {
+                // Collect .card-img-top superRows to manipulate their heights.
+                cardImgTopSuperRows.push(superRow);
+            }
+        }
+        // We expect successive .card-img-top to have the same height so the
+        // bodies of the cards are aligned. This achieves that without flexboxes
+        // by forcing the height of the smallest card:
+        const smallestCardImgRow = Math.min(0, ...cardImgTopSuperRows.map(row => row.clientHeight));
+        for (const row of cardImgTopSuperRows) {
+            row.style.height = smallestCardImgRow + 'px';
         }
         card.before(table);
         card.remove();
@@ -824,6 +836,12 @@ function formatTables($editable) {
             row.style.verticalAlign = 'middle';
         } else if (alignItems === 'flex-end' || alignItems === 'baseline') {
             row.style.verticalAlign = 'bottom';
+        } else if (alignItems === 'stretch') {
+            const columns = [...row.children].filter(child => child.nodeName === 'TD');
+            const biggestHeight = Math.max(...columns.map(column => column.clientHeight));
+            for (const column of columns) {
+                column.style.height = biggestHeight + 'px';
+            }
         }
     }
     // Tables don't properly inherit alignments from their ancestors in Outlook.