[FIX] web_editor: display editable area placeholder

2 files changed, 28 insertions, 12 deletions

diff --git a/addons/web_editor/static/src/css/editor.css b/addons/web_editor/static/src/css/editor.css
index 47d7baa3c66..73d79d856d2 100644
--- a/addons/web_editor/static/src/css/editor.css
+++ b/addons/web_editor/static/src/css/editor.css
@@ -1111,37 +1111,46 @@ html[data-translatable] .oe_field_translate {
   display: block !important;
 }
 
-.oe_empty[data-oe-placeholder]:empty {
+.editor_enable [placeholder]:empty:after {
+  content: "  " attr(placeholder);
+  opacity: 0.5;
+}
+.editor_enable [placeholder]:empty:active:after, [placeholder]:empty:focus:after {
+  content: none;
+}
+.editor_enable input[placeholder]:empty:after, .editor_enable textarea[placeholder]:empty:after, .editor_enable select[placeholder]:empty:after {
+  content: none;
+}
+.oe_empty[placeholder]:empty {
   min-height: 220px !important;
   background-repeat: no-repeat;
   background-position: center;
 }
-.oe_empty[data-oe-placeholder]:empty:not(.o_editable) {
+.oe_empty[placeholder]:empty:not(.o_editable) {
   background-image: url("/web_editor/static/src/img/edit_here.png") !important;
 }
-.oe_empty[data-oe-placeholder]:empty:after, .oe_empty[data-oe-placeholder]:empty:before {
+.oe_empty[placeholder]:empty:after, .oe_empty[placeholder]:empty:before {
   opacity: 0.4;
   overflow: hidden;
   z-index: -1;
   min-height: 1em;
 }
-.oe_empty[data-oe-placeholder]:empty:after {
+.oe_empty[placeholder]:empty:after {
   text-align: center;
   padding-top: 160px;
   display: block;
-  content: "  " attr(data-oe-placeholder);
   font-size: 24px;
 }
-.oe_empty[data-oe-placeholder]:empty.o_no_placeholder_image {
+.oe_empty[placeholder]:empty.o_no_placeholder_image {
   background-image: none;
   text-align: left;
   padding-top: 0;
 }
-.oe_empty[data-oe-placeholder]:empty[data-oe-type=html]:after {
+.oe_empty[placeholder]:empty[data-oe-type=html]:after {
   font-size: 16px;
 }
 
-.editor_has_snippets .oe_empty[data-oe-placeholder]:empty {
+.editor_has_snippets .oe_empty[placeholder]:empty {
   background-image: url("/web_editor/static/src/img/drag_here.png") !important;
 }
 
diff --git a/addons/web_editor/static/src/css/editor.sass b/addons/web_editor/static/src/css/editor.sass
index 094ecc6bc32..420ec01fe1e 100644
--- a/addons/web_editor/static/src/css/editor.sass
+++ b/addons/web_editor/static/src/css/editor.sass
@@ -915,8 +915,16 @@ html[data-translatable] .oe_field_translate
         display: block !important
     .media_iframe_video .css_editable_mode_display
         display: block !important
- 
-.oe_empty[data-oe-placeholder]:empty
+
+    [placeholder]:empty
+        content: " \00a0 " attr(placeholder)
+    [placeholder]:empty:active:after, [placeholder]:empty:focus:after
+        content: none
+    input, textarea, select
+        &[placeholder]:empty
+            content: none
+
+.oe_empty[placeholder]:empty
     min-height: 220px !important
     background-repeat: no-repeat
     background-position: center
@@ -934,7 +942,6 @@ html[data-translatable] .oe_field_translate
         text-align: center
         padding-top: 160px
         display: block
-        content: " \00a0 " attr(data-oe-placeholder)
         font-size: 24px
 
     &.o_no_placeholder_image
@@ -945,7 +952,7 @@ html[data-translatable] .oe_field_translate
     &[data-oe-type=html]
         &:after
             font-size: 16px
-.editor_has_snippets .oe_empty[data-oe-placeholder]:empty
+.editor_has_snippets .oe_empty[placeholder]:empty
     background-image: url('/web_editor/static/src/img/drag_here.png') !important
 
 #web_editor-top-edit