[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>

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();
             }
         }

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.