🚸 Add a better select input

Also improves other inputs behavior

apps/builder/src/features/variables/components/VariablesButton.tsx

@@ -7,12 +7,14 @@ import {
   IconButtonProps,
   useDisclosure,
   PopoverAnchor,
+  Portal,
 } from '@chakra-ui/react'
 import { UserIcon } from '@/components/icons'
 import { Variable } from 'models'
 import React, { useRef } from 'react'
-import { VariableSearchInput } from '@/components/VariableSearchInput'
+import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
+import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
 
 type Props = {
   onSelectVariable: (variable: Pick<Variable, 'name' | 'id'>) => void
@@ -21,6 +23,7 @@ type Props = {
 export const VariablesButton = ({ onSelectVariable, ...props }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const popoverRef = useRef<HTMLDivElement>(null)
+  const { ref: parentModalRef } = useParentModal()
 
   useOutsideClick({
     ref: popoverRef,
@@ -28,7 +31,7 @@ export const VariablesButton = ({ onSelectVariable, ...props }: Props) => {
   })
 
   return (
-    <Popover isLazy placement="bottom-end" gutter={0} isOpen={isOpen}>
+    <Popover isLazy isOpen={isOpen}>
       <PopoverAnchor>
         <Flex>
           <Tooltip label="Insert a variable">
@@ -42,17 +45,19 @@ export const VariablesButton = ({ onSelectVariable, ...props }: Props) => {
           </Tooltip>
         </Flex>
       </PopoverAnchor>
-      <PopoverContent w="full" ref={popoverRef}>
-        <VariableSearchInput
-          onSelectVariable={(variable) => {
-            onClose()
-            if (variable) onSelectVariable(variable)
-          }}
-          placeholder="Search for a variable"
-          shadow="lg"
-          autoFocus
-        />
-      </PopoverContent>
+      <Portal containerRef={parentModalRef}>
+        <PopoverContent w="full" ref={popoverRef}>
+          <VariableSearchInput
+            onSelectVariable={(variable) => {
+              onClose()
+              if (variable) onSelectVariable(variable)
+            }}
+            placeholder="Search for a variable"
+            shadow="lg"
+            autoFocus
+          />
+        </PopoverContent>
+      </Portal>
     </Popover>
   )
 }

apps/builder/src/features/variables/utils/injectVariableInTextInput.ts

@@ -0,0 +1,23 @@
+import { Variable } from 'models'
+
+type Props = {
+  variable: Variable
+  text: string
+  at: number
+}
+
+export const injectVariableInText = ({
+  variable,
+  text,
+  at,
+}: Props): { text: string; carretPosition: number } => {
+  const textBeforeCursorPosition = text.substring(0, at)
+  const textAfterCursorPosition = text.substring(at, text.length)
+  const newText =
+    textBeforeCursorPosition + `{{${variable.name}}}` + textAfterCursorPosition
+  const newCarretPosition = at + `{{${variable.name}}}`.length
+  return {
+    text: newText,
+    carretPosition: newCarretPosition,
+  }
+}