fix(SvgPreview): dragging and sanitizing (#6568)

* fix(SvgPreview): dragging

* fix(SvgPreview): sanitize svg content
This commit is contained in:
one 2025-05-29 09:51:15 +08:00 committed by GitHub
parent 214669fa03
commit f815723102

View File

@ -1,5 +1,5 @@
import { CodeTool, usePreviewToolHandlers, usePreviewTools } from '@renderer/components/CodeToolbar'
import { memo, useRef } from 'react'
import { memo, useCallback, useEffect, useRef } from 'react'
import styled from 'styled-components'
interface Props {
@ -10,6 +10,16 @@ interface Props {
const SvgPreview: React.FC<Props> = ({ children, setTools }) => {
const svgContainerRef = useRef<HTMLDivElement>(null)
const sanitizeSvg = useCallback((svgContent: string): string => {
return svgContent.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
}, [])
useEffect(() => {
if (svgContainerRef.current) {
svgContainerRef.current.innerHTML = sanitizeSvg(children)
}
}, [children, sanitizeSvg])
// 使用通用图像工具
const { handleCopyImage, handleDownload } = usePreviewToolHandlers(svgContainerRef, {
imgSelector: '.svg-preview svg',
@ -23,9 +33,7 @@ const SvgPreview: React.FC<Props> = ({ children, setTools }) => {
handleDownload
})
return (
<SvgPreviewContainer ref={svgContainerRef} className="svg-preview" dangerouslySetInnerHTML={{ __html: children }} />
)
return <SvgPreviewContainer ref={svgContainerRef} className="svg-preview" />
}
const SvgPreviewContainer = styled.div`