fix: deep merge floatingUIOptions using nested spread operators (#2310)

Author: ysds

packages/react/src/components/Comments/FloatingComposerController.tsx

@@ -47,6 +47,7 @@ export default function FloatingComposerController<
 
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
+      ...props.floatingUIOptions,
       useFloatingOptions: {
         open: !!pendingComment,
         // Needed as hooks like `useDismiss` call `onOpenChange` to change the
@@ -59,13 +60,14 @@ export default function FloatingComposerController<
         },
         placement: "bottom",
         middleware: [offset(10), shift(), flip()],
+        ...props.floatingUIOptions?.useFloatingOptions,
       },
       elementProps: {
         style: {
           zIndex: 60,
         },
+        ...props.floatingUIOptions?.elementProps,
       },
-      ...props.floatingUIOptions,
     }),
     [comments, editor, pendingComment, props.floatingUIOptions],
   );

packages/react/src/components/Comments/FloatingThreadController.tsx

@@ -40,6 +40,7 @@ export default function FloatingThreadController(props: {
 
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
+      ...props.floatingUIOptions,
       useFloatingOptions: {
         open: !!selectedThread,
         // Needed as hooks like `useDismiss` call `onOpenChange` to change the
@@ -55,13 +56,14 @@ export default function FloatingThreadController(props: {
         },
         placement: "bottom",
         middleware: [offset(10), shift(), flip()],
+        ...props.floatingUIOptions?.useFloatingOptions,
       },
       elementProps: {
         style: {
           zIndex: 30,
         },
+        ...props.floatingUIOptions?.elementProps,
       },
-      ...props.floatingUIOptions,
     }),
     [comments, editor, props.floatingUIOptions, selectedThread],
   );

packages/react/src/components/FilePanel/FilePanelController.tsx

@@ -20,6 +20,7 @@ export const FilePanelController = (props: {
 
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
+      ...props.floatingUIOptions,
       useFloatingOptions: {
         open: !!blockId,
         // Needed as hooks like `useDismiss` call `onOpenChange` to change the
@@ -34,13 +35,14 @@ export const FilePanelController = (props: {
           }
         },
         middleware: [offset(10), flip()],
+        ...props.floatingUIOptions?.useFloatingOptions,
       },
       elementProps: {
         style: {
           zIndex: 90,
         },
+        ...props.floatingUIOptions?.elementProps,
       },
-      ...props.floatingUIOptions,
     }),
     [blockId, editor, filePanel, props.floatingUIOptions],
   );

packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx

@@ -79,6 +79,7 @@ export const FormattingToolbarController = (props: {
 
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
+      ...props.floatingUIOptions,
       useFloatingOptions: {
         open: show,
         // Needed as hooks like `useDismiss` call `onOpenChange` to change the
@@ -92,13 +93,14 @@ export const FormattingToolbarController = (props: {
         },
         placement,
         middleware: [offset(10), shift(), flip()],
+        ...props.floatingUIOptions?.useFloatingOptions,
       },
       elementProps: {
         style: {
           zIndex: 40,
         },
+        ...props.floatingUIOptions?.elementProps,
       },
-      ...props.floatingUIOptions,
     }),
     [show, placement, props.floatingUIOptions, formattingToolbar.store, editor],
   );

packages/react/src/components/LinkToolbar/LinkToolbarController.tsx

