[FIX] web_editor, *: wait for drag & drop ending before saving

*: website

This is not the cleanest of fixes because the original code have to
be refactored first but this solves the problem we had *sometimes*
when drag and dropping a snippet then immediately saving (only saw the
bug in automatic tests): same as all snippet options, the operation had
to be mutexed so that saving is done after its full execution.

Part of https://github.com/odoo/odoo/pull/57975
task-2344227

X-original-commit: 277f39904e7218bef2dd23b1c5b719ce8660008f

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

@@ -1824,10 +1824,12 @@ var SnippetsMenu = Widget.extend({
         var $toInsert, dropped, $snippet;
         let scrollValue;
 
+        let dragAndDropResolve;
+
         const smoothScrollOptions = this._getScrollOptions({
             jQueryDraggableOptions: {
                 distance: 0,
-                handle: '.oe_snippet_thumbnail',
+                handle: '.oe_snippet_thumbnail:not(.o_we_already_dragging)',
                 helper: function () {
                     const dragSnip = this.cloneNode(true);
                     dragSnip.querySelectorAll('.o_delete_btn').forEach(
@@ -1836,6 +1838,8 @@ var SnippetsMenu = Widget.extend({
                     return dragSnip;
                 },
                 start: function () {
+                    self.$el.find('.oe_snippet_thumbnail').addClass('o_we_already_dragging');
+
                     dropped = false;
                     $snippet = $(this);
                     var $baseBody = $snippet.find('.oe_snippet_body');
@@ -1888,6 +1892,9 @@ var SnippetsMenu = Widget.extend({
                             }
                         },
                     });
+
+                    const prom = new Promise(resolve => dragAndDropResolve = () => resolve());
+                    self._mutex.exec(() => prom);
                 },
                 stop: async function (ev, ui) {
                     $toInsert.removeClass('oe_snippet_body');
@@ -1925,19 +1932,24 @@ var SnippetsMenu = Widget.extend({
                         var $target = $toInsert;
                         await self._scrollToSnippet($target, scrollValue);
 
-                        _.defer(function () {
+                        _.defer(async function () {
                             self.trigger_up('snippet_dropped', {$target: $target});
                             self._disableUndroppableSnippets();
 
-                            self._callForEachChildSnippet($target, function (editor, $snippet) {
+                            dragAndDropResolve();
+
+                            await self._callForEachChildSnippet($target, function (editor, $snippet) {
                                 return editor.buildSnippet();
-                            }).then(function () {
-                                $target.trigger('content_changed');
-                                return self._updateInvisibleDOM();
                             });
+                            $target.trigger('content_changed');
+                            await self._updateInvisibleDOM();
+
+                            self.$el.find('.oe_snippet_thumbnail').removeClass('o_we_already_dragging');
                         });
                     } else {
                         $toInsert.remove();
+                        dragAndDropResolve();
+                        self.$el.find('.oe_snippet_thumbnail').removeClass('o_we_already_dragging');
                     }
                 },
             },

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

@@ -4126,7 +4126,7 @@ registry.BackgroundPosition = SnippetOptionWidget.extend({
      * @param {boolean} activate toggle the overlay on (true) or off (false)
      */
     _toggleBgOverlay: function (activate) {
-        if (this.$backgroundOverlay.is('.oe_active') === activate) {
+        if (!this.$backgroundOverlay || this.$backgroundOverlay.is('.oe_active') === activate) {
             return;
         }
 

addons/website/static/src/js/tours/tour_utils.js

@@ -173,7 +173,7 @@ function clickOnText(snippet, element, position = "bottom") {
  */
 function dragNDrop(snippet, position = "bottom") {
     return {
-        trigger: `#oe_snippets .oe_snippet[name="${snippet.name}"] .oe_snippet_thumbnail`,
+        trigger: `#oe_snippets .oe_snippet[name="${snippet.name}"] .oe_snippet_thumbnail:not(.o_we_already_dragging)`,
         extra_trigger: "body.editor_enable.editor_has_snippets",
         moveTrigger: '.oe_drop_zone',
         content: _t(`Drag the <b>${snippet.name}</b> building block and drop it in your page.`),

addons/website/static/tests/tours/snippet_version.js

@@ -15,7 +15,7 @@ tour.register("snippet_version", {
     run: "drag_and_drop #wrap",
 }, {
     content: "Drop s_text_image snippet",
-    trigger: '#oe_snippets .oe_snippet:has(.s_text_image) .oe_snippet_thumbnail',
+    trigger: '#oe_snippets .oe_snippet:has(.s_text_image) .oe_snippet_thumbnail:not(.o_we_already_dragging)',
     run: "drag_and_drop #wrap",
 }, {
     content: "Test t-snippet and t-snippet-call: snippets have data-snippet set",