From 2781214d7e748a485d2cceb408fbff5c7085c27e Mon Sep 17 00:00:00 2001 From: Younn Olivier Date: Mon, 30 May 2022 18:54:20 +0200 Subject: [PATCH] [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 --- .../static/src/js/editor/snippets.editor.js | 27 ++++++++++++++----- .../website_preview/website_preview.js | 16 +++++------ .../website_preview/website_preview.xml | 6 +++-- .../static/src/components/editor/editor.xml | 3 ++- .../wysiwyg_adapter/wysiwyg_adapter.js | 7 +++++ 5 files changed, 40 insertions(+), 19 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 3f936297eff..c39c09f0a9f 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/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} + * @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 { diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js index 04b74732d10..09d333e17a9 100644 --- a/addons/website/static/src/client_actions/website_preview/website_preview.js +++ b/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. diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml index aa1e9a567f4..32e33efae3c 100644 --- a/addons/website/static/src/client_actions/website_preview/website_preview.xml +++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml @@ -26,9 +26,11 @@ is-ready="false"/> + reloadIframe.bind="this.reloadIframe" + removeWelcomeMessage.bind="this.removeWelcomeMessage"/> + reloadIframe.bind="this.reloadIframe" + removeWelcomeMessage.bind="this.removeWelcomeMessage"/> diff --git a/addons/website/static/src/components/editor/editor.xml b/addons/website/static/src/components/editor/editor.xml index c944885fd55..e5fb7e43c2d 100644 --- a/addons/website/static/src/components/editor/editor.xml +++ b/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"/> diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js index a568713f721..c6c83d4e3ee 100644 --- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js +++ b/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. *