fix(variables): fix tag dropdown and cursor alignment in variables block

Author: waleedlatif1

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

@@ -437,7 +437,7 @@ export function FieldFormat({
           <Code.Gutter width={gutterWidth}>{renderLineNumbers()}</Code.Gutter>
           <Code.Content paddingLeft={`${gutterWidth}px`}>
             <Code.Placeholder gutterWidth={gutterWidth} show={fieldValue.length === 0}>
-              {'[\n  1, 2, 3\n]'}
+              {'[1, 2, 3]'}
             </Code.Placeholder>
             <Editor
               value={fieldValue}

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

@@ -1782,7 +1782,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
                     <PopoverSection rootOnly>
                       <div className='flex items-center gap-[6px]'>
                         <TagIcon icon='V' color={BLOCK_COLORS.VARIABLE} />
-                        Variables
+                        Variable
                       </div>
                     </PopoverSection>
                     {variableTags.map((tag: string) => {

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

@@ -1,14 +1,20 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
+import 'prismjs/components/prism-json'
+import Editor from 'react-simple-code-editor'
 import {
   Badge,
   Button,
+  Code,
   Combobox,
   type ComboboxOption,
+  calculateGutterWidth,
+  getCodeEditorProps,
+  highlight,
   Input,
   Label,
-  Textarea,
+  languages,
 } from '@/components/emcn'
 import { Trash } from '@/components/emcn/icons/trash'
 import { cn } from '@/lib/core/utils/cn'
@@ -39,6 +45,8 @@ interface VariablesInputProps {
   disabled?: boolean
 }
 
+const jsonHighlight = (code: string): string => highlight(code, languages.json, 'json')
+
 const DEFAULT_ASSIGNMENT: Omit<VariableAssignment, 'id'> = {
   variableName: '',
   type: 'string',
@@ -172,6 +180,23 @@ export function VariablesInput({
     setStoreValue(assignments.map((a) => (a.id === id ? { ...a, ...updates } : a)))
   }
 
+  const updateAssignmentRef = useRef(updateAssignment)
+  updateAssignmentRef.current = updateAssignment
+
+  const editorValueChangeHandlersRef = useRef<Record<string, (newValue: string) => void>>({})
+
+  const getEditorValueChangeHandler = useCallback(
+    (assignmentId: string): ((newValue: string) => void) => {
+      if (!editorValueChangeHandlersRef.current[assignmentId]) {
+        editorValueChangeHandlersRef.current[assignmentId] = (newValue: string) => {
+          updateAssignmentRef.current(assignmentId, { value: newValue })
+        }
+      }
+      return editorValueChangeHandlersRef.current[assignmentId]
+    },
+    []
+  )
+
   const handleVariableSelect = (assignmentId: string, variableId: string) => {
     const selectedVariable = currentWorkflowVariables.find((v) => v.id === variableId)
     if (selectedVariable) {
@@ -402,70 +427,44 @@ export function VariablesInput({
                           disabled={isReadOnly}
                         />
                       ) : assignment.type === 'object' || assignment.type === 'array' ? (
-                        <div className='relative'>
-                          <Textarea
-                            ref={(el) => {
-                              if (el) valueInputRefs.current[assignment.id] = el
-                            }}
-                            value={assignment.value || ''}
-                            onChange={(e) =>
-                              handleValueInputChange(
-                                assignment.id,
-                                e.target.value,
-                                e.target.selectionStart ?? undefined
-                              )
-                            }
-                            onKeyDown={handleKeyDown}
-                            onFocus={() => {
-                              if (!isReadOnly && !assignment.value?.trim()) {
-                                setActiveFieldId(assignment.id)
-                                setCursorPosition(0)
-                                setShowTags(true)
-                              }
-                            }}
-                            onScroll={(e) => {
-                              const overlay = overlayRefs.current[assignment.id]
-                              if (overlay) {
-                                overlay.scrollTop = e.currentTarget.scrollTop
-                                overlay.scrollLeft = e.currentTarget.scrollLeft
-                              }
-                            }}
-                            placeholder={
-                              assignment.type === 'object'
-                                ? '{\n  "key": "value"\n}'
-                                : '[\n  1, 2, 3\n]'
-                            }
-                            disabled={isReadOnly}
-                            className={cn(
-                              'min-h-[120px] font-mono text-sm text-transparent caret-foreground placeholder:text-muted-foreground/50',
-                              dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
-                            )}
-                            style={{
-                              wordBreak: 'break-word',
-                              whiteSpace: 'pre-wrap',
-                            }}
-                            onDrop={(e) => handleDrop(e, assignment.id)}
-                            onDragOver={(e) => handleDragOver(e, assignment.id)}
-                            onDragLeave={(e) => handleDragLeave(e, assignment.id)}
-                          />
-                          <div
-                            ref={(el) => {
-                              if (el) overlayRefs.current[assignment.id] = el
-                            }}
-                            className={cn(
-                              'absolute inset-0 flex items-start overflow-auto bg-transparent px-3 py-2 font-mono text-sm',
-                              !isReadOnly && 'pointer-events-none'
-                            )}
-                            style={{ scrollbarWidth: 'none' }}
-                          >
-                            <div className='w-full whitespace-pre-wrap break-words'>
-                              {formatDisplayText(assignment.value || '', {
-                                accessiblePrefixes,
-                                highlightAll: !accessiblePrefixes,
-                              })}
-                            </div>
-                          </div>
-                        </div>
+                        (() => {
+                          const fieldValue = assignment.value || ''
+                          const lineCount = fieldValue.split('\n').length
+                          const gutterWidth = calculateGutterWidth(lineCount)
+
+                          return (
+                            <Code.Container className='min-h-[120px]'>
+                              <Code.Gutter width={gutterWidth}>
+                                {Array.from({ length: lineCount }, (_, i) => (
+                                  <div
+                                    key={i}
+                                    className='font-medium font-mono text-[var(--text-muted)] text-xs'
+                                    style={{ height: `${21}px`, lineHeight: `${21}px` }}
+                                  >
+                                    {i + 1}
+                                  </div>
+                                ))}
+                              </Code.Gutter>
+                              <Code.Content paddingLeft={`${gutterWidth}px`}>
+                                <Code.Placeholder
+                                  gutterWidth={gutterWidth}
+                                  show={fieldValue.length === 0}
+                                >
+                                  {assignment.type === 'object'
+                                    ? '{\n  "key": "value"\n}'
+                                    : '[1, 2, 3]'}
+                                </Code.Placeholder>
+                                <Editor
+                                  value={fieldValue}
+                                  onValueChange={getEditorValueChangeHandler(assignment.id)}
+                                  highlight={jsonHighlight}
+                                  disabled={isReadOnly}
+                                  {...getCodeEditorProps({ disabled: isReadOnly })}
+                                />
+                              </Code.Content>
+                            </Code.Container>
+                          )
+                        })()
                       ) : (
                         <div className='relative'>
                           <Input

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx

@@ -78,7 +78,7 @@ const STRINGS = {
     boolean: 'true',
     plain: 'Plain text value',
     object: '{\n  "key": "value"\n}',
-    array: '[\n  1, 2, 3\n]',
+    array: '[1, 2, 3]',
   },
   emptyState: 'No variables yet',
 }