diff --git a/web/app/components/base/markdown-blocks/img.tsx b/web/app/components/base/markdown-blocks/img.tsx
index ec5a05a601..fa7ff11441 100644
--- a/web/app/components/base/markdown-blocks/img.tsx
+++ b/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 (
diff --git a/web/app/components/base/markdown-blocks/paragraph.tsx b/web/app/components/base/markdown-blocks/paragraph.tsx
index 8becf4b5f2..0c56a28172 100644
--- a/web/app/components/base/markdown-blocks/paragraph.tsx
+++ b/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 (
diff --git a/web/app/components/base/markdown-blocks/utils.ts b/web/app/components/base/markdown-blocks/utils.ts
index 50433b9eaa..f7dbe9b7ed 100644
--- a/web/app/components/base/markdown-blocks/utils.ts
+++ b/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
}
diff --git a/web/app/components/base/markdown/index.tsx b/web/app/components/base/markdown/index.tsx
index ef2bd13867..bb49fe1b14 100644
--- a/web/app/components/base/markdown/index.tsx
+++ b/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
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 (
-
+
)
}
diff --git a/web/app/components/base/markdown/react-markdown-wrapper.tsx b/web/app/components/base/markdown/react-markdown-wrapper.tsx
index 0632b83245..22ac6ad645 100644
--- a/web/app/components/base/markdown/react-markdown-wrapper.tsx
+++ b/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>
- pluginUniqueIdentifier?: string
+ pluginInfo?: SimplePluginInfo
}
export const ReactMarkdownWrapper: FC = (props) => {
- const { customComponents, latexContent, pluginUniqueIdentifier } = props
+ const { customComponents, latexContent, pluginInfo } = props
return (
= (props) => {
disallowedElements={['iframe', 'head', 'html', 'meta', 'link', 'style', 'body', ...(props.customDisallowedElements || [])]}
components={{
code: CodeBlock,
- img: (props: any) =>
,
+ img: (props: any) =>
,
video: VideoBlock,
audio: AudioBlock,
a: Link,
- p: (props: any) => ,
+ p: (props: any) => ,
button: MarkdownButton,
form: MarkdownForm,
script: ScriptBlock as any,
diff --git a/web/app/components/plugins/readme-panel/index.tsx b/web/app/components/plugins/readme-panel/index.tsx
index 274a5200db..c1fc50ee5a 100644
--- a/web/app/components/plugins/readme-panel/index.tsx
+++ b/web/app/components/plugins/readme-panel/index.tsx
@@ -74,7 +74,7 @@ const ReadmePanel: FC = () => {
)
}