@@ -111,6 +111,7 @@ export const LinkToolbarController = (props: {
 
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
+      ...props.floatingUIOptions,
       useFloatingOptions: {
         open: toolbarOpen,
         onOpenChange: (open, _event, reason) => {
@@ -136,6 +137,7 @@ export const LinkToolbarController = (props: {
         },
         placement: "top-start",
         middleware: [offset(10), flip()],
+        ...props.floatingUIOptions?.useFloatingOptions,
       },
       useHoverProps: {
         // `useHover` hook only enabled when a link is hovered with the
@@ -146,13 +148,14 @@ export const LinkToolbarController = (props: {
           close: 250,
         },
         handleClose: safePolygon(),
+        ...props.floatingUIOptions?.useHoverProps,
       },
       elementProps: {
         style: {
           zIndex: 50,
         },
+        ...props.floatingUIOptions?.elementProps,
       },
-      ...props.floatingUIOptions,
     }),
     [editor, link, props.floatingUIOptions, toolbarOpen, toolbarPositionFrozen],
   );

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

@@ -26,19 +26,22 @@ export const SideMenuController = (props: {
 
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
+      ...props.floatingUIOptions,
       useFloatingOptions: {
         open: show,
         placement: "left-start",
+        ...props.floatingUIOptions?.useFloatingOptions,
       },
       useDismissProps: {
         enabled: false,
+        ...props.floatingUIOptions?.useDismissProps,
       },
       elementProps: {
         style: {
           zIndex: 20,
         },
+        ...props.floatingUIOptions?.elementProps,
       },
-      ...props.floatingUIOptions,
     }),
     [props.floatingUIOptions, show],
   );

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

@@ -106,6 +106,7 @@ export function GridSuggestionMenuController<
 
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
+      ...props.floatingUIOptions,
       useFloatingOptions: {
         open: state?.show && state?.triggerCharacter === triggerCharacter,
         onOpenChange: (open) => {
@@ -130,15 +131,16 @@ export function GridSuggestionMenuController<
             padding: 10,
           }),
         ],
+        ...props.floatingUIOptions?.useFloatingOptions,
       },
       elementProps: {
         // Prevents editor blurring when clicking the scroll bar.
         onMouseDownCapture: (event) => event.preventDefault(),
         style: {
           zIndex: 70,
         },
+        ...props.floatingUIOptions?.elementProps,
       },
-      ...props.floatingUIOptions,
     }),
     [
       props.floatingUIOptions,

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

@@ -3,13 +3,7 @@ import {
   SuggestionMenu as SuggestionMenuExtension,
   filterSuggestionItems,
 } from "@blocknote/core/extensions";
-import {
-  UseFloatingOptions,
-  autoPlacement,
-  offset,
-  shift,
-  size,
-} from "@floating-ui/react";
+import { autoPlacement, offset, shift, size } from "@floating-ui/react";
 import { FC, useEffect, useMemo } from "react";
 
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
@@ -37,7 +31,7 @@ export function SuggestionMenuController<
     triggerCharacter: string;
     getItems?: GetItemsType;
     minQueryLength?: number;
-    floatingUIOptions?: UseFloatingOptions;
+    floatingUIOptions?: FloatingUIOptions;
   } & (ItemType<GetItemsType> extends DefaultReactSuggestionItem
     ? {
         // can be undefined
@@ -107,6 +101,7 @@ export function SuggestionMenuController<
 
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
+      ...props.floatingUIOptions,
       useFloatingOptions: {
         open: state?.show && state?.triggerCharacter === triggerCharacter,
         onOpenChange: (open) => {
@@ -131,15 +126,16 @@ export function SuggestionMenuController<
             padding: 10,
           }),
         ],
+        ...props.floatingUIOptions?.useFloatingOptions,
       },
       elementProps: {
         // Prevents editor blurring when clicking the scroll bar.
         onMouseDownCapture: (event) => event.preventDefault(),
         style: {
           zIndex: 80,
         },
+        ...props.floatingUIOptions?.elementProps,
       },
-      ...props.floatingUIOptions,
     }),
     [
       props.floatingUIOptions,

packages/xl-ai/src/components/AIMenu/AIMenuController.tsx

@@ -27,6 +27,7 @@ export const AIMenuController = (props: {
 
   const floatingUIOptions = useMemo<FloatingUIOptions>(
     () => ({
+      ...props.floatingUIOptions,
       useFloatingOptions: {
         open: aiMenuState !== "closed",
         placement: "bottom",
@@ -60,6 +61,7 @@ export const AIMenuController = (props: {
             animationFrame: true,
           });
         },
+        ...props.floatingUIOptions?.useFloatingOptions,
       },
       useDismissProps: {
         enabled:
@@ -80,13 +82,14 @@ export const AIMenuController = (props: {
 
           return true;
         },
+        ...props.floatingUIOptions?.useDismissProps,
       },
       elementProps: {
         style: {
           zIndex: 100,
         },
+        ...props.floatingUIOptions?.elementProps,
       },
-      ...props.floatingUIOptions,
     }),
     [ai, aiMenuState, blockId, props.floatingUIOptions],
   );