Merge branch 'main' of github.com:TypeCellOS/BlockNote

Author: YousefED

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

@@ -27,6 +27,7 @@ export type GenericPopoverReference =
       cacheMountedBoundingClientRect?: boolean;
     }
   | {
+      element: undefined;
       // When no reference element is provided, this can be provided as an
       // alternative "virtual" element to position the popover around.
       getBoundingClientRect: () => DOMRect;
@@ -62,7 +63,7 @@ export function getMountedBoundingClientRectCache(
 
   return () => {
     if (
-      "element" in reference &&
+      reference.element &&
       (reference.cacheMountedBoundingClientRect ?? true)
     ) {
       if (reference.element.isConnected) {

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

@@ -9,7 +9,10 @@ import {
   useExtensionState,
 } from "../../../hooks/useExtension.js";
 import { FloatingUIOptions } from "../../Popovers/FloatingUIOptions.js";
-import { GenericPopover } from "../../Popovers/GenericPopover.js";
+import {
+  GenericPopover,
+  GenericPopoverReference,
+} from "../../Popovers/GenericPopover.js";
 import { getDefaultReactEmojiPickerItems } from "./getDefaultReactEmojiPickerItems.js";
 import { GridSuggestionMenu } from "./GridSuggestionMenu.js";
 import { GridSuggestionMenuWrapper } from "./GridSuggestionMenuWrapper.js";
@@ -95,13 +98,16 @@ export function GridSuggestionMenuController<
 
   const state = useExtensionState(SuggestionMenu);
   const reference = useExtensionState(SuggestionMenu, {
-    selector: (state) => ({
-      // Use first child as the editor DOM element may itself be scrollable.
-      // For FloatingUI to auto-update the position during scrolling, the
-      // `contextElement` must be a descendant of the scroll container.
-      element: editor.domElement?.firstChild || undefined,
-      getBoundingClientRect: () => state?.referencePos || new DOMRect(),
-    }),
+    selector: (state) =>
+      ({
+        // Use first child as the editor DOM element may itself be scrollable.
+        // For FloatingUI to auto-update the position during scrolling, the
+        // `contextElement` must be a descendant of the scroll container.
+        element: (editor.domElement?.firstChild || undefined) as
+          | Element
+          | undefined,
+        getBoundingClientRect: () => state?.referencePos || new DOMRect(),
+      }) satisfies GenericPopoverReference,
   });
 
   const floatingUIOptions = useMemo<FloatingUIOptions>(

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

@@ -9,7 +9,10 @@ import { FC, useEffect, useMemo } from "react";
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
 import { FloatingUIOptions } from "../Popovers/FloatingUIOptions.js";
-import { GenericPopover } from "../Popovers/GenericPopover.js";
+import {
+  GenericPopover,
+  GenericPopoverReference,
+} from "../Popovers/GenericPopover.js";
 import { SuggestionMenu } from "./SuggestionMenu.js";
 import { SuggestionMenuWrapper } from "./SuggestionMenuWrapper.js";
 import { getDefaultReactSlashMenuItems } from "./getDefaultReactSlashMenuItems.js";
@@ -90,13 +93,16 @@ export function SuggestionMenuController<
 
   const state = useExtensionState(SuggestionMenuExtension);
   const reference = useExtensionState(SuggestionMenuExtension, {
-    selector: (state) => ({
-      // Use first child as the editor DOM element may itself be scrollable.
-      // For FloatingUI to auto-update the position during scrolling, the
-      // `contextElement` must be a descendant of the scroll container.
-      element: editor.domElement?.firstChild || undefined,
-      getBoundingClientRect: () => state?.referencePos || new DOMRect(),
-    }),
+    selector: (state) =>
+      ({
+        // Use first child as the editor DOM element may itself be scrollable.
+        // For FloatingUI to auto-update the position during scrolling, the
+        // `contextElement` must be a descendant of the scroll container.
+        element: (editor.domElement?.firstChild || undefined) as
+          | Element
+          | undefined,
+        getBoundingClientRect: () => state?.referencePos || new DOMRect(),
+      }) satisfies GenericPopoverReference,
   });
 
   const floatingUIOptions = useMemo<FloatingUIOptions>(