Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Add clipboard copy button to modebar (fixes #6888) #7500

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.

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

Open
Harry-GNS wants to merge 2 commits into plotly:master
base: master
Choose a base branch
Loading
from Harry-GNS:add-clipboard-copy-button

Conversation

Copy link

@Harry-GNS Harry-GNS commented Jul 29, 2025

Description

This PR implements the clipboard copy functionality requested in #6888. It adds a new clipboard copy button to the modebar that allows users to copy plots directly to the system clipboard as PNG images with a single click.

This addresses the specific user need expressed by @RoyiAvital for a one-click solution to copy plot images to clipboard, similar to the existing download PNG functionality but without requiring file downloads.

Implementation Details

Following the guidance from @rmorshea's example and @alexcjohnson's suggestion that this could become a default modebar addition, this implementation leverages the modern Clipboard API for secure clipboard access while maintaining backward compatibility.

The button only appears when the browser supports the required clipboard functionality, ensuring a consistent user experience across different environments.

Changes Made

  • src/fonts/ploticon.js - Added clipboard icon SVG definition following existing icon patterns
  • src/components/modebar/buttons.js - Implemented copyToClipboard button with proper error handling
  • src/components/modebar/manage.js - Integrated button with modebar management system
  • test/jasmine/tests/modebar_test.js - Added comprehensive test coverage for all scenarios

Browser Compatibility

Addresses the browser compatibility concerns mentioned in the issue discussion. The implementation works on:

  • Chrome 76 and later
  • Firefox 87 and later
  • Safari 13.1 and later
  • Edge 79 and later

For browsers without Clipboard API support, the button gracefully does not appear, maintaining the existing user experience.

Technical Approach

The implementation follows Plotly.js architectural patterns and integrates seamlessly with the existing modebar system. When clicked, the button:

  1. Generates a high-quality PNG of the current plot using the existing toImage functionality
  2. Converts the image to a blob format compatible with the Clipboard API
  3. Creates a ClipboardItem with proper MIME type specification
  4. Writes the image data to the system clipboard

The solution includes proper error handling and logging for debugging purposes while maintaining performance.

Testing

The test suite covers all critical scenarios:

  • Button presence verification when Clipboard API is supported
  • Button absence verification when Clipboard API is not available
  • Functional testing of clipboard operations using mocked APIs
  • Error handling and edge case validation

Impact

This feature eliminates the current workaround approaches mentioned in the issue and provides users with a native, efficient way to copy plots for use in presentations, documents, and other applications. The implementation maintains full compatibility with existing functionality while adding the requested capability.

Closes #6888

RoyiAvital reacted with thumbs up emoji
Harry-GNS added 2 commits July 29, 2025 12:42
- Add copyToClipboard button that copies plot as PNG to system clipboard
- Include clipboard icon in ploticon.js SVG definitions
- Integrate button with modebar management system
- Add comprehensive test suite for clipboard functionality
- Button appears only when Clipboard API is supported by browser
- Resolves plotly#6888 
@gvwilson gvwilson added feature something new community community contribution P2 considered for next cycle labels Aug 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@emilykl emilykl Awaiting requested review from emilykl

At least 1 approving review is required to merge this pull request.

Labels
community community contribution feature something new P2 considered for next cycle
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

add a button to copy image to clipboard

AltStyle によって変換されたページ (->オリジナル) /