From 6ec1f4cc4eae2dcdc3e99c5bb774b859eb1bcaa2 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Tue, 30 Nov 2021 07:40:39 +0000
Subject: [PATCH] [FIX] web_editor: include doctype in iframe

This introduces a doctype declaration in the initialization of html
fields iframes and wysiwyg iframes. That prevents the browser from
rendering in Quirks mode[1] which makes tables override the usual style
inheritance patterns. As a result, this fixes an issue with text colors
and alignments that were lost on converting divs to table structures.

[1] See https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

X-original-commit: da5cf4bcac696a73c33d856ac889342fe8670e65
Part-of: odoo/odoo#81540
---
 addons/web_editor/static/src/js/backend/field_html.js     | 4 +++-
 addons/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/addons/web_editor/static/src/js/backend/field_html.js b/addons/web_editor/static/src/js/backend/field_html.js
index 715ea246aac..dcb8477e3f0 100644
--- a/addons/web_editor/static/src/js/backend/field_html.js
+++ b/addons/web_editor/static/src/js/backend/field_html.js
@@ -344,6 +344,7 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
                     cwindow.document
                         .open("text/html", "replace")
                         .write(
+                            '<!DOCTYPE html><html>' +
                             '<head>' +
                                 '<meta charset="utf-8"/>' +
                                 '<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>\n' +
@@ -362,7 +363,8 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
                                         'window.top.' + self._onUpdateIframeId + '(' + _avoidDoubleLoad + ')' +
                                     '}' +
                                 '</script>\n' +
-                            '</body>');
+                            '</body>' +
+                            '</html>');
 
                     var height = cwindow.document.body.scrollHeight;
                     self.$iframe.css('height', Math.max(30, Math.min(height, 500)) + 'px');
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js
index 597bbd3d689..4fd95632869 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js
@@ -157,7 +157,7 @@ Wysiwyg.include({
                 });
                 self.$iframe[0].contentWindow.document
                     .open("text/html", "replace")
-                    .write(iframeContent);
+                    .write(`<!DOCTYPE html><html>${iframeContent}</html>`);
             });
             self.options.document = self.$iframe[0].contentWindow.document;
         });