fix(variables): add drag-and-drop and tag dropdown support to code editor

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx

@@ -102,6 +102,7 @@ export function VariablesInput({
   const [activeSourceBlockId, setActiveSourceBlockId] = useState<string | null>(null)
   const valueInputRefs = useRef<Record<string, HTMLInputElement | HTMLTextAreaElement>>({})
   const overlayRefs = useRef<Record<string, HTMLDivElement>>({})
+  const editorContainerRefs = useRef<Record<string, HTMLDivElement | null>>({})
   const [dragHighlight, setDragHighlight] = useState<Record<string, boolean>>({})
   const [collapsedAssignments, setCollapsedAssignments] = useState<Record<string, boolean>>({})
 
@@ -190,6 +191,26 @@ export function VariablesInput({
       if (!editorValueChangeHandlersRef.current[assignmentId]) {
         editorValueChangeHandlersRef.current[assignmentId] = (newValue: string) => {
           updateAssignmentRef.current(assignmentId, { value: newValue })
+
+          const container = editorContainerRefs.current[assignmentId]
+          const textarea = container?.querySelector('textarea')
+          if (textarea) {
+            const pos = textarea.selectionStart
+            setCursorPosition(pos)
+            setActiveFieldId(assignmentId)
+
+            const tagTrigger = checkTagTrigger(newValue, pos)
+            setShowTags(tagTrigger.show)
+            if (tagTrigger.show) {
+              const textBeforeCursor = newValue.slice(0, pos)
+              const lastOpenBracket = textBeforeCursor.lastIndexOf('<')
+              const tagContent = textBeforeCursor.slice(lastOpenBracket + 1)
+              const dotIndex = tagContent.indexOf('.')
+              setActiveSourceBlockId(dotIndex > 0 ? tagContent.slice(0, dotIndex) : null)
+            } else {
+              setActiveSourceBlockId(null)
+            }
+          }
         }
       }
       return editorValueChangeHandlersRef.current[assignmentId]
@@ -215,16 +236,27 @@ export function VariablesInput({
     const assignment = assignments.find((a) => a.id === activeFieldId)
     const originalValue = assignment?.value || ''
     const textAfterCursor = originalValue.slice(cursorPosition)
+    const isCodeEditor = assignment?.type === 'object' || assignment?.type === 'array'
 
     updateAssignment(activeFieldId, { value: newValue })
     setShowTags(false)
 
     setTimeout(() => {
-      const inputEl = valueInputRefs.current[activeFieldId]
-      if (inputEl) {
-        inputEl.focus()
-        const newCursorPos = newValue.length - textAfterCursor.length
-        inputEl.setSelectionRange(newCursorPos, newCursorPos)
+      const newCursorPos = newValue.length - textAfterCursor.length
+      if (isCodeEditor) {
+        const container = editorContainerRefs.current[activeFieldId]
+        const textarea = container?.querySelector('textarea')
+        if (textarea) {
+          textarea.focus()
+          textarea.selectionStart = newCursorPos
+          textarea.selectionEnd = newCursorPos
+        }
+      } else {
+        const inputEl = valueInputRefs.current[activeFieldId]
+        if (inputEl) {
+          inputEl.focus()
+          inputEl.setSelectionRange(newCursorPos, newCursorPos)
+        }
       }
     }, 10)
   }
@@ -298,6 +330,39 @@ export function VariablesInput({
     setDragHighlight((prev) => ({ ...prev, [assignmentId]: false }))
   }
 
+  const handleEditorDrop = (e: React.DragEvent, assignmentId: string) => {
+    if (isReadOnly) return
+    e.preventDefault()
+    try {
+      const data = JSON.parse(e.dataTransfer.getData('application/json'))
+      if (data.type !== 'connectionBlock') return
+
+      const container = editorContainerRefs.current[assignmentId]
+      const textarea = container?.querySelector('textarea')
+      const assignment = assignments.find((a) => a.id === assignmentId)
+      const currentValue = assignment?.value || ''
+      const dropPosition = textarea?.selectionStart ?? currentValue.length
+      const newValue = `${currentValue.slice(0, dropPosition)}<${currentValue.slice(dropPosition)}`
+
+      updateAssignment(assignmentId, { value: newValue })
+      setActiveFieldId(assignmentId)
+      setCursorPosition(dropPosition + 1)
+
+      if (data.connectionData?.sourceBlockId) {
+        setActiveSourceBlockId(data.connectionData.sourceBlockId)
+      }
+
+      setTimeout(() => {
+        if (textarea) {
+          textarea.focus()
+          textarea.selectionStart = dropPosition + 1
+          textarea.selectionEnd = dropPosition + 1
+          setShowTags(true)
+        }
+      }, 0)
+    } catch {}
+  }
+
   const toggleCollapse = (assignmentId: string) => {
     setCollapsedAssignments((prev) => ({
       ...prev,
@@ -433,7 +498,11 @@ export function VariablesInput({
                           const gutterWidth = calculateGutterWidth(lineCount)
 
                           return (
-                            <Code.Container className='min-h-[120px]'>
+                            <Code.Container
+                              className='min-h-[120px]'
+                              onDragOver={(e) => e.preventDefault()}
+                              onDrop={(e) => handleEditorDrop(e, assignment.id)}
+                            >
                               <Code.Gutter width={gutterWidth}>
                                 {Array.from({ length: lineCount }, (_, i) => (
                                   <div
@@ -445,7 +514,14 @@ export function VariablesInput({
                                   </div>
                                 ))}
                               </Code.Gutter>
-                              <Code.Content paddingLeft={`${gutterWidth}px`}>
+                              <Code.Content
+                                paddingLeft={`${gutterWidth}px`}
+                                editorRef={
+                                  ((el: HTMLDivElement | null) => {
+                                    editorContainerRefs.current[assignment.id] = el
+                                  }) as unknown as React.RefObject<HTMLDivElement | null>
+                                }
+                              >
                                 <Code.Placeholder
                                   gutterWidth={gutterWidth}
                                   show={fieldValue.length === 0}
@@ -461,6 +537,29 @@ export function VariablesInput({
                                   disabled={isReadOnly}
                                   {...getCodeEditorProps({ disabled: isReadOnly })}
                                 />
+                                {showTags && activeFieldId === assignment.id && (
+                                  <TagDropdown
+                                    visible={showTags}
+                                    onSelect={handleTagSelect}
+                                    blockId={blockId}
+                                    activeSourceBlockId={activeSourceBlockId}
+                                    inputValue={fieldValue}
+                                    cursorPosition={cursorPosition}
+                                    onClose={() => {
+                                      setShowTags(false)
+                                      setActiveSourceBlockId(null)
+                                    }}
+                                    inputRef={
+                                      {
+                                        current:
+                                          (editorContainerRefs.current[
+                                            assignment.id
+                                          ]?.querySelector('textarea') as HTMLTextAreaElement) ??
+                                          null,
+                                      } as React.RefObject<HTMLTextAreaElement | HTMLInputElement>
+                                    }
+                                  />
+                                )}
                               </Code.Content>
                             </Code.Container>
                           )