@huaqiu/component-gen-app 0.4.7 → 0.4.9

package/dist/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>华秋 Component Gen</title>
-    <script type="module" crossorigin src="./assets/index-t51t_a62.js"></script>
+    <script type="module" crossorigin src="./assets/index-BnNwBC2r.js"></script>
   </head>
   <body>
     <div id="root"></div>

package/lib/index.js

@@ -337,6 +337,81 @@ function translateFor(lang) {
 /** zh-only fallback (used when no locale is supplied). */
 const defaultT = (key, params) => translate("zh", key, params);
 //#endregion
+//#region src/utils/drag.ts
+/**
+* `@huaqiu/component-gen-app` — page-level drag-state interop.
+*
+* The app is rendered inside hosts that own a *page-wide* file drop target
+* (dsh's attachment plugin listens on `document` for dragenter/dragover/
+* dragleave/drop and paints a full-screen "drop to attach" invitation). Two
+* properties of that pattern matter to any nested drop zone:
+*
+*  - `dragover` writes `dataTransfer.dropEffect = 'none'` whenever the host
+*    refuses the drop (no session, composer busy, …). `dropEffect` lives on the
+*    drag data store shared by the whole drag, so the host's verdict outranks
+*    the nested zone's: Chromium then cancels the drag operation and the `drop`
+*    event is never dispatched anywhere on the page. The nested zone is dead
+*    even though its own `dragover` called `preventDefault()`.
+*  - The host counts dragenter/dragleave to drive that invitation, and only
+*    clears the counter from its own `drop`, `dragleave`, or window `dragend`.
+*    A drag of OS files fires **no** `dragend` ("dragstart and dragend are not
+*    fired when dragging a file into the browser from the OS" — MDN, File drag
+*    and drop), so a nested zone that swallows the drop leaves the host's
+*    invitation dimming the screen forever.
+*
+* A nested zone therefore has to do two things: keep its own drag events to
+* itself (`stopPropagation`, done by the drop zone) and tell the page when the
+* drag has moved onto it / been consumed, which is what this module is for.
+*/
+/**
+* Broadcast "this file drag is no longer yours" to page-wide drop targets.
+*
+* Dispatched on `document.body` with a Files-carrying `dataTransfer`, which is
+* the shape page-wide drop targets test for, and at the viewport origin, which
+* is how they recognise "the pointer left the page" and drop their drag state.
+* Holding a page-wide target's enter/leave counter at zero while the pointer is
+* over our own drop zone is also what lets the zone be seen: dsh's invitation
+* paints a blurred full-viewport mask, and it is the host's own handler that
+* has to take it back down.
+*
+* Idempotent and a no-op in hosts without a page-wide drop target (the
+* standalone build, SSR, environments without `DataTransfer`).
+*/
+function releasePageDragState() {
+	if (typeof document === "undefined" || !document.body) return;
+	const event = new Event("dragleave", {
+		bubbles: true,
+		cancelable: true
+	});
+	Object.assign(event, {
+		clientX: 0,
+		clientY: 0,
+		dataTransfer: dragStateTransfer()
+	});
+	document.body.dispatchEvent(event);
+}
+/** Minimal Files payload page-wide drop targets recognise. */
+function dragStateTransfer() {
+	try {
+		const transfer = new DataTransfer();
+		transfer.items.add(new File([], "drag-state"));
+		return transfer;
+	} catch {
+		return { types: ["Files"] };
+	}
+}
+/**
+* True when a drag carries files (as opposed to text or an in-page element
+* being dragged). Guards the drag-state broadcast so text drags over the
+* upload zone do not disturb hosts tracking their own drags.
+*/
+function dragHasFiles(dataTransfer) {
+	if (!dataTransfer) return false;
+	const types = dataTransfer.types;
+	if (!types) return false;
+	return Array.from(types).some((type) => type === "Files" || type === "application/x-moz-file");
+}
+//#endregion
 //#region src/components/UploadInput.tsx
 /**
 * `@huaqiu/component-gen-app` — image upload control (click + paste + drag).
@@ -344,6 +419,13 @@ const defaultT = (key, params) => translate("zh", key, params);
 * Reads a file, downscales it to a thumbnail data URL if needed (bounded by
 * `maxBytes`), and reports both the original file and the data URL to the
 * parent. The parent owns sending it to the server.
+*
+* Drag-and-drop note: the zone has to *claim* the drag. Hosts that install a
+* page-wide file drop target (dsh's attachment plugin does) otherwise either
+* cancel the drag outright — their `dragover` writes `dropEffect = 'none'` into
+* the shared drag data store, which stops `drop` from ever being dispatched —
+* or take the dropped file for themselves at document level. See
+* `utils/drag.ts` for the full mechanism.
 */
 const MAX_EDGE = 1600;
 /** Downscale an image file to a data URL bounded in edge + bytes. */
@@ -391,6 +473,7 @@ function UploadInput(props) {
 	const inputRef = useRef(null);
 	const [dragging, setDragging] = useState(false);
 	const [error, setError] = useState(null);
+	const dragDepth = useRef(0);
 	const accept = useCallback(async (f) => {
 		if (!f) return;
 		if (f.size > maxBytes) {
@@ -409,19 +492,44 @@ function UploadInput(props) {
 		onFile,
 		t
 	]);
+	/** Keep a drag event away from page-wide drop targets (see the module docs). */
+	const claim = (ev) => {
+		ev.stopPropagation();
+	};
+	/** The drag now belongs to the page again — let its drop targets resume. */
+	const release = (ev) => {
+		if (dragHasFiles(ev.dataTransfer)) releasePageDragState();
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: `cga-upload${dragging ? " cga-upload--dragging" : ""}`,
 		onClick: () => {
 			if (!disabled) inputRef.current?.click();
 		},
+		onDragEnter: (ev) => {
+			ev.preventDefault();
+			claim(ev);
+			dragDepth.current += 1;
+			if (dragDepth.current === 1) {
+				setDragging(true);
+				release(ev);
+			}
+		},
 		onDragOver: (ev) => {
 			ev.preventDefault();
+			claim(ev);
+			if (ev.dataTransfer) ev.dataTransfer.dropEffect = disabled ? "none" : "copy";
 			if (!disabled) setDragging(true);
 		},
-		onDragLeave: () => setDragging(false),
+		onDragLeave: (ev) => {
+			dragDepth.current = Math.max(0, dragDepth.current - 1);
+			if (dragDepth.current === 0) setDragging(false);
+		},
 		onDrop: (ev) => {
 			ev.preventDefault();
+			claim(ev);
+			dragDepth.current = 0;
 			setDragging(false);
+			release(ev);
 			if (disabled) return;
 			accept(ev.dataTransfer.files?.[0] ?? null);
 		},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huaqiu/component-gen-app",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "type": "module",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",

package/src/components/UploadInput.tsx

@@ -4,9 +4,17 @@
  * Reads a file, downscales it to a thumbnail data URL if needed (bounded by
  * `maxBytes`), and reports both the original file and the data URL to the
  * parent. The parent owns sending it to the server.
+ *
+ * Drag-and-drop note: the zone has to *claim* the drag. Hosts that install a
+ * page-wide file drop target (dsh's attachment plugin does) otherwise either
+ * cancel the drag outright — their `dragover` writes `dropEffect = 'none'` into
+ * the shared drag data store, which stops `drop` from ever being dispatched —
+ * or take the dropped file for themselves at document level. See
+ * `utils/drag.ts` for the full mechanism.
  */
-import { useCallback, useRef, useState, type ReactElement } from 'react'
+import { useCallback, useRef, useState, type DragEvent as ReactDragEvent, type ReactElement } from 'react'
 import type { Translate } from '../copy/index.js'
+import { dragHasFiles, releasePageDragState } from '../utils/drag.js'
 
 export interface UploadInputProps {
   maxBytes: number
@@ -58,6 +66,10 @@ export function UploadInput(props: UploadInputProps): ReactElement {
   const inputRef = useRef<HTMLInputElement | null>(null)
   const [dragging, setDragging] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  // Enter/leave counter instead of a boolean: the browser fires dragenter and
+  // dragleave for *every* element transition inside the zone, so a boolean
+  // flickers off whenever the pointer crosses the label, thumbnail or button.
+  const dragDepth = useRef(0)
 
   const accept = useCallback(async (f: File | null): Promise<void> => {
     if (!f) return
@@ -74,15 +86,54 @@ export function UploadInput(props: UploadInputProps): ReactElement {
     }
   }, [maxBytes, onFile, t])
 
+  /** Keep a drag event away from page-wide drop targets (see the module docs). */
+  const claim = (ev: ReactDragEvent<HTMLDivElement>): void => {
+    ev.stopPropagation()
+  }
+
+  /** The drag now belongs to the page again — let its drop targets resume. */
+  const release = (ev: ReactDragEvent<HTMLDivElement>): void => {
+    if (dragHasFiles(ev.dataTransfer)) releasePageDragState()
+  }
+
   return (
     <div
       className={`cga-upload${dragging ? ' cga-upload--dragging' : ''}`}
       onClick={() => { if (!disabled) inputRef.current?.click() }}
-      onDragOver={(ev) => { ev.preventDefault(); if (!disabled) setDragging(true) }}
-      onDragLeave={() => setDragging(false)}
+      onDragEnter={(ev) => {
+        ev.preventDefault()
+        claim(ev)
+        dragDepth.current += 1
+        if (dragDepth.current === 1) {
+          setDragging(true)
+          // Take the page's drag state down with us: while the file is over the
+          // zone the host's full-viewport drop invitation must not cover it.
+          release(ev)
+        }
+      }}
+      onDragOver={(ev) => {
+        ev.preventDefault()
+        claim(ev)
+        // Our verdict, not the host's: a 'none' written by a document-level
+        // handler reaches the drag data store too, and the browser cancels the
+        // whole drag when the last word on it was 'none'.
+        if (ev.dataTransfer) ev.dataTransfer.dropEffect = disabled ? 'none' : 'copy'
+        if (!disabled) setDragging(true)
+      }}
+      onDragLeave={(ev) => {
+        // Not claimed: the host's own enter/leave accounting stays balanced
+        // when the file is dragged back out of the zone.
+        dragDepth.current = Math.max(0, dragDepth.current - 1)
+        if (dragDepth.current === 0) setDragging(false)
+      }}
       onDrop={(ev) => {
         ev.preventDefault()
+        // Claimed for good: the host must not also attach this file to its own
+        // draft (the point of the drop is the generator, not the composer).
+        claim(ev)
+        dragDepth.current = 0
         setDragging(false)
+        release(ev)
         if (disabled) return
         void accept(ev.dataTransfer.files?.[0] ?? null)
       }}

package/src/utils/drag.ts

@@ -0,0 +1,72 @@
+/**
+ * `@huaqiu/component-gen-app` — page-level drag-state interop.
+ *
+ * The app is rendered inside hosts that own a *page-wide* file drop target
+ * (dsh's attachment plugin listens on `document` for dragenter/dragover/
+ * dragleave/drop and paints a full-screen "drop to attach" invitation). Two
+ * properties of that pattern matter to any nested drop zone:
+ *
+ *  - `dragover` writes `dataTransfer.dropEffect = 'none'` whenever the host
+ *    refuses the drop (no session, composer busy, …). `dropEffect` lives on the
+ *    drag data store shared by the whole drag, so the host's verdict outranks
+ *    the nested zone's: Chromium then cancels the drag operation and the `drop`
+ *    event is never dispatched anywhere on the page. The nested zone is dead
+ *    even though its own `dragover` called `preventDefault()`.
+ *  - The host counts dragenter/dragleave to drive that invitation, and only
+ *    clears the counter from its own `drop`, `dragleave`, or window `dragend`.
+ *    A drag of OS files fires **no** `dragend` ("dragstart and dragend are not
+ *    fired when dragging a file into the browser from the OS" — MDN, File drag
+ *    and drop), so a nested zone that swallows the drop leaves the host's
+ *    invitation dimming the screen forever.
+ *
+ * A nested zone therefore has to do two things: keep its own drag events to
+ * itself (`stopPropagation`, done by the drop zone) and tell the page when the
+ * drag has moved onto it / been consumed, which is what this module is for.
+ */
+
+/**
+ * Broadcast "this file drag is no longer yours" to page-wide drop targets.
+ *
+ * Dispatched on `document.body` with a Files-carrying `dataTransfer`, which is
+ * the shape page-wide drop targets test for, and at the viewport origin, which
+ * is how they recognise "the pointer left the page" and drop their drag state.
+ * Holding a page-wide target's enter/leave counter at zero while the pointer is
+ * over our own drop zone is also what lets the zone be seen: dsh's invitation
+ * paints a blurred full-viewport mask, and it is the host's own handler that
+ * has to take it back down.
+ *
+ * Idempotent and a no-op in hosts without a page-wide drop target (the
+ * standalone build, SSR, environments without `DataTransfer`).
+ */
+export function releasePageDragState(): void {
+  if (typeof document === 'undefined' || !document.body) return
+  // A plain `Event` carrying the same shape, so this works in every engine
+  // (notably jsdom, which implements neither `DragEvent` nor `DataTransfer`).
+  const event = new Event('dragleave', { bubbles: true, cancelable: true })
+  Object.assign(event, { clientX: 0, clientY: 0, dataTransfer: dragStateTransfer() })
+  document.body.dispatchEvent(event)
+}
+
+/** Minimal Files payload page-wide drop targets recognise. */
+function dragStateTransfer(): unknown {
+  try {
+    const transfer = new DataTransfer()
+    // The `types` list only reports `Files` once a file is actually held.
+    transfer.items.add(new File([], 'drag-state'))
+    return transfer
+  } catch {
+    return { types: ['Files'] }
+  }
+}
+
+/**
+ * True when a drag carries files (as opposed to text or an in-page element
+ * being dragged). Guards the drag-state broadcast so text drags over the
+ * upload zone do not disturb hosts tracking their own drags.
+ */
+export function dragHasFiles(dataTransfer: DataTransfer | null | undefined): boolean {
+  if (!dataTransfer) return false
+  const types = dataTransfer.types
+  if (!types) return false
+  return Array.from(types).some((type) => type === 'Files' || type === 'application/x-moz-file')
+}