From e8112e2865ca449c4df9cd6147e9e24c4c6dcd41 Mon Sep 17 00:00:00 2001 From: Younn Olivier Date: Wed, 20 Jul 2022 07:13:20 +0000 Subject: [PATCH] [FIX] website: keep focus on text when using snippet options Before [1] was merged, for this flow: - Drop a snippet in the page - Click on some paragraph - Click on a snippet option's widget => The text selection was lost on Chrome, but kept on Firefox. With [1] instantiating the SnippetsMenu on a different document than the snippets one, it was possible to keep the text selection (the snippets document selection) when clicking on the snippets options (on the global document). Some code was added to preserve the Chrome behaviour and lose the text selection. This code is reverted to keep the Firefox behaviour. [1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b task-2687506 Part-of: odoo/odoo#96401 --- .../website/static/src/js/editor/wysiwyg.js | 42 ----------------- .../tours/snippet_editor_panel_options.js | 45 +++++++++++++++++++ addons/website/tests/test_ui.py | 3 ++ 3 files changed, 48 insertions(+), 42 deletions(-) create mode 100644 addons/website/static/tests/tours/snippet_editor_panel_options.js 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")