menu positioning fixes

Author: YousefED

examples/09-ai/03-custom-ai-menu-items/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-ai-ai-menu-items",
+  "name": "@blocknote/example-ai-custom-ai-menu-items",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

packages/react/src/hooks/useUIElementPositioning.ts

@@ -22,6 +22,7 @@ type UIElementPosition = {
   getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
   getReferenceProps: ReturnType<typeof useInteractions>["getReferenceProps"];
   setReference: ReturnType<typeof useFloating>["refs"]["setReference"];
+  isPositioned: boolean;
 };
 
 export function useUIElementPositioning(
@@ -32,7 +33,7 @@ export function useUIElementPositioning(
     UseFloatingOptions & { canDismiss: boolean | UseDismissProps }
   >,
 ): UIElementPosition {
-  const { refs, update, context, floatingStyles } = useFloating({
+  const { refs, update, context, floatingStyles, isPositioned } = useFloating({
     open: show,
     ...options,
   });
@@ -84,8 +85,10 @@ export function useUIElementPositioning(
       },
       getFloatingProps,
       getReferenceProps,
+      isPositioned,
     };
   }, [
+    isPositioned,
     floatingStyles,
     isMounted,
     refs.setFloating,

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

@@ -18,6 +18,9 @@ export const AIMenuController = (props: { aiMenu?: FC<AIMenuProps> }) => {
 
   return (
     <BlockPositioner
+      canDismissViaOutsidePress={
+        aiMenuState === "closed" || aiMenuState.status === "user-input"
+      }
       blockID={blockId}
       onOpenChange={(open) => {
         if (open || aiMenuState === "closed") {

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

@@ -10,6 +10,7 @@ export const BlockPositioner = (props: {
     event: Event,
     reason: OpenChangeReason,
   ) => void;
+  canDismissViaOutsidePress?: boolean;
 }) => {
   const element = props.blockID
     ? document.querySelector(`[data-id="${props.blockID}"]`)
@@ -21,28 +22,20 @@ export const BlockPositioner = (props: {
     return element
       ? {
           getBoundingClientRect: () => {
-            // console.log(
-            //   "getBoundingClientRect",
-            //   element.getBoundingClientRect()
-            // );
             return element.getBoundingClientRect();
           },
           contextElement: element,
         }
       : null;
   }, [element]);
 
-  const { isMounted, ref, style, getFloatingProps } = useUIElementPositioning(
-    element ? true : false,
-    reference,
-    3000,
-    {
+  const { isMounted, ref, style, getFloatingProps, isPositioned } =
+    useUIElementPositioning(element ? true : false, reference, 3000, {
       canDismiss: {
         enabled: true,
         escapeKey: true,
-        outsidePress: false,
+        outsidePress: props.canDismissViaOutsidePress,
       },
-      // canDismiss: false,
       placement: "bottom",
       middleware: [
         offset(10),
@@ -62,8 +55,7 @@ export const BlockPositioner = (props: {
         });
         return cleanup;
       },
-    },
-  );
+    });
 
   if (!isMounted) {
     return null;
@@ -77,7 +69,7 @@ export const BlockPositioner = (props: {
       }}
       {...getFloatingProps()}
     >
-      {props.children}
+      {isPositioned && props.children}
     </div>
   );
 };

playground/src/examples.gen.tsx

@@ -1442,9 +1442,9 @@
         }
       },
       {
-        "projectSlug": "ai-menu-items",
-        "fullSlug": "ai/ai-menu-items",
-        "pathFromRoot": "examples/09-ai/03-ai-menu-items",
+        "projectSlug": "custom-ai-menu-items",
+        "fullSlug": "ai/custom-ai-menu-items",
+        "pathFromRoot": "examples/09-ai/03-custom-ai-menu-items",
         "config": {
           "playground": true,
           "docs": true,