Skip to content

fix: preserve styles on drag/drop and paste image replace#64

Closed
boraoztunc wants to merge 1 commit intoKartikLabhshetwar:mainfrom
boraoztunc:fix/drag-drop-image-replace
Closed

fix: preserve styles on drag/drop and paste image replace#64
boraoztunc wants to merge 1 commit intoKartikLabhshetwar:mainfrom
boraoztunc:fix/drag-drop-image-replace

Conversation

@boraoztunc
Copy link
Copy Markdown

Description

Fixes a UX bug where dragging or pasting a new image onto the canvas after the first upload would open it in the browser's new tab instead of swapping it in the editor.

Changes

  • lib/store/index.ts — new replaceImage action that swaps the image URL/name only, leaving all applied styles (shadow, border, background, 3D, overlays, etc.) completely untouched
  • components/canvas/EditorCanvas.tsx — global dragover/dragleave/drop and document paste listeners active only while an image is loaded; listeners are cleaned up on unmount
  • components/canvas/EditorCanvas.tsx — drop overlay UI showing "Drop to replace image / Your styles will be preserved" while a file is being dragged over the canvas
  • lib/r2.ts — simplified getR2PublicUrl to always return the same-origin /r2-assets/ proxy path; missing NEXT_PUBLIC_R2_PUBLIC_URL env var now fails gracefully via onError rather than crashing
  • .gitignore — added .claude/ to keep local Claude Code settings out of version control
  • CLAUDE.md — added project context file for contributors using Claude Code

Type of Change

  • Bug fix (drag/drop/paste opening images in new tab)
  • New feature (replaceImage store action)

Testing

  • Drag a new image onto the canvas after first upload — browser no longer opens it in a new tab; styles are preserved
  • Paste an image via Ctrl+V — styles preserved, no new tab
  • Drop overlay appears while dragging and dismisses correctly on drop or drag-leave
  • TypeScript compiles without errors
  • No new lint errors introduced (all pre-existing)

Checklist

  • Code follows project style guidelines
  • Self-review completed
  • No new warnings generated

- Add replaceImage store action — swaps URL/name only, all styles untouched
- Intercept window drag/drop and document paste globally in EditorCanvas
  when an image is loaded, preventing the browser from opening files in a
  new tab and preserving all applied styles on swap
- Show drop overlay ("Drop to replace image / Your styles will be preserved")
  while a file is being dragged over the canvas
- Simplify getR2PublicUrl to always return the same-origin /r2-assets/ proxy
  path; missing env var now fails gracefully via onError rather than crashing
- Add .claude/ to .gitignore to keep local Claude Code settings out of VCS
- Add CLAUDE.md with project context for contributors using Claude Code

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 3, 2026

@boraoztunc is attempting to deploy a commit to the vercel oss program Team on Vercel.

A member of the Team first needs to authorize it.

@boraoztunc
Copy link
Copy Markdown
Author

Hey @KartikLabhshetwar let me know what do you think of this.

@boraoztunc boraoztunc closed this Mar 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant