improve api based on feedback

Author: YousefED

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

@@ -62,6 +62,9 @@ export default function FloatingComposerController<
         middleware: [offset(10), shift(), flip()],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: false,
+      },
       elementProps: {
         style: {
           zIndex: 60,

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

@@ -58,6 +58,10 @@ export default function FloatingThreadController(props: {
         middleware: [offset(10), shift(), flip()],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 30,

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

@@ -2,12 +2,12 @@ import { FilePanelExtension } from "@blocknote/core/extensions";
 import { flip, offset } from "@floating-ui/react";
 import { FC, useMemo } from "react";
 
-import { FilePanel } from "./FilePanel.js";
-import { FilePanelProps } from "./FilePanelProps.js";
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
+import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
 import { BlockPopover } from "../Popovers/BlockPopover.js";
 import { FloatingUIOptions } from "../Popovers/FloatingUIOptions.js";
-import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
-import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
+import { FilePanel } from "./FilePanel.js";
+import { FilePanelProps } from "./FilePanelProps.js";
 
 export const FilePanelController = (props: {
   filePanel?: FC<FilePanelProps>;
@@ -37,6 +37,10 @@ export const FilePanelController = (props: {
         middleware: [offset(10), flip()],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 90,

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

@@ -95,6 +95,10 @@ export const FormattingToolbarController = (props: {
         middleware: [offset(10), shift(), flip()],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 40,

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

@@ -150,6 +150,10 @@ export const LinkToolbarController = (props: {
         handleClose: safePolygon(),
         ...props.floatingUIOptions?.useHoverProps,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 50,

packages/react/src/components/Popovers/FloatingUIOptions.ts

@@ -17,8 +17,6 @@ export type FloatingUIOptions = {
   elementProps?: HTMLAttributes<HTMLDivElement>;
   /**
    * Props to pass to the `FloatingFocusManager` component.
-   *
-   * If omitted, no `FloatingFocusManager` will be used.
    */
   focusManagerProps?: Omit<FloatingFocusManagerProps, "context" | "children">;
 };

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

@@ -176,7 +176,7 @@ export const GenericPopover = (
     );
   }
 
-  if (props.focusManagerProps) {
+  if (!props.focusManagerProps?.disabled) {
     return (
       <FloatingFocusManager {...props.focusManagerProps} context={context}>
         <div ref={mergedRefs} {...mergedProps}>

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

@@ -5,6 +5,7 @@ import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { FloatingUIOptions } from "./FloatingUIOptions.js";
 import { GenericPopover } from "./GenericPopover.js";
 
+// TODO: not used!?
 export const TableCellPopover = (
   props: FloatingUIOptions & {
     blockId: string | undefined;

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

@@ -36,6 +36,10 @@ export const SideMenuController = (props: {
         enabled: false,
         ...props.floatingUIOptions?.useDismissProps,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 20,

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

@@ -133,6 +133,10 @@ export function GridSuggestionMenuController<
         ],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         // Prevents editor blurring when clicking the scroll bar.
         onMouseDownCapture: (event) => event.preventDefault(),