From 62bdd7adae9abf63b52eb9b280f7a9adaeaf97db Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Tue, 6 Jun 2023 08:09:17 +0000
Subject: [PATCH] [IMP] website, web_editor: placeholder in empty sanitized
 HTML fields

When an HTML field is empty and no block can be dropped inside it, it
is very difficult to locate or even notice.

This commit adds a placeholder text inside sanitized HTML fields.

Steps to reproduce:
- Install website_crm_partner_assign.
- Go to a contact without website description.
- Go to its website page.
- Edit page.

=> The `partner.website_description` field is difficult to locate.

task-3293600

closes odoo/odoo#120588

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
---
 .../src/js/editor/odoo-editor/src/OdooEditor.js   |  9 ++++++++-
 .../components/wysiwyg_adapter/wysiwyg_adapter.js | 15 ++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
index 8ee7f4fb821..5ea7b38a3be 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
@@ -4051,10 +4051,17 @@ export class OdooEditor extends EventTarget {
             ) {
                 this.observerUnactive();
                 hint.classList.remove('oe-hint', 'oe-command-temporary-hint');
+                if (hint.dataset.oeEditPlaceholder) {
+                    hint.setAttribute("placeholder", hint.dataset.oeEditPlaceholder);
+                    if (hint.innerText.trim().length === 0) {
+                        hint.classList.add("oe-hint");
+                    }
+                } else {
+                    hint.removeAttribute("placeholder");
+                }
                 if (hint.classList.length === 0) {
                     hint.removeAttribute('class');
                 }
-                hint.removeAttribute('placeholder');
                 this.observerActive();
             }
         }
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index f0f6e7464ba..6de7f4c2cba 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -338,7 +338,8 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
         }
     }
     /**
-     * Adds automatic editor messages on drag&drop zone elements.
+     * Adds automatic editor messages on drag&drop zone elements and
+     * placeholders on HTML fields.
      *
      * @private
      */
@@ -350,6 +351,18 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
                 .attr('data-editor-message-default', true)
                 .attr('data-editor-message', this.env._t('DRAG BUILDING BLOCKS HERE'));
         $wrap.filter(':empty').attr('contenteditable', false);
+        for (let htmlEl of $wrap.not("[placeholder]").filter('[data-oe-sanitize="no_block"]')) {
+            const placeholderText = this.env._t("Type in text here...");
+            // Put the placeholder in the same location as the powerbox hint.
+            htmlEl = htmlEl.querySelector("p, div") || htmlEl;
+            htmlEl.setAttribute("placeHolder", placeholderText);
+            htmlEl.dataset.oeEditPlaceholder = placeholderText;
+            if (htmlEl.innerText.trim().length === 0) {
+                // "oe-hint" forces the display of the placeholder.
+                // It is removed by OdooEditor when text is entered.
+                htmlEl.classList.add("oe-hint");
+            }
+        }
     }
     /**
      * Get the areas on the page that should be editable.