feat: add plugin readme

web/app/components/base/markdown-blocks/img.tsx

@@ -3,11 +3,34 @@
  * Extracted from the main markdown renderer for modularity.
  * Uses the ImageGallery component to display images.
  */
-import React from 'react'
+import React, { useEffect, useMemo } from 'react'
 import ImageGallery from '@/app/components/base/image-gallery'
+import { getMarkdownImageURL } from './utils'
+import { usePluginReadmeAsset } from '@/service/use-plugins'
 
-const Img = ({ src }: any) => {
-  return <div className="markdown-img-wrapper"><ImageGallery srcs={[src]} /></div>
+const Img = ({ src, pluginUniqueIdentifier }: { src: string, pluginUniqueIdentifier?: string }) => {
+  const imgURL = getMarkdownImageURL(src, pluginUniqueIdentifier)
+  const { data: asset } = usePluginReadmeAsset({ plugin_unique_identifier: pluginUniqueIdentifier, file_name: src })
+
+  const blobUrl = useMemo(() => {
+    if (asset)
+      return URL.createObjectURL(asset)
+
+    return imgURL
+  }, [asset, imgURL])
+
+  useEffect(() => {
+    return () => {
+      if (blobUrl && asset)
+        URL.revokeObjectURL(blobUrl)
+    }
+  }, [blobUrl])
+
+  return (
+    <div className='markdown-img-wrapper'>
+      <ImageGallery srcs={[blobUrl]} />
+    </div>
+  )
 }
 
 export default Img

web/app/components/base/markdown-blocks/paragraph.tsx

@@ -3,25 +3,44 @@
  * Extracted from the main markdown renderer for modularity.
  * Handles special rendering for paragraphs that directly contain an image.
  */
-import React from 'react'
+import React, { useEffect, useMemo } from 'react'
 import ImageGallery from '@/app/components/base/image-gallery'
+import { getMarkdownImageURL } from './utils'
+import { usePluginReadmeAsset } from '@/service/use-plugins'
 
-const Paragraph = (paragraph: any) => {
-  const { node }: any = paragraph
+const Paragraph = (props: { pluginUniqueIdentifier?: string, node?: any, children?: any }) => {
+  const { node, pluginUniqueIdentifier, children } = props
   const children_node = node.children
-  if (children_node && children_node[0] && 'tagName' in children_node[0] && children_node[0].tagName === 'img') {
+  const imgURL = getMarkdownImageURL(children_node[0].properties?.src, pluginUniqueIdentifier)
+  const { data: asset } = usePluginReadmeAsset({ plugin_unique_identifier: pluginUniqueIdentifier, file_name: children_node[0].properties?.src })
+
+  const blobUrl = useMemo(() => {
+    if (asset)
+      return URL.createObjectURL(asset)
+
+    return imgURL
+  }, [asset, imgURL])
+
+  useEffect(() => {
+    return () => {
+      if (blobUrl && asset)
+        URL.revokeObjectURL(blobUrl)
+    }
+  }, [blobUrl])
+
+  if (children_node?.[0]?.tagName === 'img') {
     return (
       <div className="markdown-img-wrapper">
-        <ImageGallery srcs={[children_node[0].properties.src]} />
+        <ImageGallery srcs={[blobUrl]} />
         {
-          Array.isArray(paragraph.children) && paragraph.children.length > 1 && (
-            <div className="mt-2">{paragraph.children.slice(1)}</div>
+          Array.isArray(children) && children.length > 1 && (
+            <div className="mt-2">{children.slice(1)}</div>
           )
         }
       </div>
     )
   }
-  return <p>{paragraph.children}</p>
+  return <p>{children}</p>
 }
 
 export default Paragraph

web/app/components/base/markdown-blocks/utils.ts

@@ -1,7 +1,14 @@
-import { ALLOW_UNSAFE_DATA_SCHEME } from '@/config'
+import { ALLOW_UNSAFE_DATA_SCHEME, MARKETPLACE_API_PREFIX } from '@/config'
 
 export const isValidUrl = (url: string): boolean => {
   const validPrefixes = ['http:', 'https:', '//', 'mailto:']
   if (ALLOW_UNSAFE_DATA_SCHEME) validPrefixes.push('data:')
   return validPrefixes.some(prefix => url.startsWith(prefix))
 }
+
+export const getMarkdownImageURL = (url: string, pathname?: string) => {
+  const regex = /(^\.\/_assets|^_assets)/
+  if (regex.test(url))
+    return `${MARKETPLACE_API_PREFIX}${pathname ?? ''}${url.replace(regex, '/_assets')}`
+  return url
+}