From 843441893bea1668b8336bbd7dd6d59ad96523fa Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Thu, 1 May 2025 12:15:07 +0200
Subject: [PATCH] fix: [Electron Demo] - move dropzone to entire
 document/window.

---
 docz/static/electron/index.js   | 17 ++++++++---------
 docz/static/electron/main.js    |  8 +++++---
 docz/static/electron/styles.css |  8 --------
 3 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/docz/static/electron/index.js b/docz/static/electron/index.js
index 47e8a60..2bd606f 100644
--- a/docz/static/electron/index.js
+++ b/docz/static/electron/index.js
@@ -156,32 +156,31 @@ function attachDropListeners() {
     setTimeout(() => readFile(e.target.files), 0);
   });
   addListener("readBtn", "click", handleReadBtn);
-  if (!dropzone || !dropContainer) return;
   const handleDrag = (e) => {
     e.stopPropagation();
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
-    dropContainer.classList.add("drag-over");
+    document.body.classList.add("drag-over");
   };
   const handleDragLeave = (e) => {
     e.stopPropagation();
     e.preventDefault();
-    dropContainer.classList.remove("drag-over");
+    document.body.classList.remove("drag-over");
   };
-  dropzone.addEventListener(
+  document.body.addEventListener(
     "drop",
     (e) => {
       e.stopPropagation();
       e.preventDefault();
-      dropContainer.classList.remove("drag-over");
+      document.body.classList.remove("drag-over");
       readFile(e.dataTransfer.files);
     },
     false
   );
-  dropzone.addEventListener("dragenter", handleDrag, false);
-  dropzone.addEventListener("dragover", handleDrag, false);
-  dropzone.addEventListener("dragleave", handleDragLeave, false);
-  dropzone.addEventListener("dragend", handleDragLeave, false);
+  document.body.addEventListener("dragenter", handleDrag, false);
+  document.body.addEventListener("dragover", handleDrag, false);
+  document.body.addEventListener("dragleave", handleDragLeave, false);
+  document.body.addEventListener("dragend", handleDragLeave, false);
 }
 
 // --- File Reader for Drag-and-Drop and Input ---
diff --git a/docz/static/electron/main.js b/docz/static/electron/main.js
index d4df7a6..a5ed378 100644
--- a/docz/static/electron/main.js
+++ b/docz/static/electron/main.js
@@ -28,6 +28,7 @@ function firstSpreadsheetFromArgv() {
 
 /* ---- single-instance guard (needed for Windows / Linux) ---- */
 // on windows and linux, opening a file opens a new instance of the app, this prevents that.
+// https://www.electronjs.org/docs/latest/api/app#event-second-instance
 const gotLock = app.requestSingleInstanceLock();
 if (!gotLock) app.quit();
 else {
@@ -38,18 +39,19 @@ else {
   });
 }
 
-/* ---- platform-specific “open file” hooks ---- */
+/* ---- platform-specific “open file” hooks (macOS) ---- */
+// https://www.electronjs.org/docs/latest/api/app#event-open-file-macos
 app.on('open-file', (event, fp) => {                         // macOS Dock / Finder 
   event.preventDefault();
   sendToRenderer(fp);
 });
-
+// https://www.electronjs.org/docs/latest/api/app#event-open-url-macos
 app.on('open-url', (event, url) => {                         // you can add a custom protocol if you want to handle URLs
   event.preventDefault();
   sendToRenderer(url.replace('file://', ''));                // crude, adjust if you keep deep-links
 });
 
-/* ---- normal start-up, harvest argv ---- */
+/* ---- normal start-up, harvest argv (Windows & Linux) ---- */
 app.whenReady().then(() => {
   const fp = firstSpreadsheetFromArgv();  // Windows & Linux first launch
   if (fp) pendingPaths.push(fp);
diff --git a/docz/static/electron/styles.css b/docz/static/electron/styles.css
index c699ac0..af9460e 100644
--- a/docz/static/electron/styles.css
+++ b/docz/static/electron/styles.css
@@ -136,7 +136,6 @@ button:focus, input[type="submit"]:focus, input[type="file"]:focus {
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
-    border: 1px dashed var(--text-muted);
     padding: 1rem;
     width: 75%;
     max-width: 600px;
@@ -148,13 +147,6 @@ button:focus, input[type="submit"]:focus, input[type="file"]:focus {
     display: none;
 }
 
-.file-upload.drag-over {
-    border-color: var(--text-accent);
-    background-color: #e6f8ee;
-    box-shadow: 0 0 0 2px var(--text-accent);
-    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
-}
-
 #drop {
     width: 100%;
     height: 100%;