diff --git a/addons/website/static/src/js/editor/wysiwyg.js b/addons/website/static/src/js/editor/wysiwyg.js index 3b1712db571..43f04861028 100644 --- a/addons/website/static/src/js/editor/wysiwyg.js +++ b/addons/website/static/src/js/editor/wysiwyg.js @@ -271,14 +271,6 @@ snippetsEditor.SnippetsMenu.include({ const _super = this._super(...arguments); if (this.$body[0].ownerDocument !== this.ownerDocument) { this.$body.on('click.snippets_menu', '*', this._onClick); - - // As there is now one document for the SnippetsMenu and another one - // for the snippets, clicking on one should blur and remove the - // selection of the other one. - this._blurSnippetsSelection = this._blurSnippetsSelection.bind(this); - this._blurSnippetsMenuSelection = this._blurSnippetsMenuSelection.bind(this); - this.$body[0].ownerDocument.addEventListener('click', this._blurSnippetsMenuSelection); - this.$el[0].addEventListener('click', this._blurSnippetsSelection); } return _super; }, @@ -288,8 +280,6 @@ snippetsEditor.SnippetsMenu.include({ destroy() { if (this.$body[0].ownerDocument !== this.ownerDocument) { this.$body.off('.snippets_menu'); - this.$body[0].ownerDocument.removeEventListener('click', this._blurSnippetsMenuSelection); - this.$el[0].removeEventListener('click', this._blurSnippetsSelection); } return this._super(...arguments); }, @@ -308,38 +298,6 @@ snippetsEditor.SnippetsMenu.include({ $dropzone.attr('data-editor-sub-message', $hookParent.attr('data-editor-sub-message')); return $dropzone; }, - /** - * @private - */ - _blurDocumentSelection(document) { - const selection = document.getSelection(); - selection.removeAllRanges(); - }, - - //-------------------------------------------------------------------------- - // Handler - //-------------------------------------------------------------------------- - - /** - * @private - */ - _blurSnippetsSelection(ev) { - // The selection should be kept for the toolbar buttons, as they are - // related to the text's style edition. It should be blurred for the - // link tools, as they modify the element itself. - const shouldKeepFocus = ev.target.closest('.oe-toolbar') && !ev.target.closest('#create-link'); - if (shouldKeepFocus) { - return; - } - this._blurDocumentSelection(this.$body[0].ownerDocument); - }, - /** - * @private - */ - _blurSnippetsMenuSelection(ev) { - this._blurDocumentSelection(this.ownerDocument); - }, - }); return WebsiteWysiwyg; diff --git a/addons/website/static/tests/tours/snippet_editor_panel_options.js b/addons/website/static/tests/tours/snippet_editor_panel_options.js new file mode 100644 index 00000000000..f2bb5bc2c8e --- /dev/null +++ b/addons/website/static/tests/tours/snippet_editor_panel_options.js @@ -0,0 +1,45 @@ +/** @odoo-module */ + +import wTourUtils from 'website.tour_utils'; + +wTourUtils.registerEditionTour('snippet_editor_panel_options', { + test: true, + url: '/', + edition: true, +}, [ +wTourUtils.dragNDrop({ + id: 's_text_image', + name: 'Text - Image', +}), { + content: "Click on the first paragraph.", + trigger: 'iframe .s_text_image p', +}, { + content: "The text toolbar should be visible. The paragraph should be selected.", + trigger: '#oe_snippets .o_we_customize_panel > #o_we_editor_toolbar_container', + run() { + const iframeDocument = document.querySelector('.o_iframe').contentDocument; + const pText = iframeDocument.querySelector('.s_text_image p').textContent; + const selection = iframeDocument.getSelection().toString(); + if (pText !== selection) { + console.error("The paragraph was not correctly selected."); + } + }, +}, { + content: "Click on the width option.", + trigger: '[data-select-class="o_container_small"]', +}, { + content: "The snippet should have the correct class.", + trigger: 'iframe .s_text_image > .o_container_small', + run: () => {}, // It's a check. +}, { + content: "The text toolbar should still be visible, and the text still selected.", + trigger: '#oe_snippets .o_we_customize_panel > #o_we_editor_toolbar_container', + run() { + const iframeDocument = document.querySelector('.o_iframe').contentDocument; + const pText = iframeDocument.querySelector('.s_text_image p').textContent; + const selection = iframeDocument.getSelection().toString(); + if (pText !== selection) { + console.error("The paragraph text selection was lost."); + } + }, +}]); diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index fe4aff640a7..07f7f322afc 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -305,3 +305,6 @@ class TestUi(odoo.tests.HttpCase): def test_19_website_page_options(self): self.start_tour("/web", "website_page_options", login="admin") + + def test_20_snippet_editor_panel_options(self): + self.start_tour("/@/?enable_editor=1", "snippet_editor_panel_options", login="admin")