AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-18 05:55:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: ref attribute in markdown causes page crash (#11369)

Browse Source 
Co-authored-by: crazywoola <427733928@qq.com>
This commit is contained in:
Joel 2024-12-05 10:15:21 +08:00 committed by GitHub
parent eca466bdaa
commit 284bb7ac71
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/components/base/image-gallery/index.tsx
View File

@ -53,8 +53,7 @@ const ImageGallery: FC<Props> = ({
imagePreviewUrl && ( imagePreviewUrl && (
<ImagePreview <ImagePreview
url={imagePreviewUrl} url={imagePreviewUrl}
onCancel={() => setImagePreviewUrl('')} onCancel={() => setImagePreviewUrl('')} title={''} />
/>
) )
} }
</div> </div>

32
web/app/components/base/markdown.tsx
View File

@ -8,8 +8,7 @@ import RemarkGfm from 'remark-gfm'
import RehypeRaw from 'rehype-raw' import RehypeRaw from 'rehype-raw'
import SyntaxHighlighter from 'react-syntax-highlighter' import SyntaxHighlighter from 'react-syntax-highlighter'
import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs' import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'
import type { RefObject } from 'react' import { Component, memo, useMemo, useRef, useState } from 'react'
import { Component, memo, useEffect, useMemo, useRef, useState } from 'react'
import type { CodeComponent } from 'react-markdown/lib/ast-to-react' import type { CodeComponent } from 'react-markdown/lib/ast-to-react'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import CopyBtn from '@/app/components/base/copy-btn' import CopyBtn from '@/app/components/base/copy-btn'
@ -77,29 +76,6 @@ export function PreCode(props: { children: any }) {
) )
} }
// eslint-disable-next-line unused-imports/no-unused-vars
const useLazyLoad = (ref: RefObject<Element>): boolean => {
const [isIntersecting, setIntersecting] = useState<boolean>(false)
useEffect(() => {
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
setIntersecting(true)
observer.disconnect()
}
})
if (ref.current)
observer.observe(ref.current)
return () => {
observer.disconnect()
}
}, [ref])
return isIntersecting
}
// **Add code block // **Add code block
// Avoid error #185 (Maximum update depth exceeded. // Avoid error #185 (Maximum update depth exceeded.
// This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. // This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
@ -123,7 +99,7 @@ const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }
try { try {
return JSON.parse(String(children).replace(/\n$/, '')) return JSON.parse(String(children).replace(/\n$/, ''))
} }
catch (error) {} catch (error) { }
} }
return JSON.parse('{"title":{"text":"ECharts error - Wrong JSON format."}}') return JSON.parse('{"title":{"text":"ECharts error - Wrong JSON format."}}')
}, [language, children]) }, [language, children])
@ -181,7 +157,7 @@ const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }
> >
<div className='text-[13px] text-gray-500 font-normal'>{languageShowName}</div> <div className='text-[13px] text-gray-500 font-normal'>{languageShowName}</div>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{(['mermaid', 'svg']).includes(language!) && <SVGBtn isSVG={isSVG} setIsSVG={setIsSVG}/>} {(['mermaid', 'svg']).includes(language!) && <SVGBtn isSVG={isSVG} setIsSVG={setIsSVG} />}
<CopyBtn <CopyBtn
className='mr-1' className='mr-1'
value={String(children).replace(/\n$/, '')} value={String(children).replace(/\n$/, '')}
@ -261,7 +237,7 @@ export function Markdown(props: { content: string; className?: string }) {
() => { () => {
return (tree) => { return (tree) => {
const iterate = (node: any) => { const iterate = (node: any) => {
if (node.type === 'element' && !node.properties?.src && node.properties?.ref && node.properties.ref.startsWith('{') && node.properties.ref.endsWith('}')) if (node.type === 'element' && node.properties?.ref)
delete node.properties.ref delete node.properties.ref
if (node.children) if (node.children)