Add clipboard copy button to modebar (fixes #6888) #7500
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
Browser Compatibility
Addresses the browser compatibility concerns mentioned in the issue discussion. The implementation works on:
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:
The solution includes proper error handling and logging for debugging purposes while maintaining performance.
Testing
The test suite covers all critical scenarios:
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