[FIX] website, web_editor: #wrapwrap in body

Make the element #wrapwrap be placed directly in the body as in 14.0
instead of wrapped inside containers.

FIX: [QSM] Header effects don't work in edit mode even though they are started
FIX: [QSM] The editor overlay on top of snippets does not disappear during scroll
      anymore
FIX: [QSM] Click on the header, it is deletable while it should not (I precise
      that here asit is a kinda different case: the header has options even though
      it's not editable but it's not deletable)

closes odoo/odoo#63268

X-original-commit: e0331583cf995b7cfe7d7928918c71b51c854f2d
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>

addons/web_editor/static/src/js/editor/snippets.editor.js

@@ -1121,7 +1121,7 @@ var SnippetsMenu = Widget.extend({
             });
             this.updateCurrentSnippetEditorOverlay();
         }, 250));
-        this.$editor.find('#wrapwrap').on('scroll.snippets_menu', () => {
+        this.$editor.on('scroll.snippets_menu', () => {
             this.updateCurrentSnippetEditorOverlay();
         });
         // Hide the active overlay when scrolling.
@@ -1198,7 +1198,7 @@ var SnippetsMenu = Widget.extend({
             this.$window.off('.snippets_menu');
             this.$document.off('.snippets_menu');
             this.$scrollingElement.off('.snippets_menu');
-            this.$editor.find('#wrapwrap').off('.snippets_menu');
+            this.$editor.off('.snippets_menu');
         }
         core.bus.off('deactivate_snippet', this, this._onDeactivateSnippet);
         delete this.cacheSnippetTemplate[this.options.snippets];
@@ -2155,7 +2155,7 @@ var SnippetsMenu = Widget.extend({
                 }
             },
         });
-        this.draggableComponent = new SmoothScrollOnDrag(this, $snippets, this.$editor.find('#wrapwrap').addBack().last(), smoothScrollOptions);
+        this.draggableComponent = new SmoothScrollOnDrag(this, $snippets, this.$editor.addBack().last(), smoothScrollOptions);
     },
     /**
      * Adds the 'o_default_snippet_text' class on nodes which contain only
@@ -2604,7 +2604,7 @@ var SnippetsMenu = Widget.extend({
     _onContentMouseDown: function (ev) {
         const el = this.editorHelpers.elementFromPoint(ev.clientX, ev.clientY);
 
-        const editable = el && el.closest('.note-editable');
+        const editable = el && el.closest('#wrapwrap, .note-editable');
 
         if (!editable || !this.$editor.is(editable) || this.lastElement === el) {
             return;

addons/web_editor/static/src/js/wysiwyg/wysiwyg.js

@@ -275,6 +275,7 @@ var Wysiwyg = Widget.extend({
         }
 
         const $mainSidebar = $('<div class="o_main_sidebar">');
+        if (this.options.enableWebsite) $mainSidebar.addClass('o_website_sidebar');
         const $snippetManipulators = $('<div id="oe_manipulators" />');
 
         const customCommands = {
@@ -322,12 +323,12 @@ var Wysiwyg = Widget.extend({
         const rootElement = this.editorHelpers.getDomNodes(domLayout.root.firstDescendant(JWEditorLib.ContainerNode))[0];
         this.editorEditable = this.editorHelpers.getDomNodes(this.zoneMain)[0] || this.editorHelpers.getDomNodes(this.zoneMain.parent)[0];
 
-        this.$toolbar = $(rootElement).find('jw-toolbar').detach();
+        this.$toolbar = $(rootElement).add('body').find('jw-toolbar').detach();
 
         if (this.options.enableWebsite) {
             const $wrapwrap = $('#wrapwrap');
             $wrapwrap.removeClass('o_editable'); // clean the dom before edition
-            this._getEditable($wrapwrap).addClass('o_editable o_editable_no_shadow');
+            this._getEditable($wrapwrap).addClass('o_editable');
             $wrapwrap.data('wysiwyg', this);
 
             // add class when page content is empty to show the "DRAG BUILDING BLOCKS HERE" block
@@ -353,7 +354,6 @@ var Wysiwyg = Widget.extend({
         };
 
         if (this.options.snippets) {
-            document.body.classList.add('editor_has_snippets');
             this.$webEditorToolbar = $('<div id="web_editor-toolbars">');
 
             var $toolbarHandler = $('#web_editor-top-edit');
@@ -369,6 +369,7 @@ var Wysiwyg = Widget.extend({
                 onlyStyleTab: this.options.enableTranslation,
             }, this.options));
             await this.snippetsMenu.appendTo($mainSidebar);
+            document.body.classList.add('editor_has_snippets');
 
             // Place the history buttons in their right location.
             const $undoButton = $('<button name="undo" class="btn btn-secondary fa fa-undo"></button>');

addons/web_editor/static/src/scss/wysiwyg.scss

@@ -474,9 +474,6 @@ img::selection {
 .wrap_editor {
     height: 100vh;
 }
-.o_main_sidebar {
-    display: flex;
-}
 .o_editor_center {
     flex: 1 1 auto;
     outline: none;
@@ -725,6 +722,13 @@ table.table-picker {
     position: fixed !important;
 }
 
+body jw-devtools {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    z-index: 10000;
+}
+
 .oe_absolute_dropdown {
     border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
     border-radius: $o-we-sidebar-content-field-border-radius;

addons/web_editor/static/src/scss/wysiwyg_snippets.scss

@@ -4,7 +4,12 @@
 
 // OVERRIDES FOR EDITOR WITH SNIPPETS
 body.editor_enable.editor_has_snippets {
-    position: fixed;
+    padding-right: $o-we-sidebar-width !important;
+    transition: padding-right 400ms ease 0s;
+
+    #web_editor-top-edit .note-popover .popover {
+        right: $o-we-sidebar-width !important;
+    }
 
     .modal:not(.o_technical_modal) {
         top: 0 !important;
@@ -20,6 +25,34 @@ body.editor_enable.editor_has_snippets {
     }
 }
 
+.o_main_sidebar {
+    overflow: hidden;
+    display: flex;
+
+    &.o_loaded {
+        transform: none;
+        width: $o-we-sidebar-width;
+        transition: transform 400ms ease 0s !important;
+    }
+}
+.o_main_sidebar.o_website_sidebar {
+    @include o-position-absolute(0, 0, 0, auto);
+    // transition: width 400ms ease 0s !important;
+    transition: transform 400ms ease 0s;
+    transform: translateX(100%);
+    position: fixed;
+    z-index: $o-we-zindex;
+
+    overflow: hidden;
+    display: flex;
+
+    &.o_loaded {
+        transform: none;
+        width: $o-we-sidebar-width;
+        transition: transform 400ms ease 0s !important;
+    }
+}
+
 // Mobile fix for mass mailing
 @include media-breakpoint-down(md) {
     body.editor_enable.editor_has_snippets {
@@ -187,9 +220,10 @@ body.editor_enable.editor_has_snippets {
 #oe_snippets {
     @include o-w-preserve-btn;
     overflow: auto;
+
+    width: 100%;
     display: flex;
     flex-flow: column nowrap;
-    width: $o-we-sidebar-width;
 
     border-left: $o-we-sidebar-border-width solid $o-we-sidebar-border-color;
     background-color: $o-we-sidebar-bg;
@@ -198,12 +232,6 @@ body.editor_enable.editor_has_snippets {
     font-size: $o-we-sidebar-font-size;
     font-weight: 400;
 
-    transition: transform 400ms ease 0s;
-    transform: translateX(100%);
-
-    &.o_loaded {
-        transform: none;
-    }
 
     *::selection {
         background: lighten($o-we-accent, 9);
@@ -1894,9 +1922,6 @@ we-select.o_we_shape_menu {
     position: fixed;
     right: $o-we-sidebar-width;
 }
-.o_main_sidebar:not(.o_loaded) #oe_snippets {
-    display: none !important;
-}
 
 .o_we_force_no_transition {
     // Note: this is forced through a CSS class instead of inline style to avoid

addons/website/static/src/js/menu/edit.js

@@ -277,6 +277,19 @@ var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
             ],
         ]
 
+        const layoutTemplate = `
+            <t-dialog><t t-zone="default"/></t-dialog>
+            <div class="d-none"><t t-zone="tools"/></div>
+            <t-theme name="default">
+                <t t-zone="snippetManipulators"/>
+                <t t-zone="main_sidebar"/>
+                <t t-zone="main"/>
+            </t-theme>
+            <t t-zone="debug"/>
+        `;
+
+        $('#wrapwrap').attr('contenteditable', 'true');
+
         const params = {
             legacy: false,
             snippets: 'website.snippets',
@@ -289,8 +302,10 @@ var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
             discardButton: true,
             saveButton: true,
             devicePreview: true,
+            wrapMain: false,
             toolbarLayout: enableTranslation ? translationToolbar : websiteToolbar,
             location: [document.getElementById('wrapwrap'), 'replace'],
+            interface: layoutTemplate,
         };
         params.enableTranslation = enableTranslation;
 

addons/website/static/src/scss/website.edit_mode.scss

@@ -29,7 +29,7 @@ $-editor-messages-margin-x: 2%;
 
 .o_editable {
     &:not(:empty), &[data-oe-type] {
-        &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):not(.o_editable_no_shadow):hover,
+        &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover,
         &.o_editable_date_field_linked {
             box-shadow: $o-brand-odoo 0 0 5px 2px inset;
         }

addons/website/static/src/scss/website.ui.scss

@@ -9,15 +9,6 @@ body {
     // rtlcss for right-to-left text direction.
     direction: ltr;
 }
-.o_main_sidebar {
-    transition: width 400ms ease 0s !important;
-    width: 0;
-    overflow: hidden;
-    flex-shrink: 0;
-    &.o_loaded {
-        width: $o-we-sidebar-width;
-    }
-}
 body.o_connected_user {
     padding-top: $o-navbar-height!important;
 

addons/website/static/src/scss/website.wysiwyg.scss

@@ -58,10 +58,6 @@
     }
 }
 
-#oe_snippets {
-    top: $o-we-sidebar-top-height;
-}
-
 .note-statusbar {
     display: none;
 }