From 4ed9c18199766d9ba3fa1d16efec02b727c3e53a Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Mon, 12 Dec 2022 13:38:01 +0000
Subject: [PATCH] [FIX] note,web(_editor): fix html field style

Commit [1] added a div around the `.note-editable` node of the html
editor. This broke some css rules. For instance, the html field in
form view's notebooks should have a transparent bottom border when
focused, this was no longer the case (e.g. crm lead form view).
Moreover, we sometimes want to control the height of the editor
(e.g. in Notes or in the mail full composer). That was broken as
well due to the added div.

This commit fixes those issues.

We also ensure to set the border-radius to 0 when the editor only
has a bottom border.

In notes, we do not want to have borders, but the rule didn't
apply due to selector precedence, we fix that as well.

Finally, we fix a typo in a selector in the web_editor addon.

[1] https://github.com/odoo/odoo/commit/60ac6be0d3545#

closes odoo/odoo#107740

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 addons/note/static/src/scss/note.scss                     | 2 +-
 addons/web/static/src/views/form/form_controller.scss     | 2 +-
 addons/web_editor/static/src/js/backend/html_field.xml    | 2 +-
 addons/web_editor/static/src/scss/web_editor.backend.scss | 3 ++-
 addons/web_editor/static/src/scss/wysiwyg.scss            | 2 +-
 5 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/addons/note/static/src/scss/note.scss b/addons/note/static/src/scss/note.scss
index d7f27cc2445..04eead746ff 100644
--- a/addons/note/static/src/scss/note.scss
+++ b/addons/note/static/src/scss/note.scss
@@ -28,7 +28,7 @@
                 }
             }
         }
-        .note-editable {
+        .o_field_html .note-editable {
             border: none;
             padding: $o-sheet-vpadding $o-horizontal-padding 10px !important;
             min-height: 300px;
diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss
index ada6b295d53..16e961f7b87 100644
--- a/addons/web/static/src/views/form/form_controller.scss
+++ b/addons/web/static/src/views/form/form_controller.scss
@@ -524,7 +524,7 @@
             > .tab-pane {
                 padding: $o-horizontal-padding 0;
 
-                > .o_field_html > .note-editable {
+                > .o_field_html .note-editable {
                     min-height: 180px;
                     &:hover, &:focus {
                         border-color: transparent;
diff --git a/addons/web_editor/static/src/js/backend/html_field.xml b/addons/web_editor/static/src/js/backend/html_field.xml
index 21a69731596..e734db25b66 100644
--- a/addons/web_editor/static/src/js/backend/html_field.xml
+++ b/addons/web_editor/static/src/js/backend/html_field.xml
@@ -10,7 +10,7 @@
                 <div  t-ref="readonlyElement" class="o_readonly" t-out="markupValue" />
             </t>
         </t>
-        <div t-else="" t-ref="spellcheck">
+        <div t-else="" class="h-100" t-ref="spellcheck">
             <t t-if="state.showCodeView">
                 <textarea t-ref="codeView" class="o_codeview" t-att-value="markupValue"/>
                 <div t-ref="codeViewButton" id="codeview-btn-group" class="btn-group" t-on-click="toggleCodeView">
diff --git a/addons/web_editor/static/src/scss/web_editor.backend.scss b/addons/web_editor/static/src/scss/web_editor.backend.scss
index 6aa5a7907b2..687ac88a1f3 100644
--- a/addons/web_editor/static/src/scss/web_editor.backend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.backend.scss
@@ -39,10 +39,11 @@
     }
 }
 
-.o_form_view:not(o_field_highlight) {
+.o_form_view:not(.o_field_highlight) {
     .o_field_html .note-editable {
         border: $input-border-width solid transparent;
         border-width: 0 0 $input-border-width 0;
+        border-radius: 0;
 
         &:hover, &:focus {
             border-color: var(--o-input-border-color);
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index c5af1a83053..a563aa888c3 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -569,7 +569,7 @@ img::selection {
     border-radius: 3px;
 }
 
-.oe-bordered-editor>.note-editable {
+.oe-bordered-editor .note-editable {
     border-width: 1px;
     padding: 4px;
     min-height: 180px;