mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2025-12-25 03:10:08 +08:00
fix(SvgPreview): dragging and sanitizing (#6568)
* fix(SvgPreview): dragging * fix(SvgPreview): sanitize svg content
This commit is contained in:
parent
214669fa03
commit
f815723102
@ -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`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user