fix(ui): make readme markdown copy work in safari

[MathurAditya724]

🔗 Linked issue

Fixes #2151

🧭 Context

The "Copy as Markdown" button in the README section wasn’t working in Safari.
It could fail silently because we were waiting for an async fetch before writing to clipboard.

📚 Description

This PR makes the README copy flow more reliable in Safari:

• enabled VueUse clipboard legacy mode so it can fall back to execCommand('copy') when needed
• reuse already-fetched markdown if it exists
• only fetch markdown on click when it’s missing

Result: "Copy as Markdown" now works consistently, including Safari.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 22, 2026 7:14am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 22, 2026 7:14am
npmx-lunaria	Ignored		Mar 22, 2026 7:14am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 91127b8a-42c7-4117-9a19-93f23df7d946

📥 Commits

Reviewing files that changed from the base of the PR and between b08e2f0 and a39742e.

📒 Files selected for processing (1)

• app/pages/package/[[org]]/[name].vue

🚧 Files skipped from review as they are similar to previous changes (1)

• app/pages/package/[[org]]/[name].vue

---

📝 Walkthrough

Walkthrough

Adds a client-side conditional prefetch for README markdown (runs when readmeData.value.mdExists, status is idle, and on client) via a watch with immediate: true. Refactors README copy flow: introduces isCopyingReadme to prevent concurrent copies, uses try/finally to reset state, fetches markdown only when missing, and updates UI bindings (tooltip/icon/label/disabled/aria-busy) to reflect loading/copy states. prefetchReadmeMarkdown() now delegates to the new conditional prefetch helper instead of checking readmeMarkdownStatus === 'idle' directly.

Possibly related PRs

• fix: improve conditions for missed payload case #1648: Modifies readme fetching and prefetch/fetch conditions in the same app/pages/package/[[org]]/[name].vue component.
• feat: add copy readme as markdown button on package page #1058: Changes the README "copy as Markdown" feature and related UI/clipboard logic in the same component and data structures.
• perf: load markdown source code on copy instead of on main request #1386: Introduces markdown-on-copy and prefetch behaviour that this PR further adjusts (lazy-fetch, prefetch and copy flow).

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the Safari clipboard issue and describes the implemented solutions (legacy mode, markdown reuse, conditional fetch).
Linked Issues check	✅ Passed	The PR addresses issue #2151 by enabling clipboard legacy mode fallback, reusing fetched markdown, and conditionally fetching on click, which resolves the Safari synchronous clipboard write requirement.
Out of Scope Changes check	✅ Passed	All changes are scoped to README markdown copy functionality and directly address the Safari clipboard timing issue without introducing unrelated modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

❌ Patch coverage is 0% with 22 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/package/[[org]]/[name].vue	0.00%	15 Missing and 7 partials ⚠️

📢 Thoughts on this report? Let us know!

[ghostdevv]

I tried this out in a webkit based browser and it didn't work for me, but that kinda seems like it makes sense since there is still an async action happening. There is this blog post that seems promising, but I haven't managed to get it to work so far - will try again later

https://wolfgangrittner.dev/how-to-use-clipboard-api-in-safari/

[MathurAditya724]

I re-tested this on WebKit/Safari with the latest changes and it now works reliably, including the first click after navigation. I added a loading state + markdown prefetch, and kept the clipboard legacy fallback. Here’s a quick demo -

Screen.Recording.2026-03-22.at.12.34.08.PM.mp4