feat: add copy file contents button to code preview top bar

[mikouaji]

🔗 Linked issue

resolves #1690

🧭 Context

Added a copy/copied button that uses existing patterns and translation strings to copy currently viewed file contents to clipboard.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 27, 2026 10:28pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 27, 2026 10:28pm
npmx-lunaria	Ignored		Feb 27, 2026 10:28pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request modifies the package code viewer component to add clipboard functionality for copying file contents. A new clipboard instance and copied state are introduced to track the copy operation. A button is added to the UI that triggers the file content copy action when a file is being viewed. The button displays dynamic messaging and icons to reflect whether the content has been copied, utilising a 2000 millisecond feedback window consistent with the existing copy permalink functionality. The implementation adds 17 lines of code with no modifications to exported or public API signatures.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset by describing the addition of a copy button for file contents in the code preview, matching the implementation summary.
Linked Issues check	✅ Passed	The PR successfully implements the core requirement from issue #1690 to add a copy button to the code viewer, allowing users to copy displayed file contents.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objective of adding a copy button for file contents, with no extraneous modifications detected.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[coderabbitai]

🧹 Nitpick comments (1)

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue (1)

482-493: Minor consistency tweaks for the copy button.

The implementation is functional. A few small suggestions for consistency:

1. Icon choice: Consider using i-lucide:copy or i-lucide:clipboard instead of i-lucide:file — these more clearly convey a "copy" action.
2. Styling consistency: The adjacent "Copy link" button (line 477) has active:scale-95 for press feedback, but this button omits it. The capitalize class is also unique to this button.
3. Simplify condition: v-if="fileContent?.content" suffices; the !! coercion is unnecessary since v-if already evaluates truthiness.

♻️ Optional: align styling with adjacent button

 <button
-  v-if="!!fileContent?.content"
+  v-if="fileContent?.content"
   type="button"
-  class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1 capitalize"
+  class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1 active:scale-95"
   `@click`="copyFileContent()"
 >
   <span
     class="w-3 h-3"
-    :class="fileContentCopied ? 'i-lucide:check' : 'i-lucide:file'"
+    :class="fileContentCopied ? 'i-lucide:check' : 'i-lucide:copy'"
   />
   {{ fileContentCopied ? $t('common.copied') : $t('common.copy') }}
 </button>

Based on learnings, the inline copy button pattern is acceptable to keep inline rather than extract to a reusable component.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 85ac3d7 and 1299c71.

📒 Files selected for processing (1)

• app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!