fix: support clipboard copy in non-https contexts#55073
fix: support clipboard copy in non-https contexts#55073afc163 merged 4 commits intoant-design:nextfrom
Conversation
|
|
|
|
👁 Visual Regression Report for PR #55073 Passed ✅
🎊 Congrats! No visual-regression diff found. 
|
There was a problem hiding this comment.
Summary of Changes
Hello @JeeekXY, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request provides a critical bug fix to restore clipboard copy functionality on non-HTTPS websites. It introduces a resilient fallback strategy, allowing the system to use the legacy document.execCommand('copy') method when the modern Clipboard API is not available or fails. This ensures a consistent and reliable user experience for copying content, regardless of the security context of the website.
Highlights
- Bug Fix for Clipboard Copy on HTTP Sites: This pull request resolves an issue where clipboard copy functionality was broken on non-HTTPS (HTTP) websites. The problem arose after a previous update (PR #53427) replaced the
copy-to-clipboardlibrary with the modern Clipboard API, which is restricted to secure contexts. - Fallback Mechanism Implementation: A robust fallback mechanism has been implemented. If the Clipboard API is unavailable or fails (e.g., in an insecure HTTP context), the system will now gracefully degrade to using
document.execCommand('copy')to ensure copy functionality remains available. - Asynchronous Copy Function Updates: The core
copyutility function has been refactored to be asynchronous. Consequently, various components within the.dumitheme andtypographyhooks that utilize this function have been updated toawaitits execution, ensuring proper handling of the asynchronous operation. - Enhanced Test Coverage: New test cases have been added to
components/_util/__tests__/copy.test.tsto specifically validate theexecCommandfallback mechanism. Existing tests have also been adjusted to correctly handle the asynchronous nature of the updatedcopyfunction.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in pull request comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces a fallback mechanism for the clipboard copy functionality, ensuring it works on non-HTTPS sites by using execCommand('copy') when the modern Clipboard API is unavailable. The core copy utility has been refactored to be asynchronous, and all call sites have been updated accordingly. The changes are well-implemented and improve compatibility. I've found one potential issue in the test suite that appears to have been introduced with these changes, which could cause a test to fail.
|
All comments resolved |
More templates
commit: |
Bundle ReportChanges will increase total bundle size by 7.91MB (211.13%) ⬆️
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## next #55073 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 793 793
Lines 14614 14635 +21
Branches 3886 3889 +3
=========================================
+ Hits 14614 14635 +21 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a bug where clipboard copy functionality was broken on HTTP sites after the introduction of the Clipboard API in #53427. The solution implements a fallback mechanism that uses the older document.execCommand('copy') method when the modern Clipboard API is not available in non-secure contexts.
Key Changes
- Updated the copy utility to support both modern Clipboard API and legacy execCommand fallback
- Made the copy function asynchronous throughout the codebase
- Added comprehensive test coverage for the fallback mechanism
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
components/_util/copy.ts |
Complete rewrite to support both Clipboard API and execCommand fallback with proper error handling |
components/typography/hooks/useCopyClick.ts |
Added await to handle the now-async copy function |
components/_util/__tests__/copy.test.ts |
Updated tests to handle async copy function and added fallback scenarios |
components/typography/__tests__/copy.test.tsx |
Added sleep calls to handle async copy operations in tests |
.dumi/theme/common/Color/Palette.tsx |
Made onCopy function async to await copy operation |
.dumi/theme/common/Color/ColorBlock.tsx |
Made onCopy function async to await copy operation |
.dumi/theme/builtins/Previewer/DesignPreviewer.tsx |
Added await to copy operation |
.dumi/theme/builtins/IconSearch/CopyableIcon.tsx |
Made onCopy function async to await copy operation |
.dumi/theme/builtins/ComponentMeta/index.tsx |
Made onCopy function async to await copy operation |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
All comments resolved |
|
🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR). 🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。 
|
|
感觉太复杂了……copy本来是一个很简单的功能 |
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
Update for #53383
在 #53427 中，使用 Clipboard API 替换了
copy-to-clipboard后，HTTP 网站上的剪贴板复制功能将失效（Clipboard API 只可在安全上下文中使用）。如在 #55052 (comment) 提到的，这个 PR 是对 #55052 的完善
💡 Solution
在非安全上下文及其它不支持 Clipboard API 的环境中，将复制方案降级为 execCommand('copy') 方案
📝 Change Log