fix: replace MarkdownText component with useMarkdown composable (#590)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: DDeenis

CONTRIBUTING.md

@@ -187,7 +187,7 @@ import { hasProtocol } from 'ufo'
 
 | Type             | Convention               | Example                        |
 | ---------------- | ------------------------ | ------------------------------ |
-| Vue components   | PascalCase               | `MarkdownText.vue`             |
+| Vue components   | PascalCase               | `DateTime.vue`                 |
 | Pages            | kebab-case               | `search.vue`, `[...name].vue`  |
 | Composables      | camelCase + `use` prefix | `useNpmRegistry.ts`            |
 | Server routes    | kebab-case + method      | `search.get.ts`                |

app/components/Package/Card.vue

@@ -19,6 +19,13 @@ const isExactMatch = computed(() => {
   const name = props.result.package.name.toLowerCase()
   return query === name
 })
+
+// Process package description
+const pkgDescription = useMarkdown(() => ({
+  text: props.result.package.description ?? '',
+  plain: true,
+  packageName: props.result.package.name,
+}))
 </script>
 
 <template>
@@ -74,11 +81,8 @@ const isExactMatch = computed(() => {
     </div>
     <div class="flex justify-start items-start gap-4 sm:gap-8">
       <div class="min-w-0">
-        <p
-          v-if="result.package.description"
-          class="text-fg-muted text-xs sm:text-sm line-clamp-2 mb-2 sm:mb-3"
-        >
-          <MarkdownText :text="result.package.description" plain />
+        <p v-if="pkgDescription" class="text-fg-muted text-xs sm:text-sm line-clamp-2 mb-2 sm:mb-3">
+          <span v-html="pkgDescription" />
         </p>
         <div class="flex flex-wrap items-center gap-x-3 sm:gap-x-4 gap-y-2 text-xs text-fg-subtle">
           <dl v-if="showPublisher || result.package.date" class="flex items-center gap-4 m-0">

app/components/MarkdownText.vue app/composables/useMarkdown.tsapp/components/MarkdownText.vue renamed to app/composables/useMarkdown.ts

@@ -1,13 +1,17 @@
-<script setup lang="ts">
 import { decodeHtmlEntities } from '~/utils/formatters'
 
-const props = defineProps<{
+interface UseMarkdownOptions {
   text: string
   /** When true, renders link text without the anchor tag (useful when inside another link) */
   plain?: boolean
   /** Package name to strip from the beginning of the description (if present) */
   packageName?: string
-}>()
+}
+
+/** @public */
+export function useMarkdown(options: MaybeRefOrGetter<UseMarkdownOptions>) {
+  return computed(() => parseMarkdown(toValue(options)))
+}
 
 // Strip markdown image badges from text
 function stripMarkdownImages(text: string): string {
@@ -22,7 +26,7 @@ function stripMarkdownImages(text: string): string {
 }
 
 // Strip HTML tags and escape remaining HTML to prevent XSS
-function stripAndEscapeHtml(text: string): string {
+function stripAndEscapeHtml(text: string, packageName?: string): string {
   // First decode any HTML entities in the input
   let stripped = decodeHtmlEntities(text)
 
@@ -33,13 +37,13 @@ function stripAndEscapeHtml(text: string): string {
   // Only match tags that start with a letter or / (to avoid matching things like "a < b > c")
   stripped = stripped.replace(/<\/?[a-z][^>]*>/gi, '')
 
-  if (props.packageName) {
+  if (packageName) {
     // Trim first to handle leading/trailing whitespace from stripped HTML
     stripped = stripped.trim()
     // Collapse multiple whitespace into single space
     stripped = stripped.replace(/\s+/g, ' ')
     // Escape special regex characters in package name
-    const escapedName = props.packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    const escapedName = packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
     // Match package name at the start, optionally followed by: space, dash, colon, hyphen, or just space
     const namePattern = new RegExp(`^${escapedName}\\s*[-:—]?\\s*`, 'i')
     stripped = stripped.replace(namePattern, '').trim()
@@ -55,11 +59,11 @@ function stripAndEscapeHtml(text: string): string {
 }
 
 // Parse simple inline markdown to HTML
-function parseMarkdown(text: string): string {
+function parseMarkdown({ text, packageName, plain }: UseMarkdownOptions): string {
   if (!text) return ''
 
   // First strip HTML tags and escape remaining HTML
-  let html = stripAndEscapeHtml(text)
+  let html = stripAndEscapeHtml(text, packageName)
 
   // Bold: **text** or __text__
   html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
@@ -78,7 +82,7 @@ function parseMarkdown(text: string): string {
   // Links: [text](url) - only allow https, mailto
   html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
     // In plain mode, just render the link text without the anchor
-    if (props.plain) {
+    if (plain) {
       return text
     }
     const decodedUrl = url.replace(/&amp;/g, '&')
@@ -94,11 +98,3 @@ function parseMarkdown(text: string): string {
 
   return html
 }
-
-const html = computed(() => parseMarkdown(props.text))
-</script>
-
-<template>
-  <!-- eslint-disable-next-line vue/no-v-html -->
-  <span v-html="html" />
-</template>

app/pages/[...package].vue

@@ -122,6 +122,12 @@ const displayVersion = computed(() => {
   return pkg.value.versions[latestTag] ?? null
 })
 
+// Process package description
+const pkgDescription = useMarkdown(() => ({
+  text: pkg.value?.description ?? '',
+  packageName: pkg.value?.name,
+}))
+
 //copy package name
 const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
   source: packageName,
@@ -160,6 +166,10 @@ const deprecationNotice = computed(() => {
   return { type: 'version' as const, message: displayVersion.value.deprecated }
 })
 
+const deprecationNoticeMessage = useMarkdown(() => ({
+  text: deprecationNotice.value?.message ?? '',
+}))
+
 const sizeTooltip = computed(() => {
   const chunks = [
     displayVersion.value &&
@@ -563,8 +573,8 @@ function handleClick(event: MouseEvent) {
         <div class="mb-4">
           <!-- Description container with min-height to prevent CLS -->
           <div class="max-w-2xl min-h-[4.5rem]">
-            <p v-if="pkg.description" class="text-fg-muted text-base m-0">
-              <MarkdownText :text="pkg.description" :package-name="pkg.name" />
+            <p v-if="pkgDescription" class="text-fg-muted text-base m-0">
+              <span v-html="pkgDescription" />
             </p>
             <p v-else class="text-fg-subtle text-base m-0 italic">
               {{ $t('package.no_description') }}
@@ -713,8 +723,8 @@ function handleClick(event: MouseEvent) {
                 : $t('package.deprecation.version')
             }}
           </h2>
-          <p v-if="deprecationNotice.message" class="text-base m-0">
-            <MarkdownText :text="deprecationNotice.message" />
+          <p v-if="deprecationNoticeMessage" class="text-base m-0">
+            <span v-html="deprecationNoticeMessage" />
           </p>
           <p v-else class="text-base m-0 italic">
             {{ $t('package.deprecation.no_reason') }}

test/nuxt/a11y.spec.ts

@@ -76,7 +76,6 @@ import {
   HeaderAccountMenu,
   LicenseDisplay,
   LoadingSpinner,
-  MarkdownText,
   PackageChartModal,
   PackageClaimPackageModal,
   HeaderConnectorModal,
@@ -281,24 +280,6 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('MarkdownText', () => {
-    it('should have no accessibility violations with plain text', async () => {
-      const component = await mountSuspended(MarkdownText, {
-        props: { text: 'Simple text' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations with formatted text', async () => {
-      const component = await mountSuspended(MarkdownText, {
-        props: { text: '**Bold** and *italic* and `code`' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
-
   describe('PackageSkeleton', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageSkeleton)