use markdown

Author: gameroman

app/components/Compare/ReplacementSuggestion.vue

@@ -21,6 +21,10 @@ const nodeVersion = computed(() => {
   const nodeEngine = props.replacement.engines?.find(e => e.engine === 'nodejs')
   return nodeEngine?.minVersion || null
 })
+
+const replacementDescription = useMarkdown({
+  text: props.replacement.description ?? ''
+})
 </script>
 
 <template>
@@ -43,18 +47,18 @@ const nodeVersion = computed(() => {
           {{
             nodeVersion
               ? $t('package.replacement.native', {
-                  replacement: replacement.description || replacement.id,
+                  replacement: replacementDescription || replacement.id,
                   nodeVersion,
                 })
               : $t('package.replacement.native_no_version', {
-                  replacement: replacement.description || replacement.id,
+                  replacement: replacementDescription || replacement.id,
                 })
           }}
         </template>
         <template v-else-if="replacement.type === 'simple'">
           {{
             $t('package.replacement.simple', {
-              replacement: replacement.description,
+              replacement: replacementDescription,
               community: $t('package.replacement.community'),
             })
           }}
@@ -68,7 +72,7 @@ const nodeVersion = computed(() => {
           }}
         </template>
         <template v-else-if="replacement.type === 'removal'">
-          {{ replacement.description }}
+          {{ replacementDescription }}
         </template>
       </p>
     </div>

app/components/Package/Replacement.vue

@@ -13,6 +13,10 @@ const nodeVersion = computed(() => {
   const nodeEngine = props.replacement.engines?.find(e => e.engine === 'nodejs')
   return nodeEngine?.minVersion || null
 })
+
+const replacementDescription = useMarkdown({
+  text: props.replacement.description ?? ''
+})
 </script>
 
 <template>
@@ -29,8 +33,8 @@ const nodeVersion = computed(() => {
       scope="global"
     >
       <template #replacement>
-        <code v-if="replacement.description">
-          {{ replacement.description }}
+        <code v-if="replacementDescription">
+          {{ replacementDescription }}
         </code>
         <span v-else>{{ replacement.id }}</span>
       </template>
@@ -44,14 +48,14 @@ const nodeVersion = computed(() => {
       scope="global"
     >
       <template #replacement>
-        <code v-if="replacement.description">
-          {{ replacement.description }}
+        <code v-if="replacementDescription">
+          {{ replacementDescription }}
         </code>
         <span v-else>{{ replacement.id }}</span>
       </template>
     </i18n-t>
     <div v-else-if="replacement.type === 'simple'" class="block">
-      <div class="mb-2">{{ replacement.description }}</div>
+      <div class="mb-2">{{ replacementDescription }}</div>
       <div v-if="replacement.example">
         <strong class="block mb-1.5">{{ $t('package.replacement.example') }}</strong>
         <pre
@@ -80,7 +84,7 @@ const nodeVersion = computed(() => {
       </template>
     </i18n-t>
     <template v-else-if="replacement.type === 'removal'">
-      {{ replacement.description }}
+      {{ replacementDescription }}
     </template>
     <template v-else>
       {{ $t('package.replacement.none') }}