Add keyboard shortcuts display and copy-to-clipboard with visual feedback for Image Beautifier#1
Conversation
Co-authored-by: dipeshsingh253 <84814627+dipeshsingh253@users.noreply.github.com>
Co-authored-by: dipeshsingh253 <84814627+dipeshsingh253@users.noreply.github.com>
Co-authored-by: dipeshsingh253 <84814627+dipeshsingh253@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Implements keyboard shortcuts for switching tools and adds a “Copy to clipboard” action to the Image Beautifier preview, improving navigation and image export UX.
Changes:
- Sidebar now displays keyboard shortcut hints (tooltips when collapsed and inline “⌃N” labels when expanded), with shortcut keys derived from tool order.
- App-wide keydown handler updated to correctly support Ctrl/Cmd + 1–9 and 0 for switching between tools in a fixed order.
- Image Beautifier gains a “Copy” button that uses the Clipboard API to copy the rendered canvas as a PNG to the clipboard, alongside the existing download button.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/components/Sidebar/Sidebar.tsx | Adds index-based shortcut key mapping and visual indicators for Ctrl+1–9 / 0 tool switching in the sidebar UI. |
| src/components/ImageBeautifier/ImageBeautifier.tsx | Introduces a canvas-to-clipboard flow and a Copy button in the preview toolbar to complement the existing Download functionality. |
| src/App.tsx | Updates the global keyboard handler to correctly interpret Ctrl/Cmd + number keys and map them to the corresponding tool IDs. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (!navigator.clipboard || !ClipboardItem) { | ||
| alert('Copy to clipboard is not supported in this browser. Please use the Download button instead.'); | ||
| return; | ||
| } | ||
|
|
||
| const canvas = canvasRef.current; | ||
|
|
||
| // Convert canvas to blob using Promise-based approach | ||
| const blob = await new Promise<Blob | null>((resolve) => { | ||
| canvas.toBlob((blob) => resolve(blob), 'image/png'); | ||
| }); | ||
|
|
||
| if (!blob) { | ||
| throw new Error('Failed to create blob from canvas'); | ||
| } | ||
|
|
||
| // Use Clipboard API to copy the image | ||
| await navigator.clipboard.write([ | ||
| new ClipboardItem({ | ||
| 'image/png': blob | ||
| }) | ||
| ]); |
There was a problem hiding this comment.
The feature detection for the Clipboard API can throw a ReferenceError in browsers that don’t define ClipboardItem, because referencing ClipboardItem directly in the if (!navigator.clipboard || !ClipboardItem) check will fail before the fallback alert runs. To make this compatibility check robust, gate access to ClipboardItem via window/globalThis (for example by checking 'ClipboardItem' in window or window.ClipboardItem) and only construct a new ClipboardItem(...) after that check passes, so unsupported browsers don’t throw before you can show the intended "not supported" message.
There was a problem hiding this comment.
Fixed in commit 9dcee73. Changed both the compatibility check (line 100) and the ClipboardItem instantiation (line 118) to use window.ClipboardItem instead of direct reference, preventing ReferenceError in browsers where ClipboardItem is not defined.
…browsers Co-authored-by: dipeshsingh253 <84814627+dipeshsingh253@users.noreply.github.com>
|
@copilot when we click on the newly introduced copy button in image beautifier tool it should also do some indication, that yeah your image is copied. |
Co-authored-by: dipeshsingh253 <84814627+dipeshsingh253@users.noreply.github.com>
Added visual feedback in commit be8bcaf. When the copy button is clicked, it now displays "Copied!" with a checkmark icon for 2 seconds before reverting back to "Copy". The button also changes to a brighter green color (#2ea043) during the copied state. Before clicking: After clicking (shows "Copied!" for 2 seconds): |
Implementation Complete ✅
Features Implemented
1. Keyboard Shortcuts (Ctrl+1-9, Ctrl+0)
2. Copy Button in Image Beautifier
window.ClipboardItemTechnical Changes
copiedstate to track copy successQuality Checks
Screenshots
Sidebar with keyboard shortcuts:
Copy button - Before clicking:
Copy button - After clicking (shows "Copied!" feedback):
Recent Updates
window.ClipboardIteminstead of direct reference to prevent ReferenceError in browsers where ClipboardItem is not definedOriginal prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.