[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

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;

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.");
+        }
+    },
+}]);

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")