[IMP] website_sale: add html field to customize category header

closes odoo/odoo#29085

addons/website/static/src/js/menu/edit.js

@@ -80,7 +80,8 @@ var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
                 self.$welcomeMessage.remove();
             }
             var $wrapwrap = $('#wrapwrap'); // TODO find this element another way
-            $wrapwrap.find('.oe_structure.oe_empty, [data-oe-type="html"]').attr('data-editor-message', _t('DRAG BUILDING BLOCKS HERE'));
+            var $htmlEditable = $wrapwrap.find('.oe_structure.oe_empty, [data-oe-type="html"]').not('[data-editor-message]');
+            $htmlEditable.attr('data-editor-message', _t('DRAG BUILDING BLOCKS HERE'));
             var def = $.Deferred();
             self.trigger_up('animation_start_demand', {
                 editableMode: true,

addons/website_sale/models/product.py

@@ -68,6 +68,7 @@ class ProductPublicCategory(models.Model):
     # buttons have consistent styling.
     # In this case, the default image is set by the js code.
     image = fields.Binary(attachment=True, help="This field holds the image used as image for the category, limited to 1024x1024px.")
+    website_description = fields.Html('Category Description', sanitize_attributes=False, translate=html_translate)
     image_medium = fields.Binary(string='Medium-sized image', attachment=True,
                                  help="Medium-sized image of the category. It is automatically "
                                  "resized as a 128x128px image, with aspect ratio preserved. "

addons/website_sale/views/templates.xml

@@ -203,6 +203,10 @@
                     <div class="row mt-3">
                         <div class="d-none" id="products_grid_before"></div>
                         <div class="col-lg-12" id="products_grid">
+                            <t t-if="category">
+                                <t t-set='editor_msg'>Drag building blocks here to customize the header for "<t t-esc='category.name'/>" category.</t>
+                                <div class="mb16" id="category_header" t-att-data-editor-message="editor_msg" t-field="category.website_description"/>
+                            </t>
                             <table width="100%">
                                 <tbody>
                                     <tr t-ignore="true">