fix: add markdown support for extension description (#2691)

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>

extensions/inference-nitro-extension/package.json

@@ -2,7 +2,7 @@
   "name": "@janhq/inference-nitro-extension",
   "productName": "Nitro Inference Engine",
   "version": "1.0.0",
-  "description": "This extension embeds Nitro, a lightweight (3mb) inference engine written in C++. See https://nitro.jan.ai.\nUse this setting if you encounter errors related to **CUDA toolkit** during application execution.",
+  "description": "This extension embeds Nitro, a lightweight (3mb) inference engine written in C++. See https://nitro.jan.ai.\nAdditional dependencies could be installed to run without Cuda Toolkit installation.",
   "main": "dist/index.js",
   "node": "dist/node/index.cjs.js",
   "author": "Jan <service@jan.ai>",

web/screens/Settings/CoreExtensions/ExtensionItem.tsx

@@ -83,7 +83,7 @@ const ExtensionItem: React.FC<Props> = ({ item }) => {
   const description = marked.parse(item.description ?? '', { async: false })
 
   return (
-    <div className="mx-6 flex w-full items-start justify-between border-b border-border py-4 py-6 first:pt-4 last:border-none">
+    <div className="mx-6 flex w-full items-start justify-between border-b border-border py-6 first:pt-4 last:border-none">
       <div className="flex-1 flex-shrink-0 space-y-1.5">
         <div className="flex items-center gap-x-2">
           <h6 className="text-base font-bold">Additional Dependencies</h6>

web/screens/Settings/CoreExtensions/index.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
 import React, { useState, useEffect, useRef } from 'react'
 
 import { Button, ScrollArea } from '@janhq/uikit'
+import { Marked, Renderer } from 'marked'
 
 import Loader from '@/containers/Loader'
 
@@ -88,9 +88,16 @@ const ExtensionCatalog = () => {
                       {item.version}
                     </h6>
                   </div>
-                  <p className="whitespace-pre-wrap leading-relaxed ">
-                    {item.description}
-                  </p>
+                  {
+                    <div
+                      dangerouslySetInnerHTML={{
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        __html: marked.parse(item.description ?? '', {
+                          async: false,
+                        }),
+                      }}
+                    />
+                  }
                 </div>
               </div>
             )
@@ -130,4 +137,14 @@ const ExtensionCatalog = () => {
   )
 }
 
+const marked: Marked = new Marked({
+  renderer: {
+    link: (href, title, text) => {
+      return Renderer.prototype.link
+        ?.apply(this, [href, title, text])
+        .replace('<a', "<a class='text-blue-500' target='_blank'")
+    },
+  },
+})
+
 export default ExtensionCatalog