🐛 (editor) Fix popover zIndex

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNode.tsx

@@ -37,6 +37,7 @@ import {
   useGraph,
   useBlockDnd,
   useDragDistance,
+  ParentModalProvider,
 } from '../../../providers'
 import { hasDefaultConnector } from '../../../utils'
 
@@ -239,12 +240,14 @@ export const BlockNode = ({
                 onExpandClick={handleExpandClick}
                 onBlockChange={handleBlockUpdate}
               />
-              <SettingsModal isOpen={isModalOpen} onClose={handleModalClose}>
-                <BlockSettings
-                  block={block}
-                  onBlockChange={handleBlockUpdate}
-                />
-              </SettingsModal>
+              <ParentModalProvider>
+                <SettingsModal isOpen={isModalOpen} onClose={handleModalClose}>
+                  <BlockSettings
+                    block={block}
+                    onBlockChange={handleBlockUpdate}
+                  />
+                </SettingsModal>
+              </ParentModalProvider>
             </>
           )}
           {typebot && isMediaBubbleBlock(block) && (

apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsModal.tsx

@@ -1,3 +1,4 @@
+import { useParentModal } from '@/features/graph'
 import {
   Modal,
   ModalOverlay,
@@ -20,13 +21,14 @@ export const SettingsModal = ({
   onClose,
   ...props
 }: Props & ModalBodyProps) => {
+  const { ref } = useParentModal()
   const handleMouseDown = (e: React.MouseEvent) => {
     e.stopPropagation()
   }
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
-      <ModalContent onMouseDown={handleMouseDown}>
+      <ModalContent onMouseDown={handleMouseDown} ref={ref}>
         <ModalHeader mb="2">
           <ModalCloseButton />
         </ModalHeader>

apps/builder/src/features/graph/index.ts

@@ -1,10 +1,12 @@
 export { Graph } from './components/Graph'
 export {
+  ParentModalProvider,
   GraphProvider,
   GroupsCoordinatesProvider,
   GraphDndProvider,
   type Coordinates,
   useGraph,
   useBlockDnd,
+  useParentModal,
 } from './providers'
 export { parseNewBlock } from './utils'

apps/builder/src/features/graph/providers/ParentModalProvider.tsx

@@ -0,0 +1,17 @@
+import { createContext, ReactNode, useContext, useRef } from 'react'
+
+const parentModalContext = createContext<{
+  ref?: React.MutableRefObject<HTMLDivElement | null>
+}>({})
+
+export const ParentModalProvider = ({ children }: { children: ReactNode }) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  return (
+    <parentModalContext.Provider value={{ ref }}>
+      {children}
+    </parentModalContext.Provider>
+  )
+}
+
+export const useParentModal = () => useContext(parentModalContext)

apps/builder/src/features/graph/providers/index.ts

@@ -1,3 +1,4 @@
 export * from './GraphDndProvider'
 export * from './GraphProvider'
 export * from './GroupsCoordinateProvider'
+export * from './ParentModalProvider'