[IMP] web_editor: add delete button on snippet overlay

This commit adds a trash icon on the snippet overlay to delete the
snippet without using the left panel button.

task-2314805

closes odoo/odoo#55612

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 15 insertions, 1 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index d5949a41aa8..97572f4ec8c 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -25,6 +25,9 @@ var globalSelector = {
 var SnippetEditor = Widget.extend({
     template: 'web_editor.snippet_overlay',
     xmlDependencies: ['/web_editor/static/src/xml/snippets.xml'],
+    events: {
+        'click .oe_snippet_remove': '_onRemoveClick',
+    },
     custom_events: {
         'option_update': '_onOptionUpdate',
         'user_value_widget_request': '_onUserValueWidgetRequest',
@@ -103,7 +106,7 @@ var SnippetEditor = Widget.extend({
         }
 
         if (!this.isTargetParentEditable) {
-            $customize.find('.oe_snippet_remove').addClass('d-none');
+            this.$el.add($customize).find('.oe_snippet_remove').addClass('d-none');
         }
 
         var _animationsCount = 0;
@@ -511,6 +514,11 @@ var SnippetEditor = Widget.extend({
             }
             this.styles[key] = option;
             option.__order = i++;
+
+            if (option.forceNoDeleteButton) {
+                this.$el.add($optionsSection).find('.oe_snippet_remove').addClass('d-none');
+            }
+
             return option.appendTo(document.createDocumentFragment());
         });
 
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 4ee4dad1293..2aca673d887 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1740,6 +1740,12 @@ const SnippetOptionWidget = Widget.extend({
      * @type {boolean}
      */
     isTopOption: false,
+    /**
+     * Forces the target to not be possible to remove.
+     *
+     * @type {boolean}
+     */
+    forceNoDeleteButton: false,
 
     /**
      * The option `$el` is supposed to be the associated DOM UI element.