Skip to content

Comments

Bug Bash: Fix Safari copy issue#489

Merged
robertjdominguez merged 2 commits intomainfrom
rob/bug-bash/fix-safari-copy-issue
Jul 16, 2024
Merged

Bug Bash: Fix Safari copy issue#489
robertjdominguez merged 2 commits intomainfrom
rob/bug-bash/fix-safari-copy-issue

Conversation

@robertjdominguez
Copy link
Collaborator

@robertjdominguez robertjdominguez commented Jul 15, 2024 •
edited
Loading

Description

This PR resolves the issue with copying on Safari. Turns out, a Docusaurus dependency has an unpatched bug. This closes hasura/graphql-engine#10341 and closes hasura/graphql-engine#10349.

DOCS-2205

Design

This PR swizzles the existing <CopyButton /> component of Docusuarus. Honestly, little code is changed, but we've swapped out the dependency on the copy-text-to-clipboard package to instead use the navigator.clipboard API, which enjoys support across all modern browsers. Why is Docusaurus using this dep? No clue.

We have a utility function that will check to ensure the API is available and then copy the passed string:

export function copyToClipboard(text: string): Promise<void> {
  // First, we'll check to make sure the clipboard API is available. If it is, copy that text.
  if (navigator.clipboard && navigator.clipboard.writeText) {
    return navigator.clipboard.writeText(text);
  } else {
    // Just in case navigator.clipboard isn't supported...which is very unlikely.
    console.log('This is a very old version of a browser.');
  }
}

Which is then used in the component via a callback:

const handleCopyCode = useCallback(async () => {
    try {
      await copyToClipboard(code);
      setIsCopied(true);
      copyTimeout.current = window.setTimeout(() => {
        setIsCopied(false);
      }, 1000);
    } catch (err) {
      console.error('Failed to copy text:', err);
      setIsCopied(false);
    }
  }, [code]);

☝️ Much of the original design here is borrowed from the ejected component via Docusaurus.

Testing

  1. Open windows for Safari, Chrome, Firefox (and any other browser you wish).
  2. Navigate to this link in each.
  3. Attempt to copy multiple code blocks / snippets from within each browser.
  4. Paste them to ensure behavior is as expected 🤞

@robertjdominguez
Bug Bash: Fix Safari copy issue
dc59803 
This PR resolves the issue with copying on Safari. Turns out, a Docusaurus dependency has an [unpatched bug](sindresorhus/copy-text-to-clipboard#47). This closes hasura/graphql-engine#10341 and closes hasura/graphql-engine#10349.
@robertjdominguez
Copy link
Collaborator Author

robertjdominguez commented Jul 15, 2024

Hey, @robertjdominguez 👋

Thanks for this PR! Since you changed docs files, our automated Action assigned Rob as your reviewer 🎉

Before Rob looks over the changes, we ask you to take care of a couple of items:

  • Make sure you've checked over our PR guide on the wiki. It ensures you've done your due diligence on the basics: spelling, heading casings, etc.
  • Rob will need a review from someone on your team to ensure your team-specific content is accurate. Once that's done, ping Rob on Slack, and he'll give a docs review 🔥
  • Additionally, please check this box to confirm your feature works as expected when using the documentation you've written. This is critical to ensuring our users have the information they need.

The docs team aims to get all PRs reviewed within 48 hours of your team doing a review in the form of a content pass. Let Rob know the level of urgency on Slack 👍

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Jul 16, 2024 •
edited
Loading

Deploying v3-docs with  Cloudflare Pages  Cloudflare Pages

Latest commit: e43561a
Status: ✅  Deploy successful!
Preview URL: https://e7ebb9f3.v3-docs-eny.pages.dev
Branch Preview URL: https://rob-bug-bash-fix-safari-copy.v3-docs-eny.pages.dev

View logs

@robertjdominguez robertjdominguez merged commit fa79286 into main Jul 16, 2024
@robertjdominguez robertjdominguez deleted the rob/bug-bash/fix-safari-copy-issue branch July 16, 2024 14:23
@slorber slorber mentioned this pull request Sep 23, 2025
Merged
@slorber
Copy link

slorber commented Sep 23, 2025

FYI we are going to use the clipboard api starting Docusaurus v3.9 so you'll be able to remove the swizzled code: facebook/docusaurus#11422

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@seanparkross seanparkross seanparkross approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

docs: copy on Apple M3 Pro is not working Docs: in-line copy feature fails on Safari

3 participants

@robertjdominguez @slorber @seanparkross