[FIX] website: remove welcome message before starting the wysiwyg

Before this commit, the welcome message was removed at the level of the
client action, independently from the wysiwyg initialisation.

As the welcome message is directly inserted into the iframe's
contentDocument, it could lead to a race condition with the editor's
observer: if the wysiwyg was already started when the client
action was removing the message, that mutation was recorded in the
history (therefore, when switching to edit mode and clicking on discard
would show the "Are you sure to discard ?" toaster).

Now, the welcome message is removed before starting the wysiwyg using a
removeWelcomeMessage callback.

See merge commit for more information.

task-2687506

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

@@ -3411,7 +3411,7 @@ var SnippetsMenu = Widget.extend({
                 editor.toggleOverlay(false);
             });
             this.trigger_up('request_cancel', {onReject: after});
-        }, this.$el[0].querySelector('button[data-action=cancel]'));
+        }, this.$el[0].querySelector('button[data-action=cancel]'), false);
     },
     /**
      * Preview on mobile.
@@ -3460,18 +3460,34 @@ var SnippetsMenu = Widget.extend({
             }
         });
     },
-    async _buttonClick(action, button) {
+    /***
+     * Display a loading effect on the clicked button, and disables the other
+     * buttons. Passes an argument to restore the buttons to their normal
+     * state to the function to execute.
+     *
+     * @param action {Function} The action to execute
+     * @param button {HTMLElement} The button element
+     * @param addLoadingEffect {boolean} whether or not to add a loading effect.
+     * @returns {Promise<void>}
+     * @private
+     */
+    async _buttonClick(action, button, addLoadingEffect = true) {
         if (this._buttonAction) {
             return;
         }
         this._buttonAction = true;
-        const removeLoadingEffect = dom.addButtonLoadingEffect(button);
+        let removeLoadingEffect;
+        if (addLoadingEffect) {
+            removeLoadingEffect = dom.addButtonLoadingEffect(button);
+        }
         const actionButtons = this.$el[0].querySelectorAll('[data-action]');
         for (const actionButton of actionButtons) {
             actionButton.disabled = true;
         }
-        const after = () =>  {
-            removeLoadingEffect();
+        const after = () => {
+            if (removeLoadingEffect) {
+                removeLoadingEffect();
+            }
             for (const actionButton of actionButtons) {
                 actionButton.disabled = false;
             }
@@ -3479,7 +3495,6 @@ var SnippetsMenu = Widget.extend({
         await action(after);
         this._buttonAction = false;
     },
-
 });
 
 return {

addons/website/static/src/client_actions/website_preview/website_preview.js

@@ -88,16 +88,6 @@ export class WebsitePreview extends Component {
             };
         }, () => [this.props.action.context.params]);
 
-        useEffect(() => {
-            if (this.websiteContext.edition) {
-                if (this.$welcomeMessage) {
-                    this.$welcomeMessage.detach();
-                }
-            } else {
-                this.addWelcomeMessage();
-            }
-        }, () => [this.websiteContext.edition]);
-
         useEffect(() => {
             this.websiteService.blockIframe();
             this.iframe.el.addEventListener('OdooFrameContentLoaded', () => this.websiteService.unblockIframe(), { once: true });
@@ -172,6 +162,12 @@ export class WebsitePreview extends Component {
         }
     }
 
+    removeWelcomeMessage() {
+        if (this.$welcomeMessage) {
+            this.$welcomeMessage.detach();
+        }
+    }
+
     /**
      * Returns true if the url should be opened in the top
      * window.

addons/website/static/src/client_actions/website_preview/website_preview.xml

@@ -26,9 +26,11 @@
                 is-ready="false"/>
         </div>
         <WebsiteEditorComponent t-if="websiteContext.edition"
-            reloadIframe.bind="this.reloadIframe"/>
+            reloadIframe.bind="this.reloadIframe"
+            removeWelcomeMessage.bind="this.removeWelcomeMessage"/>
         <WebsiteTranslator t-if="websiteContext.translation"
-            reloadIframe.bind="this.reloadIframe"/>
+            reloadIframe.bind="this.reloadIframe"
+            removeWelcomeMessage.bind="this.removeWelcomeMessage"/>
     </div>
 </t>
 

addons/website/static/src/components/editor/editor.xml

@@ -14,7 +14,8 @@
             wysiwygOptions="this.wysiwygOptions"
             editableElements="this.editableElements"
             savableSelector="this.savableSelector"
-            beforeEditorActive="this.beforeEditorActive"/>
+            beforeEditorActive="this.beforeEditorActive"
+            removeWelcomeMessage="this.props.removeWelcomeMessage"/>
     </div>
 </t>
 </templates>

addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js

@@ -84,6 +84,13 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
             };
         }, () => []);
     }
+    /**
+     * @override
+     */
+    onWillStart() {
+        this.props.removeWelcomeMessage();
+        return super.onWillStart();
+    }
     /**
      * Stop the widgets and save the content.
      *