Gallery has no clipboard paste support — user with a design file in their clipboard (e.g., from a screenshot tool, email attachment, or a browser drag) can't paste it into the Gallery #246

New issue

Closed

opened 2026-10-04 02:38:00 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 02:38:00 +00:00

Owner

Finding

src/pages/Gallery.tsx has:

File drop zone (onDrop={handlePageDrop} per #197)
"Upload Design" button (file picker)
But NO onPaste listener

grep -n 'onPaste\|paste' src/pages/Gallery.tsx returns 0.

A user with a PNG in their clipboard (e.g., from a screenshot tool, an email attachment preview, a "copy image" from a browser):

Switches to the Gallery
Presses Cmd+V
Nothing happens

The Workspace's clipboard paste (per #186 fix) is wired: useWorkspace listens for paste events. The Gallery's parallel is missing.

Where

Gallery: src/pages/Gallery.tsx (no paste listener)
Workspace paste: per #186 closed, the workspace has it
The clipboard event handler pattern: the workspace's useEffect with window.addEventListener('paste', ...) is the reference implementation

Suggested fix shape

Add a paste event listener to the Gallery's window:

useEffect(() => {
  const handlePaste = (e: ClipboardEvent) => {
    if (!e.clipboardData) return;
    const items = Array.from(e.clipboardData.items);
    const imageItem = items.find((item) => item.type.startsWith('image/'));
    if (!imageItem) return;
    e.preventDefault();
    const file = imageItem.getAsFile();
    if (file) handleFileUpload(file);
  };
  window.addEventListener('paste', handlePaste);
  return () => window.removeEventListener('paste', handlePaste);
}, [handleFileUpload]);

handleFileUpload is the same handler that the file picker calls — it dispatches the same flow (add the design, toast a success, navigate to the design or stay on the Gallery).

The user can now:

Take a screenshot (Cmd+Shift+4 on Mac)
Switch to the Gallery tab
Press Cmd+V
The image uploads as a new design

The same pattern as the Workspace's paste (per #186) but routed to the Gallery's design storage (instead of the workspace's image state).

Severity

Low. The user can save the clipboard image to disk and use the file picker. Power users with image-clipboard workflows notice.

Discovered by

Gap analysis (2026-10-02) of gallery upload affordances.

#186 (closed) — Workspace clipboard paste. The same pattern in a different page.
#197 (closed) — Gallery drop target. The drag-drop is in place; paste is the keyboard-driven parallel.
The editor also has no paste (per #228 family); the editor's paste would load a reference image (per #245).

## Finding `src/pages/Gallery.tsx` has: - File drop zone (`onDrop={handlePageDrop}` per #197) - "Upload Design" button (file picker) - But NO `onPaste` listener `grep -n 'onPaste\|paste' src/pages/Gallery.tsx` returns 0. A user with a PNG in their clipboard (e.g., from a screenshot tool, an email attachment preview, a "copy image" from a browser): - Switches to the Gallery - Presses Cmd+V - Nothing happens The Workspace's clipboard paste (per #186 fix) is wired: `useWorkspace` listens for paste events. The Gallery's parallel is missing. ## Where - Gallery: `src/pages/Gallery.tsx` (no paste listener) - Workspace paste: per #186 closed, the workspace has it - The clipboard event handler pattern: the workspace's `useEffect` with `window.addEventListener('paste', ...)` is the reference implementation ## Suggested fix shape Add a `paste` event listener to the Gallery's window: ```tsx useEffect(() => { const handlePaste = (e: ClipboardEvent) => { if (!e.clipboardData) return; const items = Array.from(e.clipboardData.items); const imageItem = items.find((item) => item.type.startsWith('image/')); if (!imageItem) return; e.preventDefault(); const file = imageItem.getAsFile(); if (file) handleFileUpload(file); }; window.addEventListener('paste', handlePaste); return () => window.removeEventListener('paste', handlePaste); }, [handleFileUpload]); ``` `handleFileUpload` is the same handler that the file picker calls — it dispatches the same flow (add the design, toast a success, navigate to the design or stay on the Gallery). The user can now: - Take a screenshot (Cmd+Shift+4 on Mac) - Switch to the Gallery tab - Press Cmd+V - The image uploads as a new design The same pattern as the Workspace's paste (per #186) but routed to the Gallery's design storage (instead of the workspace's image state). ## Severity Low. The user can save the clipboard image to disk and use the file picker. Power users with image-clipboard workflows notice. ## Discovered by Gap analysis (2026-10-02) of gallery upload affordances. ## Related - #186 (closed) — Workspace clipboard paste. The same pattern in a different page. - #197 (closed) — Gallery drop target. The drag-drop is in place; paste is the keyboard-driven parallel. - The editor also has no paste (per #228 family); the editor's paste would load a reference image (per #245).

Mark added the

feature-request

triage-approved

labels

2026-10-04 02:38:01 +00:00

Mark referenced this issue from a commit

2026-10-04 09:12:37 +00:00

fix(#246): Gallery clipboard paste uploads clipboard image as new design

Mark commented

2026-10-04 09:12:46 +00:00

Author

Owner

Fixed in commit 85c5970449. Added a window-level paste event listener to Gallery.tsx that turns clipboard image items into a File and feeds them through the existing importFiles pipeline (parseDesignFile + designFromFile + toast). Synthesized filename paste-<timestamp>.<ext> so the design shows up with a sensible name. Mirrors the Workspace's #186 paste pattern and parallels the Gallery's #197 drop target — paste is the keyboard-driven equivalent.

Fixed in commit 85c59704492b01203515f143c77bc962c23e0efd. Added a window-level `paste` event listener to Gallery.tsx that turns clipboard image items into a File and feeds them through the existing `importFiles` pipeline (parseDesignFile + designFromFile + toast). Synthesized filename `paste-<timestamp>.<ext>` so the design shows up with a sensible name. Mirrors the Workspace's #186 paste pattern and parallels the Gallery's #197 drop target — paste is the keyboard-driven equivalent.

Mark closed this issue

2026-10-04 09:12:50 +00:00

Mark referenced this issue

2026-10-04 11:54:56 +00:00

Gallery's 'Recently edited' sort uses editedAt but the timestamp is updated on every save — user with 50 designs can't tell which ones they've actually opened in the editor vs just saved once #263