[FIX] website, website_sale: prevent Chrome from selecting hidden tabs

When selecting the content of a tab with Chrome, if the selection
reaches the end of the tab content and there is additional content after
the Tabs snippet, the selected range also includes the next inactive
tabs that are hidden. Because of this, when replacing that selection,
the next inactive tabs are removed, and the Tabs snippet is corrupted.

This commit avoids this by including the `.tab-pane`s in the read-only
areas while including its `.oe_structure` in the content-editable areas.
This makes the selection adjustment mechanism stop within the active
tab pane.

Steps to reproduce:
- Use Chrome.
- Drop two Tabs blocks inside a web page.
- Select the first tab of the first one.
- Select the last word, including the dot. (Double-click the word and
  drag beyond the dot before releasing the mouse button.)
- Change the selected text's color.
=> The content of the second and third tab also had the chosen color.

- Select the text in the first tab with a triple click.
- Type something to replace the text.
=> The content of the second and third tab were removed and clicking
on the tab's header did therefore not reach them anymore.

opw-3117305

closes odoo/odoo#113624

X-original-commit: fd57dae13179c286da99749e77a3b26efd2f73f2
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

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

@@ -374,10 +374,20 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
         // grep: COMPANY_TEAM_CONTENTEDITABLE
         const $extraEditableZones = $editableSavableZones.find('.s_company_team .o_not_editable img');
 
-        return $editableSavableZones.add($extraEditableZones).toArray();
+        return $editableSavableZones.add($extraEditableZones).toArray().concat(
+            // To make sure the selection remains bounded to the active tab,
+            // each tab is made non editable while keeping its nested
+            // oe_structure editable. This avoids having a selection range span
+            // over all further inactive tabs when using Chrome.
+            ...this.websiteService.pageDocument.querySelectorAll('#wrapwrap .s_tabs > div > .s_tabs_main > .s_tabs_content > .tab-pane > .oe_structure')
+        );
     }
     _getReadOnlyAreas() {
-        return [];
+        // To make sure the selection remains bounded to the active tab,
+        // each tab is made non editable while keeping its nested
+        // oe_structure editable. This avoids having a selection range span
+        // over all further inactive tabs when using Chrome.
+        return this.websiteService.pageDocument.querySelectorAll('#wrapwrap .s_tabs > div > .s_tabs_main > .s_tabs_content > .tab-pane');
     }
     _getUnremovableElements() {
         return [];

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

@@ -24,6 +24,9 @@ patch(WysiwygAdapterComponent.prototype, 'website_sale_wysiwyg_adapter', {
      * @override
      */
     _getReadOnlyAreas() {
-        return $(this.websiteService.pageDocument).find("#wrapwrap").find('.oe_website_sale .products_header, .oe_website_sale .products_header a').toArray();
+        const readOnlyEls = this._super(...arguments);
+        return [...readOnlyEls].concat(
+            $(this.websiteService.pageDocument).find("#wrapwrap").find('.oe_website_sale .products_header, .oe_website_sale .products_header a').toArray()
+        );
     },
 });