[IMP] web_editor: clean the snippet UI before cloning it

When cloning a snippet, if it had some previews displayed, the previews
may be cloned with it. This is not a good behavior because the clone
is a new snippet so it should not have all the preview classes that were
added when editing. Moreover, these previews could also cause bugs.

To solve this, an idea could be to call the `cleanForSave` function of
all its options before cloning the snippet. But the problem is that in
some options, the `cleanForSave` function does more than simply clean
the UI (as it was originally supposed to) and so it cannot be used for
that purpose only.

As a solution, this commit adds a new function called `cleanUI` whose
exclusive purpose will be to clean the snippet UI. In the future, it
will replace the `cleanForSave` function.

task-3369695

Part-of: odoo/odoo#136683
Co-authored-by: qsm-odoo <qsm@odoo.com>

addons/web_editor/static/src/js/editor/snippets.editor.js

@@ -218,6 +218,17 @@ var SnippetEditor = Widget.extend({
             return option.cleanForSave();
         });
         await Promise.all(proms);
+        await this.cleanUI();
+    },
+    /**
+     * Notifies all the associated snippet options that the snippet UI needs to
+     * be cleaned.
+     */
+    async cleanUI() {
+        const proms = Object.values(this.styles).map((option) => {
+            return option.cleanUI();
+        });
+        await Promise.all(proms);
     },
     /**
      * Closes all widgets of all options.
@@ -631,6 +642,13 @@ var SnippetEditor = Widget.extend({
     clone: async function (recordUndo) {
         this.trigger_up('snippet_will_be_cloned', {$target: this.$target});
 
+        await new Promise(resolve => {
+            this.trigger_up("clean_ui_request", {
+                targetEl: this.$target[0],
+                onSuccess: resolve,
+            });
+        });
+
         var $clone = this.$target.clone(false);
 
         this.$target.after($clone);
@@ -1723,6 +1741,7 @@ var SnippetsMenu = Widget.extend({
         'activate_snippet': '_onActivateSnippet',
         'call_for_each_child_snippet': '_onCallForEachChildSnippet',
         'clone_snippet': '_onCloneSnippet',
+        "clean_ui_request": "_onCleanUIRequest",
         'cover_update': '_onOverlaysCoverUpdate',
         'deactivate_snippet': '_onDeactivateSnippet',
         'drag_and_drop_stop': '_onSnippetDragAndDropStop',
@@ -3724,6 +3743,20 @@ var SnippetsMenu = Widget.extend({
             ev.data.onSuccess();
         }
     },
+    /**
+     * Called when a child editor asks to clean the UI of a snippet.
+     *
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onCleanUIRequest(ev) {
+        const targetEditors = this.snippetEditors.filter(editor => {
+            return ev.data.targetEl.contains(editor.$target[0]);
+        });
+        Promise.all(targetEditors.map(editor => editor.cleanUI())).then(() => {
+            ev.data.onSuccess();
+        });
+    },
     /**
      * Called when a child editor asks to deactivate the current snippet
      * overlay.

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -3255,6 +3255,15 @@ const SnippetOptionWidget = Widget.extend({
      * @return {Promise|undefined}
      */
     cleanForSave: async function () {},
+    /**
+     * Called when the associated snippet UI needs to be cleaned (e.g. from
+     * visual effects like previews).
+     * TODO this function will replace `cleanForSave` in the future.
+     *
+     * @abstract
+     * @return {Promise|undefined}
+     */
+    cleanUI: async function () {},
     /**
      * Adds the given widget to the known list of user value widgets
      *