[FIX] website editor: can't select and edit an empty field html or text

addons/website/static/src/css/editor.css

@@ -68,10 +68,21 @@
   display: none;
 }
 
-.o_editable[data-oe-model][data-oe-type]:hover {
-  -moz-box-shadow: 0 0 10px 3px rgba(94, 255, 0, 0.8);
-  -webkit-box-shadow: 0 0 10px 3px rgba(94, 255, 0, 0.8);
-  box-shadow: 0 0 10px 3px rgba(94, 255, 0, 0.8);
+.o_editable:not(:empty):not(:focus):hover, .o_editable[data-oe-type]:not(:focus):hover {
+  -moz-box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset;
+  -webkit-box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset;
+  box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset;
+}
+.o_editable:focus, .o_editable[data-oe-type] {
+  min-height: 0.8em;
+  min-width: 8px;
+}
+.o_editable.o_is_inline_editable {
+  display: inline-block;
+}
+
+.editor_enable [data-oe-readonly]:hover {
+  cursor: default;
 }
 
 /* Prevent the text contents of draggable elements from being selectable. */
@@ -155,7 +166,7 @@
   display: none;
 }
 
-.o_editable .css_non_editable_mode_hidden {
+.editor_enable .css_non_editable_mode_hidden {
   display: block !important;
 }
 

addons/website/static/src/css/editor.sass

@@ -62,10 +62,19 @@
     .arrow
         display: none
 
-.o_editable[data-oe-model][data-oe-type]:hover
-    -moz-box-shadow: 0 0 10px 3px rgba(94, 255, 0, 0.8)
-    -webkit-box-shadow: 0 0 10px 3px rgba(94, 255, 0, 0.8)
-    box-shadow: 0 0 10px 3px rgba(94, 255, 0, 0.8)
+.o_editable
+    &:not(:empty),&[data-oe-type]
+        &:not(:focus):hover
+            -moz-box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset
+            -webkit-box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset
+            box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset
+    &:focus,&[data-oe-type]
+        min-height: 0.8em
+        min-width: 8px
+    &.o_is_inline_editable
+        display: inline-block
+.editor_enable [data-oe-readonly]:hover
+    cursor: default
 
 // }}}
 
@@ -133,7 +142,7 @@
 .o_editable .css_editable_mode_hidden
     display: none
 
-.o_editable .css_non_editable_mode_hidden
+.editor_enable .css_non_editable_mode_hidden
     display: block !important
 
 .o_editable .media_iframe_video .css_editable_mode_display

addons/website/static/src/css/website.css

@@ -296,7 +296,6 @@ html, body, #wrapwrap {
 }
 #wrapwrap > footer {
   height: 100%;
-  background: #eff8f8;
   background: rgba(200, 200, 200, 0.1);
 }
 
@@ -827,6 +826,12 @@ span[data-oe-type="monetary"] {
   margin: 40px auto;
 }
 
+.oe_website_overflow_ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .oe_website_spinner {
   width: 121px;
 }

addons/website/static/src/css/website.sass

@@ -660,9 +660,9 @@ span[data-oe-type="monetary"]
     margin: 40px auto
 
 .oe_website_overflow_ellipsis
-    white-space:nowrap
-    overflow:hidden
-    text-overflow:ellipsis
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
 
 .oe_website_spinner
     width: 121px

addons/website/static/src/js/website.editor.js

@@ -915,7 +915,6 @@ define(['summernote/summernote'], function () {
             this.$('#website-top-view').hide();
             this.$el.show();
             this.$('#website-top-edit').show();
-            $('.css_non_editable_mode_hidden').removeClass("css_non_editable_mode_hidden");
             
             if (!no_editor) {
                 this.rte.start_edition();
@@ -943,7 +942,7 @@ define(['summernote/summernote'], function () {
             var defs = $('.o_editable')
                 .filter('.o_dirty')
                 .removeAttr('contentEditable')
-                .removeClass('o_dirty o_editable oe_carlos_danger')
+                .removeClass('o_dirty o_editable oe_carlos_danger o_is_inline_editable')
                 .map(function () {
                     var $el = $(this);
 
@@ -1207,6 +1206,12 @@ define(['summernote/summernote'], function () {
             $('.o_editable').each(function () {
                 var node = this;
                 var $node = $(node);
+
+                // add class to display inline-block for empty t-field
+                if(window.getComputedStyle(node).display === "inline") {
+                    $node.addClass('o_is_inline_editable');
+                }
+
                 // start element observation
                 observer.observe(node, OBSERVER_CONFIG);
                 $(node).one('content_changed', function () {
@@ -1221,6 +1226,22 @@ define(['summernote/summernote'], function () {
                 $('#wrapwrap, .o_editable').on('click', '*', function (event) {
                     event.preventDefault();
                 });
+
+                $('body').addClass("editor_enable");
+
+                $(document)
+                    .tooltip({
+                        selector: '[data-oe-readonly]',
+                        container: 'body',
+                        trigger: 'hover',
+                        delay: { "show": 1000, "hide": 100 },
+                        placement: 'bottom',
+                        title: _t("Readonly field")
+                    })
+                    .on('click', function () {
+                        $(this).tooltip('hide');
+                    });
+
                 self.trigger('rte:ready');
             }
         },