[FIX] web: NO SQUASH, position and scrolling issue

[FIX] html_editor (position and scrolling issue)

DO NOT SQUASH: very specific fix for overlay_buttons_plugin move on scroll

[FIX] fixed the scroll offset

Author: abd-msyukyu-odoo

addons/html_builder/static/src/sidebar/block_tab.js

@@ -218,6 +218,7 @@ export class BlockTab extends Component {
             el: this.blockTabRef.el,
             elements: ".o_snippet.o_draggable",
             scrollingElement,
+            externalScroll: () => Boolean(this.props.getExternalScrollableAncestor?.()),
             handle: ".o_snippet_thumbnail:not(.o_we_ongoing_insertion .o_snippet_thumbnail)",
             dropzones: () => dropzoneEls,
             helper: ({ element, helperOffset }) => {

addons/html_editor/static/src/core/overlay_plugin.js

@@ -2,7 +2,7 @@ import { markRaw, EventBus } from "@odoo/owl";
 import { Plugin } from "../plugin";
 import { EditorOverlay } from "./overlay";
 import { throttleForAnimation } from "@web/core/utils/timing";
-import { findUpTo } from "@html_editor/utils/dom_traversal";
+import { closestScrollableY } from "@web/core/utils/scrolling";
 
 /**
  * @typedef { Object } OverlayShared
@@ -56,14 +56,7 @@ export class OverlayPlugin extends Plugin {
     }
 
     getScrollContainer() {
-        const isScrollable = (element) =>
-            element.scrollHeight > element.clientHeight &&
-            ["auto", "scroll"].includes(getComputedStyle(element).overflowY);
-
-        return (
-            findUpTo(this.iframe || this.editable, null, isScrollable) ||
-            this.topDocument.documentElement
-        );
+        return closestScrollableY(this.iframe || this.editable) || this.topDocument.documentElement;
     }
 }
 

addons/html_editor/static/src/utils/drag_and_drop.js

@@ -102,6 +102,7 @@ const dragAndDropHookParams = {
         scrollingElement: [Function],
         helper: [Function],
         extraWindow: [Object, Function],
+        externalScroll: [Function],
     },
     edgeScrolling: { enabled: true },
     onComputeParams({ ctx, params }) {
@@ -110,10 +111,18 @@ const dragAndDropHookParams = {
         ctx.getScrollingElement = params.scrollingElement;
         ctx.getHelper = params.helper;
         ctx.getDropZones = params.dropzones;
+        ctx.hasExternalScroll = params.externalScroll;
     },
     onWillStartDrag: ({ ctx }) => {
         ctx.current.container = ctx.getScrollingElement();
-        ctx.current.helperOffset = { x: 0, y: 0 };
+        ctx.current.hasExternalScroll = ctx.hasExternalScroll();
+        ctx.current.helperOffset = {
+            x: 0,
+            y: 0,
+            originalScrollTop: ctx.current.hasExternalScroll
+                ? ctx.getScrollingElement().scrollTop
+                : 0,
+        };
     },
     onDragStart: ({ ctx, addStyle, addCleanup }) => {
         // Use the helper as the tracking element to properly update scroll values.
@@ -145,10 +154,12 @@ const dragAndDropHookParams = {
         updateElementPosition(ctx.current.helper, ctx.pointer, addStyle, ctx.current.helperOffset);
         // Unfortunately, DOMRect is not an Object, so spreading operator from
         // `touching` does not work, so convert DOMRect to plain object.
+        const scrollOffset =
+            ctx.current.container.scrollTop - ctx.current.helperOffset.originalScrollTop;
         let helperRect = ctx.current.helper.getBoundingClientRect();
         helperRect = {
             x: helperRect.x,
-            y: helperRect.y,
+            y: helperRect.y + (ctx.current.hasExternalScroll ? scrollOffset : 0),
             width: helperRect.width,
             height: helperRect.height,
         };

addons/mass_mailing_egg/static/src/iframe/mass_mailing_iframe.js

@@ -289,6 +289,7 @@ export class MassMailingIframe extends Component {
             // Plugins => provide plugins selection, properly filter excluded Plugins
             isMobile: this.state.isMobile,
             toggleMobile: () => {
+                this.iframeRef.el.contentDocument.body.scrollTop = 0;
                 this.state.isMobile = !this.state.isMobile;
                 this.throttledResize();
             },

addons/web/static/src/core/position/position_hook.js

@@ -97,10 +97,15 @@ export function usePosition(refName, getTarget, options = {}) {
             const targetDocument = getTarget()?.ownerDocument;
             targetDocument?.addEventListener("scroll", scrollListener, { capture: true });
             targetDocument?.addEventListener("load", throttledUpdate, { capture: true });
+            const containerDocument = options.container?.()?.ownerDocument;
+            containerDocument?.addEventListener("scroll", scrollListener, { capture: true });
+            containerDocument?.addEventListener("load", throttledUpdate, { capture: true });
             window.addEventListener("resize", throttledUpdate);
             return () => {
                 targetDocument?.removeEventListener("scroll", scrollListener, { capture: true });
                 targetDocument?.removeEventListener("load", throttledUpdate, { capture: true });
+                containerDocument?.removeEventListener("scroll", scrollListener, { capture: true });
+                containerDocument?.removeEventListener("load", throttledUpdate, { capture: true });
                 window.removeEventListener("resize", throttledUpdate);
             };
         }