Skip to content

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
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

Harry-GNS
Copy link

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

- 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 requested a review from emilykl August 1, 2025 15:31
@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
Labels
community community contribution feature something new P2 considered for next cycle
Projects
None yet
Development

Successfully merging this pull request may close these issues.

add a button to copy image to clipboard
3 participants