fix: plugin readme params

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

@@ -7,24 +7,25 @@ import React, { useEffect, useMemo } from 'react'
 import ImageGallery from '@/app/components/base/image-gallery'
 import { getMarkdownImageURL } from './utils'
 import { usePluginReadmeAsset } from '@/service/use-plugins'
+import type { SimplePluginInfo } from '../markdown/react-markdown-wrapper'
 
-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 Img = ({ src, pluginInfo }: { src: string, pluginInfo?: SimplePluginInfo }) => {
+  const { plugin_unique_identifier, plugin_id } = pluginInfo || {}
+  const { data: assetData } = usePluginReadmeAsset({ plugin_unique_identifier, file_name: src })
 
   const blobUrl = useMemo(() => {
-    if (asset)
-      return URL.createObjectURL(asset)
+    if (assetData)
+      return URL.createObjectURL(assetData)
 
-    return imgURL
-  }, [asset, imgURL])
+    return getMarkdownImageURL(src, plugin_id)
+  }, [assetData, plugin_id, src])
 
   useEffect(() => {
     return () => {
-      if (blobUrl && asset)
+      if (blobUrl && assetData)
         URL.revokeObjectURL(blobUrl)
     }
-  }, [blobUrl])
+  }, [blobUrl, assetData])
 
   return (
     <div className='markdown-img-wrapper'>

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

@@ -7,26 +7,30 @@ import React, { useEffect, useMemo } from 'react'
 import ImageGallery from '@/app/components/base/image-gallery'
 import { getMarkdownImageURL } from './utils'
 import { usePluginReadmeAsset } from '@/service/use-plugins'
+import type { SimplePluginInfo } from '../markdown/react-markdown-wrapper'
 
-const Paragraph = (props: { pluginUniqueIdentifier?: string, node?: any, children?: any }) => {
-  const { node, pluginUniqueIdentifier, children } = props
+const Paragraph = (props: { pluginInfo?: SimplePluginInfo, node?: any, children?: any }) => {
+  const { node, pluginInfo, children } = props
+  const { plugin_unique_identifier, plugin_id } = pluginInfo || {}
   const children_node = node.children
-  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 { data: assetData } = usePluginReadmeAsset({ plugin_unique_identifier, file_name: children_node?.[0]?.tagName !== 'img' ? '' : children_node[0].properties?.src })
 
   const blobUrl = useMemo(() => {
-    if (asset)
-      return URL.createObjectURL(asset)
+    if (assetData)
+      return URL.createObjectURL(assetData)
 
-    return imgURL
-  }, [asset, imgURL])
+    if (children_node?.[0]?.tagName === 'img' && children_node[0].properties?.src)
+      return getMarkdownImageURL(children_node[0].properties.src, plugin_id)
+
+    return ''
+  }, [assetData, children_node, plugin_id])
 
   useEffect(() => {
     return () => {
-      if (blobUrl && asset)
+      if (blobUrl && assetData)
         URL.revokeObjectURL(blobUrl)
     }
-  }, [blobUrl])
+  }, [blobUrl, assetData])
 
   if (children_node?.[0]?.tagName === 'img') {
     return (

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

@@ -9,6 +9,6 @@ export const isValidUrl = (url: string): boolean => {
 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 `${MARKETPLACE_API_PREFIX}${MARKETPLACE_API_PREFIX.endsWith('/') ? '' : '/'}plugins/${pathname ?? ''}${url.replace(regex, '/_assets')}`
   return url
 }

web/app/components/base/markdown/index.tsx

@@ -3,7 +3,7 @@ import 'katex/dist/katex.min.css'
 import { flow } from 'lodash-es'
 import cn from '@/utils/classnames'
 import { preprocessLaTeX, preprocessThinkTag } from './markdown-utils'
-import type { ReactMarkdownWrapperProps } from './react-markdown-wrapper'
+import type { ReactMarkdownWrapperProps, SimplePluginInfo } from './react-markdown-wrapper'
 
 const ReactMarkdown = dynamic(() => import('./react-markdown-wrapper').then(mod => mod.ReactMarkdownWrapper), { ssr: false })
 
@@ -17,11 +17,11 @@ const ReactMarkdown = dynamic(() => import('./react-markdown-wrapper').then(mod
 export type MarkdownProps = {
   content: string
   className?: string
-  pluginUniqueIdentifier?: string
+  pluginInfo?: SimplePluginInfo
 } & Pick<ReactMarkdownWrapperProps, 'customComponents' | 'customDisallowedElements'>
 
 export const Markdown = (props: MarkdownProps) => {
-  const { customComponents = {}, pluginUniqueIdentifier } = props
+  const { customComponents = {}, pluginInfo } = props
   const latexContent = flow([
     preprocessThinkTag,
     preprocessLaTeX,
@@ -29,7 +29,7 @@ export const Markdown = (props: MarkdownProps) => {
 
   return (
     <div className={cn('markdown-body', '!text-text-primary', props.className)}>
-      <ReactMarkdown pluginUniqueIdentifier={pluginUniqueIdentifier} latexContent={latexContent} customComponents={customComponents} customDisallowedElements={props.customDisallowedElements} />
+      <ReactMarkdown pluginInfo={pluginInfo} latexContent={latexContent} customComponents={customComponents} customDisallowedElements={props.customDisallowedElements} />
     </div>
   )
 }

web/app/components/base/markdown/react-markdown-wrapper.tsx

@@ -21,15 +21,20 @@ import dynamic from 'next/dynamic'
 
 const CodeBlock = dynamic(() => import('@/app/components/base/markdown-blocks/code-block'), { ssr: false })
 
+export type SimplePluginInfo = {
+  pluginUniqueIdentifier: string
+  plugin_id: string
+}
+
 export type ReactMarkdownWrapperProps = {
   latexContent: any
   customDisallowedElements?: string[]
   customComponents?: Record<string, React.ComponentType<any>>
-  pluginUniqueIdentifier?: string
+  pluginInfo?: SimplePluginInfo
 }
 
 export const ReactMarkdownWrapper: FC<ReactMarkdownWrapperProps> = (props) => {
-  const { customComponents, latexContent, pluginUniqueIdentifier } = props
+  const { customComponents, latexContent, pluginInfo } = props
 
   return (
     <ReactMarkdown
@@ -64,11 +69,11 @@ export const ReactMarkdownWrapper: FC<ReactMarkdownWrapperProps> = (props) => {
       disallowedElements={['iframe', 'head', 'html', 'meta', 'link', 'style', 'body', ...(props.customDisallowedElements || [])]}
       components={{
         code: CodeBlock,
-        img: (props: any) => <Img {...props} pluginUniqueIdentifier={pluginUniqueIdentifier} />,
+        img: (props: any) => <Img {...props} pluginInfo={pluginInfo} />,
         video: VideoBlock,
         audio: AudioBlock,
         a: Link,
-        p: (props: any) => <Paragraph {...props} pluginUniqueIdentifier={pluginUniqueIdentifier} />,
+        p: (props: any) => <Paragraph {...props} pluginInfo={pluginInfo} />,
         button: MarkdownButton,
         form: MarkdownForm,
         script: ScriptBlock as any,

web/app/components/plugins/readme-panel/index.tsx

@@ -74,7 +74,7 @@ const ReadmePanel: FC = () => {
               <Markdown
                 content={readmeData.readme}
                 className="prose-sm prose max-w-none"
-                pluginUniqueIdentifier={pluginUniqueIdentifier}
+                pluginInfo={{ plugin_unique_identifier: pluginUniqueIdentifier, plugin_id: detail.plugin_id }}
               />
             )
           }