Skip to content

fix(theme): restore copy-text-to-clipboard as lazy fallback for non-secure contexts#11796

Merged
slorber merged 4 commits intofacebook:mainfrom
dmoranp:fix/copy-button-non-https
Mar 12, 2026
Merged

fix(theme): restore copy-text-to-clipboard as lazy fallback for non-secure contexts#11796
slorber merged 4 commits intofacebook:mainfrom
dmoranp:fix/copy-button-non-https

Conversation

@dmoranp
Copy link
Contributor

@dmoranp dmoranp commented Mar 11, 2026

Pre-flight checklist

Motivation

PR #11422 removed copy-text-to-clipboard and replaced it with navigator.clipboard, assuming broad HTTPS adoption. However, navigator.clipboard is only available in secure contexts — it is undefined in non-HTTPS environments (e.g. http://192.168.x.x:3000 on a local network), causing:

TypeError: Cannot read properties of undefined (reading 'writeText')

This PR re-introduces copy-text-to-clipboard as a lazily loaded fallback: it is only imported via dynamic import() when navigator.clipboard is unavailable, so HTTPS users pay no bundle cost.

Behavior:

  • HTTPS / localhost: uses navigator.clipboard.writeText() as before
  • non-HTTPS: lazily loads copy-text-to-clipboard and uses it as fallback
  • Errors: intentionally not caught, so they remain unhandled and can be captured by observability tools (Sentry, PostHog, etc.)

Closes #11791

Test Plan

To reproduce the bug (before fix):

  1. npm run start -- --host 0.0.0.0
  2. Access via http://192.168.x.x:3000 from another device
  3. Click copy button on any code block → crash

After fix: copy button works on both HTTP and HTTPS.

Related issues/PRs

@meta-cla meta-cla bot added the CLA Signed Signed Facebook CLA label Mar 11, 2026
@netlify
Copy link

netlify bot commented Mar 11, 2026

[V2]

Name Link
🔨 Latest commit 0421483
🔍 Latest deploy log https://app.netlify.com/projects/docusaurus-2/deploys/69b2e20f37b0cb000812bdba
😎 Deploy Preview https://deploy-preview-11796--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@dmoranp dmoranp changed the title fix(theme): hide CopyButton in non-secure contexts where clipboard API is unavailable fix(theme): restore copy-text-to-clipboard as lazy fallback for non-secure contexts Mar 11, 2026
@slorber slorber added the pr: bug fix This PR fixes a bug in a past release. label Mar 12, 2026
Copy link
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM thanks

I created a simpler abstraction and added the missing lockfile change

@slorber slorber merged commit 8a2f526 into facebook:main Mar 12, 2026
44 of 45 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CopyButton throws "Cannot read properties of undefined (reading 'writeText')" in non-HTTPS environments after 3.9.x

2 participants