e2e component rename v3

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}

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 }
   );