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.