fix(ui): escape special characters in description

[radosvet93]

🔗 Linked issue

Fixes: #1572

🧭 Context

I'm using the decodeHtmlEntities to decode the HTML entities and render them

📚 Description

This is the one that fixes the issue in Compare packages

and I also found another instance in the Search table row

[vercel]

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

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

2 Skipped Deployments

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

[codecov]

Codecov Report

❌ Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Compare/PackageSelector.vue	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

Two Vue components were changed to decode HTML entities when rendering package descriptions: in PackageSelector.vue and TableRow.vue the description rendering now wraps the source string with decodeHtmlEntities(...) instead of interpolating the raw string. No other control flow, DOM structure, or fallback values were altered.

Possibly related PRs

• perf: move html entity decoding to server side #1561 — Also touches HTML-entity decoding in client components; directly related to where decoding is applied or moved between client/server.
• fix: compare page package desc truncate invalid #1312 — Modifies the same description element in PackageSelector.vue (layout/truncation changes), creating a direct code overlap.
• fix: decode HTML entities in TOC dropdown labels #1550 — Adds decodeHtmlEntities usage in component templates elsewhere (TOC labels), sharing the same helper usage pattern.

Suggested reviewers

• danielroe
• whitep4nth3r
• 43081j

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The code changes implement the required fix by applying decodeHtmlEntities to description fields in both Compare and Search components, addressing issue #1572.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing special character rendering in package descriptions as specified in the linked issue, with no extraneous modifications detected.
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the use of decodeHtmlEntities to fix rendering of special characters in package descriptions across two components.

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

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/Compare/PackageSelector.vue (1)

52-60: ⚠️ Potential issue | 🔴 Critical

Same unsanitised v-html XSS risk as TableRow.vue — fix at the data-mapping layer

result.description originates from filteredResults (lines 52–60), which maps npm registry descriptions without any transformation. Binding this directly to v-html at line 309 carries the identical stored-XSS risk described for TableRow.vue.

The cleanest fix is to decode HTML entities once, inside the filteredResults computed, and revert the template to text interpolation:

🔒 Proposed fix

 const filteredResults = computed(() => {
   if (!searchData.value?.objects) return []
   return searchData.value.objects
     .map(o => ({
       name: o.package.name,
-      description: o.package.description,
+      description: o.package.description ? decodeEntities(o.package.description) : undefined,
     }))
     .filter(r => !packages.value.includes(r.name))
 })

-            <span
-              v-if="result.description"
-              class="text-xs text-fg-muted truncate mt-0.5 w-full block"
-              v-html="result.description"
-            />
+            <span
+              v-if="result.description"
+              class="text-xs text-fg-muted truncate mt-0.5 w-full block"
+            >{{ result.description }}</span>

Where decodeEntities is the shared utility proposed in the TableRow.vue comment (using he.decode for SSR compatibility).

Also applies to: 306-310