From 4e876de458eeedcc529b7ca3bf5fae1066c5bf28 Mon Sep 17 00:00:00 2001
From: trueheads <awnyrs1@gmail.com>
Date: Mon, 22 Dec 2025 08:16:07 -0600
Subject: [PATCH] e2e component rename v3

---
 apps/ui/src/components/views/context-view.tsx | 27 +++++++++++++++
 apps/ui/tests/utils/files/drag-drop.ts        | 34 ++++++++++++-------
 2 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/apps/ui/src/components/views/context-view.tsx b/apps/ui/src/components/views/context-view.tsx
index 99ab5155..1ea9c06e 100644
--- a/apps/ui/src/components/views/context-view.tsx
+++ b/apps/ui/src/components/views/context-view.tsx
@@ -1000,6 +1000,33 @@ export function ContextView() {
                 id="markdown-content"
                 value={newMarkdownContent}
                 onChange={(e) => setNewMarkdownContent(e.target.value)}
+                onDrop={async (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+
+                  // Try files first, then items for better compatibility
+                  let files = Array.from(e.dataTransfer.files);
+                  if (files.length === 0 && e.dataTransfer.items) {
+                    const items = Array.from(e.dataTransfer.items);
+                    files = items
+                      .filter((item) => item.kind === 'file')
+                      .map((item) => item.getAsFile())
+                      .filter((f): f is globalThis.File => f !== null);
+                  }
+
+                  const mdFile = files.find((f) => isMarkdownFile(f.name));
+                  if (mdFile) {
+                    const content = await mdFile.text();
+                    setNewMarkdownContent(content);
+                    if (!newMarkdownName.trim()) {
+                      setNewMarkdownName(mdFile.name);
+                    }
+                  }
+                }}
+                onDragOver={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
                 placeholder="Enter your markdown content here..."
                 className="w-full h-60 p-3 font-mono text-sm bg-background border border-border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
                 spellCheck={false}
diff --git a/apps/ui/tests/utils/files/drag-drop.ts b/apps/ui/tests/utils/files/drag-drop.ts
index 1250f5b2..2b3416df 100644
--- a/apps/ui/tests/utils/files/drag-drop.ts
+++ b/apps/ui/tests/utils/files/drag-drop.ts
@@ -19,19 +19,29 @@ export async function simulateFileDrop(
       const dataTransfer = new DataTransfer();
       dataTransfer.items.add(file);
 
+      // Create events and explicitly define the dataTransfer property
+      // to ensure it's accessible (some browsers don't properly set it from constructor)
+      const dragOverEvent = new DragEvent('dragover', {
+        bubbles: true,
+        cancelable: true,
+      });
+      Object.defineProperty(dragOverEvent, 'dataTransfer', {
+        value: dataTransfer,
+        writable: false,
+      });
+
+      const dropEvent = new DragEvent('drop', {
+        bubbles: true,
+        cancelable: true,
+      });
+      Object.defineProperty(dropEvent, 'dataTransfer', {
+        value: dataTransfer,
+        writable: false,
+      });
+
       // Dispatch drag events
-      target.dispatchEvent(
-        new DragEvent('dragover', {
-          dataTransfer,
-          bubbles: true,
-        })
-      );
-      target.dispatchEvent(
-        new DragEvent('drop', {
-          dataTransfer,
-          bubbles: true,
-        })
-      );
+      target.dispatchEvent(dragOverEvent);
+      target.dispatchEvent(dropEvent);
     },
     { selector: targetSelector, content: fileContent, name: fileName, mime: mimeType }
   );