feat: copy compare table as markdown

[mikouaji]

Implements #1515

1. Added ability to copy the comparison table as markdown. Had to parse css grid into a table.
2. Added new util function to parse any html element to markdown.
3. Extracted the copy button as a separate component.
4. Moved some imports, added translations and packages.

Packages used for html to markdown util are dependencies that already were used in the project.

How it work:

Screencast_20260216_192439.mp4

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 16, 2026 7:07pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 16, 2026 7:07pm
npmx-lunaria	Ignored		Feb 16, 2026 7:07pm

[github-actions]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
lunaria/files/en-GB.json	Localization changed, will be marked as complete.
lunaria/files/en-US.json	Source changed, localizations will be marked as outdated.
lunaria/files/pl-PL.json	Localization changed, will be marked as complete.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[codecov]

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/CopyToClipboardButton.vue	84.61%	2 Missing ⚠️
app/pages/package/[[org]]/[name].vue	0.00%	0 Missing and 2 partials ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

Introduces a new CopyToClipboardButton Vue component (script setup, TypeScript) and integrates it across package and compare pages. Adds client-side HTML→Markdown conversion and clipboard copy for comparison grids, including a new html-to-markdown utility and five AST/parse dependencies. Moves escapeHtml into a shared utility and updates imports/tests. Adds i18n keys/translations and accessibility tests for the new component. Several ad‑hoc floating copy buttons and related styles are replaced by the new component.

Possibly related PRs

• feat: add copy button for package versions #1447: Modifies the package page's version-copy UX in app/pages/package/[[org]]/[name].vue; closely overlaps UI changes replaced by CopyToClipboardButton.
• feat: extract button and link component, unify and improve design #1071: Refactors button/link primitives and widespread usages; related to unifying button components and usages touched here.

Suggested labels

front, a11y

Suggested reviewers

• danielroe
• ghostdevv

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main
Description check	✅ Passed	The pull request description clearly relates to the changeset, detailing the implementation of copy-to-clipboard functionality for comparison tables in Markdown format.

_{✏️ 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

---

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

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (3)

server/utils/docs/text.ts (1)

121-124: Avoid the non‑null assertion on array indexing.

The guideline calls for explicit checks when indexing arrays; this avoids ! and keeps the code strictly type‑safe.

♻️ Suggested fix

-  for (let i = 0; i < codeBlockData.length; i++) {
-    const { lang, code } = codeBlockData[i]!
+  for (let i = 0; i < codeBlockData.length; i++) {
+    const entry = codeBlockData[i]
+    if (!entry) continue
+    const { lang, code } = entry
     const highlighted = await highlightCodeBlock(code, lang)
     result = result.replace(`__CODE_BLOCK_${i}__`, highlighted)
   }

As per coding guidelines, "Ensure you write strictly type-safe code, for example by ensuring you always check when accessing an array value by index".

app/pages/compare.vue (1)

95-100: Consider adding a type guard for safer array access.

Accessing children[0] at line 97 could return undefined if the grid has no children. While line 100 handles the falsy case, TypeScript may not narrow the type correctly. The current logic works but could be made more explicit.

Proposed defensive check

 function gridToMarkdown(gridEl: HTMLElement): string {
   const children = Array.from(gridEl.children)
-  const headerRow = children[0]
+  const headerRow = children[0] as Element | undefined
   const dataRows = children.slice(1)
 
   if (!headerRow || dataRows.length === 0) return ''

app/components/CopyToClipboardButton.vue (1)

51-83: Consider adding graceful degradation for older browsers without allow-discrete support.

The allow-discrete transitions are well-supported across modern browsers (Chrome 117+, Safari 17.4+, Firefox 129+), but this is a feature projected to reach "Baseline widely available" by February 2027. For enhanced compatibility with older browser versions, consider either removing allow-discrete from production builds or implementing a progressive enhancement strategy. Without it, transitions become discrete jumps rather than smooth animations—the component remains functional, but the visual refinement is lost.