mirror of https://github.com/langgenius/dify.git
46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
/**
|
|
* @fileoverview Paragraph component for rendering <p> tags in Markdown.
|
|
* Extracted from the main markdown renderer for modularity.
|
|
* Handles special rendering for paragraphs that directly contain an image.
|
|
*/
|
|
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 = (props: { pluginUniqueIdentifier?: string, node?: any, children?: any }) => {
|
|
const { node, pluginUniqueIdentifier, children } = props
|
|
const children_node = node.children
|
|
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 ''
|
|
}, [asset])
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (blobUrl && asset)
|
|
URL.revokeObjectURL(blobUrl)
|
|
}
|
|
}, [blobUrl])
|
|
|
|
if (children_node?.[0]?.tagName === 'img') {
|
|
// const imageURL = getMarkdownImageURL(children_node[0].properties?.src, pluginUniqueIdentifier)
|
|
return (
|
|
<div className="markdown-img-wrapper">
|
|
<ImageGallery srcs={[blobUrl]} />
|
|
{
|
|
Array.isArray(children) && children.length > 1 && (
|
|
<div className="mt-2">{children.slice(1)}</div>
|
|
)
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
return <p>{children}</p>
|
|
}
|
|
|
|
export default Paragraph
|