fix: handle html entities in playground description (#591)

Author: danielroe

app/components/MarkdownText.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { decodeHtmlEntities } from '~/utils/formatters'
+
 const props = defineProps<{
   text: string
   /** When true, renders link text without the anchor tag (useful when inside another link) */
@@ -21,8 +23,11 @@ function stripMarkdownImages(text: string): string {
 
 // Strip HTML tags and escape remaining HTML to prevent XSS
 function stripAndEscapeHtml(text: string): string {
-  // First strip markdown image badges
-  let stripped = stripMarkdownImages(text)
+  // First decode any HTML entities in the input
+  let stripped = decodeHtmlEntities(text)
+
+  // Then strip markdown image badges
+  stripped = stripMarkdownImages(stripped)
 
   // Then strip actual HTML tags (keep their text content)
   // Only match tags that start with a letter or / (to avoid matching things like "a < b > c")

app/components/PackagePlaygrounds.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PlaygroundLink } from '#shared/types'
+import { decodeHtmlEntities } from '~/utils/formatters'
 
 const props = defineProps<{
   links: PlaygroundLink[]
@@ -126,7 +127,7 @@ function focusMenuItem(index: number) {
             :class="[getIcon(firstLink.provider), getColor(firstLink.provider), 'w-4 h-4 shrink-0']"
             aria-hidden="true"
           />
-          <span class="truncate text-fg-muted">{{ firstLink.label }}</span>
+          <span class="truncate text-fg-muted">{{ decodeHtmlEntities(firstLink.label) }}</span>
         </a>
       </AppTooltip>
 
@@ -182,7 +183,7 @@ function focusMenuItem(index: number) {
                 :class="[getIcon(link.provider), getColor(link.provider), 'w-4 h-4 shrink-0']"
                 aria-hidden="true"
               />
-              <span class="truncate">{{ link.label }}</span>
+              <span class="truncate">{{ decodeHtmlEntities(link.label) }}</span>
             </a>
           </AppTooltip>
         </div>

app/utils/formatters.ts

@@ -5,6 +5,20 @@ export function toIsoDateString(date: Date): string {
   return `${year}-${month}-${day}`
 }
 
+const htmlEntities: Record<string, string> = {
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&#39;': "'",
+  '&apos;': "'",
+  '&nbsp;': ' ',
+}
+
+export function decodeHtmlEntities(text: string): string {
+  return text.replace(/&(?:amp|lt|gt|quot|apos|nbsp|#39);/g, match => htmlEntities[match] || match)
+}
+
 export function formatCompactNumber(
   value: number,
   options?: { decimals?: number; space?: boolean },