From ea108e3910664cbee79aa9e38d5c79e2f36503b7 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Tue, 10 Aug 2021 10:27:35 +0000
Subject: [PATCH] [FIX] web_editor: review snippet drag and drop technical flow

This commit completes [1] by further reviewing the drag and drop
technical flow order:

- The content_changed event should be triggered before starting snippets
  as well as it is only useful to signal the snippet modifications made
  by onBuilt.

- The undroppable snippets update which was done first could probably be
  done anywhere -> best to put it at the end when everything in the DOM
  is done, and it is also the last thing the user expects to be done.

Note: in the new editor the role of 'content_changed' became however
unclear and should be further reviewed. This commit fixes problems with
the old flow in master though (problems around removing items in a
snippet during its onBuilt call).

[1]: https://github.com/odoo/odoo/commit/60d7bf6d7daea83db9332b4fc47a4ac6892d21d7

closes odoo/odoo#75596

X-original-commit: efdfe261afd933972869305fd3358c764f7c18c3
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/editor/snippets.editor.js   | 30 ++++++++++++++++---
 addons/website/static/src/js/menu/edit.js     | 11 ++++---
 2 files changed, 33 insertions(+), 8 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 a6e0ce66191..3f9315607a0 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -2392,20 +2392,42 @@ var SnippetsMenu = Widget.extend({
                         await self._scrollToSnippet($target, self.$scrollable);
 
                         _.defer(async function () {
-                            self._disableUndroppableSnippets();
-
+                            // Free the mutex now to allow following operations
+                            // (mutexed as well).
                             dragAndDropResolve();
 
+                            // First call the onBuilt of all options of each
+                            // item in the snippet (and so build their editor
+                            // instance first).
                             await self._callForEachChildSnippet($target, function (editor, $snippet) {
                                 return editor.buildSnippet();
                             });
-                            self.trigger_up('snippet_dropped', {$target: $target});
+                            // The snippet is now fully built, notify the
+                            // editor for changed content.
                             $target.trigger('content_changed');
+
+                            // Now notifies that a snippet was dropped (at the
+                            // moment, useful to start public widgets for
+                            // instance (no saved content)).
+                            await self._mutex.exec(() => {
+                                const proms = [];
+                                self.trigger_up('snippet_dropped', {
+                                    $target: $target,
+                                    addPostDropAsync: prom => proms.push(prom),
+                                });
+                                return Promise.all(proms);
+                            });
+
+                            // Lastly, ensure that the snippets or its related
+                            // parts are added to the invisible DOM list if
+                            // needed.
                             await self._updateInvisibleDOM();
 
+                            // Restore editor to its normal edition state, also
+                            // make sure the undroppable snippets are updated.
+                            self._disableUndroppableSnippets();
                             self.options.wysiwyg.odooEditor.unbreakableStepUnactive();
                             self.options.wysiwyg.odooEditor.historyStep();
-
                             self.$el.find('.oe_snippet_thumbnail').removeClass('o_we_already_dragging');
                         });
                     } else {
diff --git a/addons/website/static/src/js/menu/edit.js b/addons/website/static/src/js/menu/edit.js
index 5ade99c596f..e31baeed29f 100644
--- a/addons/website/static/src/js/menu/edit.js
+++ b/addons/website/static/src/js/menu/edit.js
@@ -486,10 +486,13 @@ var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
     _onSnippetDropped: function (ev) {
         this._targetForEdition().find('.oe_structure.oe_empty, [data-oe-type="html"]')
             .attr('contenteditable', true);
-        this.trigger_up('widgets_start_request', {
-            editableMode: true,
-            $target: ev.data.$target,
-        });
+        ev.data.addPostDropAsync(new Promise(resolve => {
+            this.trigger_up('widgets_start_request', {
+                editableMode: true,
+                $target: ev.data.$target,
+                onSuccess: () => resolve(),
+            });
+        }));
     },
     /**
      * Called when a snippet is removed from the page. If the wrapper element is