fix(tag-drop): add drag highlight and onDragLeave to Code.Container

Author: waleedlatif1

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

@@ -340,6 +340,7 @@ export function VariablesInput({
   const handleEditorDrop = (e: React.DragEvent, assignmentId: string) => {
     if (isReadOnly) return
     e.preventDefault()
+    setDragHighlight((prev) => ({ ...prev, [assignmentId]: false }))
     try {
       const data = JSON.parse(e.dataTransfer.getData('application/json'))
       if (data.type !== 'connectionBlock') return
@@ -506,9 +507,14 @@ export function VariablesInput({
 
                           return (
                             <Code.Container
-                              className='min-h-[120px]'
-                              onDragOver={(e) => e.preventDefault()}
+                              className={cn(
+                                'min-h-[120px]',
+                                dragHighlight[assignment.id] &&
+                                  'ring-2 ring-blue-500 ring-offset-2'
+                              )}
+                              onDragOver={(e) => handleDragOver(e, assignment.id)}
                               onDrop={(e) => handleEditorDrop(e, assignment.id)}
+                              onDragLeave={(e) => handleDragLeave(e, assignment.id)}
                             >
                               <Code.Gutter width={gutterWidth}>
                                 {Array.from({ length: lineCount }, (_, i) => (

apps/sim/components/emcn/components/code/code.tsx

@@ -356,6 +356,8 @@ interface CodeContainerProps {
   onDragOver?: (e: React.DragEvent) => void
   /** Drop handler */
   onDrop?: (e: React.DragEvent) => void
+  /** Drag leave handler */
+  onDragLeave?: (e: React.DragEvent) => void
 }
 
 /**
@@ -371,7 +373,14 @@ interface CodeContainerProps {
  * </Code.Container>
  * ```
  */
-function Container({ children, className, style, onDragOver, onDrop }: CodeContainerProps) {
+function Container({
+  children,
+  className,
+  style,
+  onDragOver,
+  onDrop,
+  onDragLeave,
+}: CodeContainerProps) {
   return (
     <div
       className={cn(
@@ -386,6 +395,7 @@ function Container({ children, className, style, onDragOver, onDrop }: CodeConta
       style={style}
       onDragOver={onDragOver}
       onDrop={onDrop}
+      onDragLeave={onDragLeave}
     >
       {children}
     </div>