🐛 Refresh variable list on focus

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx

@@ -1,5 +1,5 @@
 import { Flex, Stack, useColorModeValue } from '@chakra-ui/react'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Plate, PlateProvider, usePlateEditorRef } from '@udecode/plate-core'
 import { editorStyle, platePlugins } from '@/lib/plate'
 import { BaseEditor, BaseSelection, Transforms } from 'slate'
@@ -38,17 +38,8 @@ const TextBubbleEditorContent = ({
     handler: closeEditor,
   })
 
-  useEffect(() => {
-    if (!isVariableDropdownOpen) return
-    const el = varDropdownRef.current
-    if (!el) return
-    const { top, left } = computeTargetCoord()
-    el.style.top = `${top}px`
-    el.style.left = `${left}px`
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isVariableDropdownOpen])
-
-  const computeTargetCoord = () => {
+  const computeTargetCoord = useCallback(() => {
+    if (rememberedSelection.current) return { top: 0, left: 0 }
     const selection = window.getSelection()
     const relativeParent = textEditorRef.current
     if (!selection || !relativeParent) return { top: 0, left: 0 }
@@ -59,7 +50,17 @@ const TextBubbleEditorContent = ({
       top: selectionBoundingRect.bottom - relativeRect.top,
       left: selectionBoundingRect.left - relativeRect.left,
     }
-  }
+  }, [])
+
+  useEffect(() => {
+    if (!isVariableDropdownOpen) return
+    const el = varDropdownRef.current
+    if (!el) return
+    const { top, left } = computeTargetCoord()
+    if (top === 0 && left === 0) return
+    el.style.top = `${top}px`
+    el.style.left = `${left}px`
+  }, [computeTargetCoord, isVariableDropdownOpen])
 
   const handleVariableSelected = (variable?: Variable) => {
     setIsVariableDropdownOpen(false)
@@ -110,6 +111,7 @@ const TextBubbleEditorContent = ({
           style: editorStyle(useColorModeValue('white', colors.gray[850])),
           autoFocus: true,
           onFocus: () => {
+            rememberedSelection.current = null
             if (!isFirstFocus) return
             if (editor.children.length === 0) return
             selectEditor(editor, {