fix: hide side menu on scroll instead of overflow hacks

docs/app/styles.css

@@ -53,14 +53,6 @@ body {
   box-shadow: unset !important;
 }
 
-.demo {
-  overflow: none;
-}
-
-.demo .bn-container {
-  position: relative;
-}
-
 .demo .bn-container:not(.bn-comment-editor),
 .demo .bn-editor {
   height: 100%;

packages/core/src/extensions/SideMenu/SideMenu.ts

@@ -784,5 +784,17 @@ export const SideMenuExtension = createExtension(({ editor }) => {
       view!.state!.show = false;
       view!.emitUpdate(view!.state!);
     },
+
+    /**
+     * Hides the side menu unless it is currently frozen (e.g. the drag
+     * handle menu is open). Used to dismiss the menu on scroll without
+     * interfering with open submenus.
+     */
+    hideMenuIfNotFrozen() {
+      if (!view!.menuFrozen && view!.state!.show) {
+        view!.state!.show = false;
+        view!.emitUpdate(view!.state!);
+      }
+    },
   } as const;
 });

packages/react/src/components/Popovers/GenericPopover.tsx

@@ -3,6 +3,7 @@ import {
   FloatingFocusManager,
   useDismiss,
   useFloating,
+  UseFloatingOptions,
   useHover,
   useInteractions,
   useMergeRefs,
@@ -77,15 +78,48 @@ export function getMountedBoundingClientRectCache(
   };
 }
 
+/**
+ * Merges two `whileElementsMounted` handlers into one. Both run when elements
+ * mount, and both cleanup functions are called on unmount.
+ */
+function mergeWhileElementsMounted(
+  a: UseFloatingOptions["whileElementsMounted"],
+  b: UseFloatingOptions["whileElementsMounted"],
+): UseFloatingOptions["whileElementsMounted"] {
+  if (!a) {
+    return b;
+  }
+  if (!b) {
+    return a;
+  }
+
+  return (reference, floating, update) => {
+    const cleanupA = a(reference, floating, update);
+    const cleanupB = b(reference, floating, update);
+    return () => {
+      cleanupA?.();
+      cleanupB?.();
+    };
+  };
+}
+
 export const GenericPopover = (
   props: FloatingUIOptions & {
     reference?: GenericPopoverReference;
     children: ReactNode;
   },
 ) => {
+  const {
+    whileElementsMounted: _whileElementsMounted,
+    ...restFloatingOptions
+  } = props.useFloatingOptions ?? {};
+
   const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({
-    whileElementsMounted: autoUpdate,
-    ...props.useFloatingOptions,
+    whileElementsMounted: mergeWhileElementsMounted(
+      autoUpdate,
+      props.useFloatingOptions?.whileElementsMounted,
+    ),
+    ...restFloatingOptions,
   });
 
   const { isMounted, styles } = useTransitionStyles(

packages/react/src/components/SideMenu/SideMenuController.tsx

@@ -1,6 +1,8 @@
 import { SideMenuExtension } from "@blocknote/core/extensions";
-import { FC, useMemo } from "react";
+import { autoUpdate, ReferenceElement } from "@floating-ui/react";
+import { FC, useCallback, useMemo } from "react";
 
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useExtensionState } from "../../hooks/useExtension.js";
 import { BlockPopover } from "../Popovers/BlockPopover.js";
 import { FloatingUIOptions } from "../Popovers/FloatingUIOptions.js";
@@ -11,6 +13,7 @@ export const SideMenuController = (props: {
   sideMenu?: FC<SideMenuProps>;
   floatingUIOptions?: Partial<FloatingUIOptions>;
 }) => {
+  const editor = useBlockNoteEditor();
   const state = useExtensionState(SideMenuExtension, {
     selector: (state) => {
       return state !== undefined
@@ -24,12 +27,45 @@ export const SideMenuController = (props: {
 
   const { show, block } = state || {};
 
+  // Hides the side menu on ancestor scroll so it doesn't overflow outside
+  // the editor's scroll container.
+  const whileElementsMounted = useCallback(
+    (
+      reference: ReferenceElement,
+      floating: HTMLElement,
+      _update: () => void,
+    ) => {
+      let initialized = false;
+      return autoUpdate(
+        reference,
+        floating,
+        () => {
+          if (!initialized) {
+            // autoUpdate calls this function once when the floating element is mounted
+            // we don't want to hide the menu in that case
+            initialized = true;
+            return;
+          }
+          editor.getExtension(SideMenuExtension)?.hideMenuIfNotFrozen();
+        },
+        {
+          ancestorScroll: true,
+          ancestorResize: false,
+          elementResize: false,
+          layoutShift: false,
+        },
+      );
+    },
+    [editor],
+  );
+
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
       ...props.floatingUIOptions,
       useFloatingOptions: {
         open: show,
         placement: "left-start",
+        whileElementsMounted,
         ...props.floatingUIOptions?.useFloatingOptions,
       },
       useDismissProps: {
@@ -47,7 +83,7 @@ export const SideMenuController = (props: {
         ...props.floatingUIOptions?.elementProps,
       },
     }),
-    [props.floatingUIOptions, show],
+    [props.floatingUIOptions, show, whileElementsMounted],
   );
 
   const Component = props.sideMenu || SideMenu;