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

[waleedlatif1]

Summary

• Rename tag dropdown header from "Variables" to "Variable" to match variable. tag prefix — fixes dropdown disappearing when typing <variables
• Replace Textarea + overlay with Code editor for array/object value fields in variables block — fixes cursor misalignment
• Simplify array placeholder to [1, 2, 3] across variables and input-format

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Feb 11, 2026 10:32pm

[greptile-apps]

Greptile Overview

Greptile Summary

Fixed tag dropdown behavior and cursor alignment issues in variables block by renaming dropdown header to match tag prefix and migrating array/object fields to Code editor.

Key changes:

• Renamed tag dropdown header from "Variables" to "Variable" to align with variable. tag prefix syntax
• Replaced Textarea+overlay implementation with Code editor for array/object value fields to fix cursor misalignment
• Added complete drag-and-drop support including onDragLeave handler for visual feedback consistency
• Implemented stable ref patterns with useCallback for editor refs and value change handlers
• Simplified array placeholder to [1, 2, 3] across multiple components for consistency
• Added TagDropdown support within Code editor for array/object fields with proper ref handling

Confidence Score: 4/5

• Safe to merge with minor style improvement suggested
• The PR successfully addresses the stated bugs with well-structured code. One minor style suggestion about ref sync pattern that doesn't affect functionality. Previous review concerns about drag-drop and ref handling have been properly addressed.
• No files require special attention - all changes are straightforward and well-implemented

Important Files Changed

Filename	Overview
apps/sim/components/emcn/components/code/code.tsx	Added onDragLeave prop to Code.Container for complete drag-and-drop support
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx	Replaced Textarea with Code editor for array/object fields, added drag-drop support and stable ref patterns; ref sync pattern doesn't follow hook guidelines

Sequence Diagram

sequenceDiagram
    participant User
    participant VariablesInput
    participant CodeEditor
    participant TagDropdown
    
    User->>VariablesInput: Type in array/object field
    VariablesInput->>CodeEditor: getEditorValueChangeHandler(assignmentId)
    CodeEditor->>CodeEditor: onChange triggered
    CodeEditor->>VariablesInput: newValue passed to handler
    VariablesInput->>VariablesInput: updateAssignmentRef.current(id, {value})
    VariablesInput->>CodeEditor: Query textarea for cursor position
    CodeEditor-->>VariablesInput: selectionStart position
    VariablesInput->>VariablesInput: checkTagTrigger(newValue, pos)
    alt Tag trigger detected
        VariablesInput->>TagDropdown: setShowTags(true) with textarea ref
        TagDropdown-->>User: Display tag suggestions
        User->>TagDropdown: Select tag
        TagDropdown->>VariablesInput: handleTagSelect(tag)
        VariablesInput->>CodeEditor: Insert tag at cursor position
    end
    
    User->>CodeEditor: Drag tag into field
    CodeEditor->>VariablesInput: onDrop event
    VariablesInput->>VariablesInput: handleEditorDrop(e, assignmentId)
    VariablesInput->>CodeEditor: Insert '<' and set cursor
    VariablesInput->>TagDropdown: setShowTags(true)
    TagDropdown-->>User: Display tag suggestions

Loading

[greptile-apps]

_{4 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (1)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
valueInputRefs and overlayRefs are no longer populated for array/object type fields. Check that tag dropdown and other features that rely on these refs still work correctly for all field types.

[waleedlatif1]

@cursor review
@greptile

[greptile-apps]

_{4 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[waleedlatif1]

@greptile

[greptile-apps]

_{4 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[waleedlatif1]

@cursor review
@greptile

[greptile-apps]

_{5 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}