Skip to content

feat: implement comprehensive copy-to-clipboard functionality #87

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Jun 7, 2025
Merged

feat: implement comprehensive copy-to-clipboard functionality #87

merged 2 commits into from
Jun 7, 2025

Conversation

nullcoder
Copy link
Owner

Summary

  • Implements comprehensive copy-to-clipboard functionality across the entire GhostPaste application
  • Adds reusable copy components with toast notifications for better user feedback
  • Closes Implement copy to clipboard functionality #59

Changes

New Features

  • Copy Utility Functions (lib/copy-to-clipboard.ts)

    • Modern Clipboard API with automatic fallback to document.execCommand
    • Retry logic for unreliable connections
    • Browser support detection with isCopySupported()
    • Specialized helpers for GhostPaste content (URLs, file content, multiple files)

  • Copy Button Components (components/ui/copy-button.tsx)

    • CopyButton - Icon-only button with visual feedback
    • CopyTextButton - Button with icon and label
    • CopyIconButton - Compact button for space-constrained layouts
    • All components include toast notifications via Sonner

  • Toast Notifications

    • Integrated Sonner for lightweight toast notifications
    • Success/error feedback for all copy operations
    • Customizable messages per component instance

Updated Components

  • ShareDialog - Replaced manual copy logic with new CopyIconButton and CopyTextButton
  • GistViewer - Added "Copy All" functionality and improved per-file copy with toast feedback
  • App Layout - Added <Toaster /> component for global toast support

Testing

  • 30 tests for copy utility functions
  • 31 tests for copy button components
  • Total: 61 new tests with 100% coverage of copy functionality

Demo

  • Created comprehensive demo page at /demo/copy-to-clipboard
  • Showcases all copy functionality, variants, and configuration options

Technical Details

  • Supports both modern browsers (Clipboard API) and legacy browsers (execCommand)
  • Handles edge cases: empty text, very long text, special characters
  • Fully accessible with proper ARIA labels and keyboard support
  • TypeScript types for all components and utilities
  • Follows existing code patterns and conventions

Screenshots

!Copy functionality demo

Test Plan

  • All 61 tests pass
  • Manual testing of copy functionality in different browsers
  • Accessibility testing with keyboard navigation
  • Visual feedback works correctly (icon changes, toasts appear)
  • Fallback works in browsers without Clipboard API support

🤖 Generated with Claude Code

@nullcoder
feat: implement comprehensive copy-to-clipboard functionality (#59)
a701e47 
- Add reusable copy utility functions with fallback support
- Create CopyButton, CopyTextButton, and CopyIconButton components
- Integrate Sonner toast notifications for user feedback
- Update ShareDialog to use new copy components
- Update GistViewer with improved copy functionality
- Add specialized helpers for GhostPaste content (URLs, files)
- Include comprehensive test coverage (61 tests total)
- Add demo page showcasing all copy functionality
- Support modern Clipboard API with legacy fallback
- Include retry logic and browser support detection

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <claude@ghostpaste.dev>
@cloudflare-workers-and-pages Cloudflare Workers and Pages
Copy link

cloudflare-workers-and-pages bot commented Jun 7, 2025 •
edited
Loading

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs		 ghostpaste 7a4a8df Visit preview Jun 07 2025, 06:28 AM

@nullcoder
fix: resolve SSR hydration errors in copy-to-clipboard demo
7a4a8df 
- Add proper typeof checks for window, navigator, and document
- Use useEffect for client-side copy support detection
- Add loading state while checking browser capabilities
- Prevent 'window is not defined' errors during server-side rendering
@nullcoder nullcoder merged commit d38c50a into main Jun 7, 2025
1 check passed
@nullcoder nullcoder deleted the feat/copy-to-clipboard branch June 7, 2025 06:29
nullcoder added a commit that referenced this pull request Jun 7, 2025
@nullcoder
docs: update tracking after PR #87 merge
f27deac
nullcoder added a commit that referenced this pull request Jun 7, 2025
@nullcoder
docs: update tracking after PR #87 merge (#88)
8e23ffb
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Implement copy to clipboard functionality
1 participant
@nullcoder