[IMP] web_editor: add /banner commands

Purpose
=======
Make it possible to attract attention to a small section of a text document
(e.g. task spec, knowledge article, etc.) via a new "bloc" called "Banner".

Specifications
==============

Add 4 commands in web_editor.
Each command will add a banner of the following types and will come with their
associated icons:
- Banner Info: alert-info - info-circle
- Banner Success: alert-success - check-circle
- Banner Warning: alert-warning - exclamation-triangle
- Banner Danger: alert-danger - exclamation

Task-2782426

Part-of: odoo/odoo#120690

addons/web_editor/__manifest__.py

@@ -83,6 +83,7 @@ Odoo Web Editor widget.
             'web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js',
 
             'web_editor/static/src/xml/editor.xml',
+            'web_editor/static/src/xml/commands.xml',
             'web_editor/static/src/xml/grid_layout.xml',
             'web_editor/static/src/xml/snippets.xml',
             'web_editor/static/src/xml/wysiwyg.xml',

addons/web_editor/static/src/js/wysiwyg/wysiwyg.js

@@ -22,6 +22,7 @@ import weWidgets from "wysiwyg.widgets";
 import Link from "wysiwyg.widgets.Link";
 import * as wysiwygUtils from "@web_editor/js/common/wysiwyg_utils";
 import weUtils from "web_editor.utils";
+import { isSelectionInSelectors } from '@web_editor/js/editor/odoo-editor/src/utils/utils';
 import { PeerToPeer } from "@web_editor/js/wysiwyg/PeerToPeer";
 import { uniqueId } from "@web/core/utils/functions";
 import { groupBy } from "@web/core/utils/arrays";
@@ -2070,6 +2071,25 @@ const Wysiwyg = Widget.extend({
 
         return finalOptions;
     },
+    _getBannerCommand: function (title, alertClass, iconClass, description, priority) {
+        return {
+            category: _t('Banner'),
+            name: title,
+            priority: priority,
+            description: description,
+            fontawesome: iconClass,
+            isDisabled: () => isSelectionInSelectors('.o_editor_banner') || !this.odooEditor.isSelectionInBlockRoot(),
+            callback: () => {
+                const bannerElement = $(QWeb.render('web_editor.banner', {
+                    label: title,
+                    alertClass: alertClass,
+                    iconClass: iconClass
+                }))[0];
+                this.odooEditor.execCommand('insert', bannerElement);
+                setSelection(bannerElement.querySelector('.o_editor_banner > div'), 0);
+            },
+        }
+    },
     _insertSnippetMenu: function () {
         return this.snippetsMenu.insertBefore(this.$el);
     },
@@ -2120,8 +2140,12 @@ const Wysiwyg = Widget.extend({
     },
     _getPowerboxOptions: function () {
         const editorOptions = this.options;
-        const categories = [];
+        const categories = [{ name: _t('Banners'), priority: 65 },];
         const commands = [
+            this._getBannerCommand(_t('Banner Info'), 'info', 'fa-info-circle', _t('Insert an info banner section'), 24),
+            this._getBannerCommand(_t('Banner Success'), 'success', 'fa-check-circle', _t('Insert a success banner section'), 23),
+            this._getBannerCommand(_t('Banner Warning'), 'warning', 'fa-exclamation-triangle', _t('Insert a warning banner section'), 22),
+            this._getBannerCommand(_t('Banner Danger'), 'danger', 'fa-exclamation-circle', _t('Insert a danger banner section'), 21),
             {
                 category: _t('Structure'),
                 name: _t('Quote'),

addons/web_editor/static/src/scss/web_editor.common.scss

@@ -1054,3 +1054,10 @@ section, .oe_img_bg, [data-oe-shape-data] {
         font-weight: 700 !important;
     }
 }
+
+.o_editor_banner {
+    // force margin to ensure vertical center alignment in correlation with icon
+    p, h1, h2, h3 {
+        margin-bottom: 1rem;
+    }
+}

addons/web_editor/static/src/xml/commands.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+    <t t-name="web_editor.banner">
+        <div t-attf-class="o_editor_banner o_not_editable lh-1 d-flex align-items-center alert alert-#{alertClass} pb-0 pt-3" role="status" data-oe-protected="true">
+            <i t-attf-class="fs-4 fa #{iconClass} mb-3" t-att-aria-label="label"/>
+            <div class="o_editable o_editable_no_shadow w-100 ms-3" data-oe-protected="false">
+                <p><br/></p>
+            </div>
+        </div>
+    </t>
+</templates>