fix: Suggestion menu overflow issue

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

@@ -8,10 +8,20 @@ import {
   autoUpdate,
   useHover,
 } from "@floating-ui/react";
-import { HTMLAttributes, ReactNode, useEffect, useRef } from "react";
+import {
+  createContext,
+  HTMLAttributes,
+  ReactNode,
+  useEffect,
+  useRef,
+} from "react";
 
 import { FloatingUIOptions } from "./FloatingUIOptions.js";
 
+export const GenericPopoverUpdateContext = createContext<
+  (() => void) | undefined
+>(undefined);
+
 export type GenericPopoverReference =
   | {
       // A DOM element to use as the reference element for the popover.
@@ -81,10 +91,12 @@ export const GenericPopover = (
     children: ReactNode;
   },
 ) => {
-  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({
-    whileElementsMounted: autoUpdate,
-    ...props.useFloatingOptions,
-  });
+  const { refs, floatingStyles, context, update } = useFloating<HTMLDivElement>(
+    {
+      whileElementsMounted: autoUpdate,
+      ...props.useFloatingOptions,
+    },
+  );
 
   const { isMounted, styles } = useTransitionStyles(
     context,
@@ -167,17 +179,21 @@ export const GenericPopover = (
     // should be open. So without this fix, the popover just won't transition
     // out and will instead appear to hide instantly.
     return (
-      <div
-        ref={mergedRefs}
-        {...mergedProps}
-        dangerouslySetInnerHTML={{ __html: innerHTML.current }}
-      />
+      <GenericPopoverUpdateContext value={update}>
+        <div
+          ref={mergedRefs}
+          {...mergedProps}
+          dangerouslySetInnerHTML={{ __html: innerHTML.current }}
+        />
+      </GenericPopoverUpdateContext>
     );
   }
 
   return (
-    <div ref={mergedRefs} {...mergedProps}>
-      {props.children}
-    </div>
+    <GenericPopoverUpdateContext value={update}>
+      <div ref={mergedRefs} {...mergedProps}>
+        {props.children}
+      </div>
+    </GenericPopoverUpdateContext>
   );
 };

packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx

@@ -1,6 +1,6 @@
 import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
 import { SuggestionMenu } from "@blocknote/core/extensions";
-import { autoPlacement, offset, shift, size } from "@floating-ui/react";
+import { flip, offset, shift, size } from "@floating-ui/react";
 import { FC, useEffect, useMemo } from "react";
 
 import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor.js";
@@ -119,14 +119,14 @@ export function GridSuggestionMenuController<
           offset(10),
           // Flips the menu placement to maximize the space available, and prevents
           // the menu from being cut off by the confines of the screen.
-          autoPlacement({
-            allowedPlacements: ["bottom-start", "top-start"],
+          flip({
+            crossAxis: false,
             padding: 10,
           }),
           shift(),
           size({
             apply({ elements, availableHeight }) {
-              elements.floating.style.maxHeight = `${Math.max(0, availableHeight)}px`;
+              elements.floating.style.maxHeight = `${Math.min(600, availableHeight)}px`;
             },
             padding: 10,
           }),

packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuWrapper.tsx

@@ -1,8 +1,9 @@
 import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
-import { FC, useCallback, useEffect } from "react";
+import { FC, useCallback, useContext, useEffect } from "react";
 
 import { useBlockNoteContext } from "../../../editor/BlockNoteContext.js";
 import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor.js";
+import { GenericPopoverUpdateContext } from "../../Popovers/GenericPopover.js";
 import { useCloseSuggestionMenuNoItems } from "../hooks/useCloseSuggestionMenuNoItems.js";
 import { useLoadSuggestionMenuItems } from "../hooks/useLoadSuggestionMenuItems.js";
 import { useGridSuggestionMenuKeyboardNavigation } from "./hooks/useGridSuggestionMenuKeyboardNavigation.js";
@@ -49,6 +50,17 @@ export function GridSuggestionMenuWrapper<Item>(props: {
     getItems,
   );
 
+  // If this component is used inside a `GenericPopover`, the position of the
+  // popover should be recalculated once all the items are fetched. This is
+  // because it may need to resize/shift/flip if the height of the suggestion
+  // menu with all items is too tall and overflows.
+  const update = useContext(GenericPopoverUpdateContext);
+  useEffect(() => {
+    update?.();
+  }, [loadingState, update]);
+
+  useCloseSuggestionMenuNoItems(items, usedQuery, closeMenu);
+
   useCloseSuggestionMenuNoItems(items, usedQuery, closeMenu);
 
   const { selectedIndex } = useGridSuggestionMenuKeyboardNavigation(

packages/react/src/components/SuggestionMenu/SuggestionMenuController.tsx

@@ -3,7 +3,7 @@ import {
   SuggestionMenu as SuggestionMenuExtension,
   filterSuggestionItems,
 } from "@blocknote/core/extensions";
-import { autoPlacement, offset, shift, size } from "@floating-ui/react";
+import { flip, offset, shift, size } from "@floating-ui/react";
 import { FC, useEffect, useMemo } from "react";
 
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
@@ -114,14 +114,14 @@ export function SuggestionMenuController<
           offset(10),
           // Flips the menu placement to maximize the space available, and prevents
           // the menu from being cut off by the confines of the screen.
-          autoPlacement({
-            allowedPlacements: ["bottom-start", "top-start"],
+          flip({
+            crossAxis: false,
             padding: 10,
           }),
           shift(),
           size({
             apply({ elements, availableHeight }) {
-              elements.floating.style.maxHeight = `${Math.max(0, availableHeight)}px`;
+              elements.floating.style.maxHeight = `${Math.min(600, availableHeight)}px`;
             },
             padding: 10,
           }),

packages/react/src/components/SuggestionMenu/SuggestionMenuWrapper.tsx

@@ -1,8 +1,9 @@
 import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
-import { FC, useCallback, useEffect } from "react";
+import { FC, useCallback, useContext, useEffect } from "react";
 
 import { useBlockNoteContext } from "../../editor/BlockNoteContext.js";
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
+import { GenericPopoverUpdateContext } from "../Popovers/GenericPopover.js";
 import { useCloseSuggestionMenuNoItems } from "./hooks/useCloseSuggestionMenuNoItems.js";
 import { useLoadSuggestionMenuItems } from "./hooks/useLoadSuggestionMenuItems.js";
 import { useSuggestionMenuKeyboardNavigation } from "./hooks/useSuggestionMenuKeyboardNavigation.js";
@@ -47,6 +48,15 @@ export function SuggestionMenuWrapper<Item>(props: {
     getItems,
   );
 
+  // If this component is used inside a `GenericPopover`, the position of the
+  // popover should be recalculated once all the items are fetched. This is
+  // because it may need to resize/shift/flip if the height of the suggestion
+  // menu with all items is too tall and overflows.
+  const update = useContext(GenericPopoverUpdateContext);
+  useEffect(() => {
+    update?.();
+  }, [loadingState, update]);
+
   useCloseSuggestionMenuNoItems(items, usedQuery, closeMenu);
 
   const { selectedIndex } = useSuggestionMenuKeyboardNavigation(