feature: expose floatingOptions on react elements

Author: YousefED

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

@@ -6,7 +6,7 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import { flip, offset } from "@floating-ui/react";
+import { UseFloatingOptions, flip, offset } from "@floating-ui/react";
 import { FC } from "react";
 
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
@@ -21,6 +21,7 @@ export const FilePanelController = <
   S extends StyleSchema = DefaultStyleSchema
 >(props: {
   filePanel?: FC<FilePanelProps<I, S>>;
+  floatingOptions?: Partial<UseFloatingOptions>;
 }) => {
   const editor = useBlockNoteEditor<B, I, S>();
 
@@ -47,6 +48,7 @@ export const FilePanelController = <
           editor.focus();
         }
       },
+      ...props.floatingOptions,
     }
   );
 

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

@@ -4,7 +4,7 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import { flip, offset } from "@floating-ui/react";
+import { UseFloatingOptions, flip, offset } from "@floating-ui/react";
 import { FC, useMemo, useRef, useState } from "react";
 
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
@@ -32,6 +32,7 @@ const textAlignmentToPlacement = (
 
 export const FormattingToolbarController = (props: {
   formattingToolbar?: FC<FormattingToolbarProps>;
+  floatingOptions?: Partial<UseFloatingOptions>;
 }) => {
   const divRef = useRef<HTMLDivElement>(null);
 
@@ -87,6 +88,7 @@ export const FormattingToolbarController = (props: {
           editor.focus();
         }
       },
+      ...props.floatingOptions,
     }
   );
 

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

@@ -6,7 +6,7 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import { flip, offset } from "@floating-ui/react";
+import { UseFloatingOptions, flip, offset } from "@floating-ui/react";
 import { FC } from "react";
 
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
@@ -21,6 +21,7 @@ export const LinkToolbarController = <
   S extends StyleSchema = DefaultStyleSchema
 >(props: {
   linkToolbar?: FC<LinkToolbarProps>;
+  floatingOptions?: Partial<UseFloatingOptions>;
 }) => {
   const editor = useBlockNoteEditor<BSchema, I, S>();
 
@@ -47,6 +48,7 @@ export const LinkToolbarController = <
           editor.focus();
         }
       },
+      ...props.floatingOptions,
     }
   );
 

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

@@ -8,6 +8,7 @@ import {
 } from "@blocknote/core";
 import { FC } from "react";
 
+import { UseFloatingOptions } from "@floating-ui/react";
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useUIElementPositioning } from "../../hooks/useUIElementPositioning.js";
 import { useUIPluginState } from "../../hooks/useUIPluginState.js";
@@ -20,6 +21,7 @@ export const SideMenuController = <
   S extends StyleSchema = DefaultStyleSchema
 >(props: {
   sideMenu?: FC<SideMenuProps<BSchema, I, S>>;
+  floatingOptions?: Partial<UseFloatingOptions>;
 }) => {
   const editor = useBlockNoteEditor<BSchema, I, S>();
 
@@ -39,6 +41,7 @@ export const SideMenuController = <
     1000,
     {
       placement: "left-start",
+      ...props.floatingOptions,
     }
   );
 

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

@@ -4,7 +4,7 @@ import {
   StyleSchema,
   SuggestionMenuState,
 } from "@blocknote/core";
-import { flip, offset, size } from "@floating-ui/react";
+import { flip, offset, size, UseFloatingOptions } from "@floating-ui/react";
 import { FC, useCallback, useMemo } from "react";
 
 import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor.js";
@@ -35,6 +35,7 @@ export function GridSuggestionMenuController<
     getItems?: GetItemsType;
     columns: number;
     minQueryLength?: number;
+    floatingOptions?: Partial<UseFloatingOptions>;
   } & (ItemType<GetItemsType> extends DefaultReactGridSuggestionItem
     ? {
         // can be undefined
@@ -64,6 +65,7 @@ export function GridSuggestionMenuController<
     minQueryLength,
     onItemClick,
     getItems,
+    floatingOptions,
   } = props;
 
   const onItemClickOrDefault = useMemo(() => {
@@ -124,6 +126,7 @@ export function GridSuggestionMenuController<
           editor.suggestionMenus.closeMenu();
         }
       },
+      ...floatingOptions,
     }
   );
 

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

@@ -5,7 +5,13 @@ import {
   SuggestionMenuState,
   filterSuggestionItems,
 } from "@blocknote/core";
-import { flip, offset, shift, size } from "@floating-ui/react";
+import {
+  UseFloatingOptions,
+  flip,
+  offset,
+  shift,
+  size,
+} from "@floating-ui/react";
 import { FC, useCallback, useMemo } from "react";
 
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
@@ -32,6 +38,7 @@ export function SuggestionMenuController<
     triggerCharacter: string;
     getItems?: GetItemsType;
     minQueryLength?: number;
+    floatingOptions?: Partial<UseFloatingOptions>;
   } & (ItemType<GetItemsType> extends DefaultReactSuggestionItem
     ? {
         // can be undefined
@@ -60,6 +67,7 @@ export function SuggestionMenuController<
     minQueryLength,
     onItemClick,
     getItems,
+    floatingOptions,
   } = props;
 
   const onItemClickOrDefault = useMemo(() => {
@@ -124,6 +132,7 @@ export function SuggestionMenuController<
           editor.suggestionMenus.closeMenu();
         }
       },
+      ...floatingOptions,
     }
   );