refactor(Mermaid): render mermaid in shadow dom

This commit is contained in:
one 2025-08-14 21:02:20 +08:00
parent bf30bf28a9
commit 1fcc18a8e6

View File

@ -6,6 +6,7 @@ import styled from 'styled-components'
import { useDebouncedRender } from './hooks/useDebouncedRender'
import ImagePreviewLayout from './ImagePreviewLayout'
import { BasicPreviewHandles, BasicPreviewProps } from './types'
import { renderSvgInShadowHost } from './utils'
/** Mermaid
* 使 usePreviewRenderer hook
@ -30,7 +31,10 @@ const MermaidPreview = ({
// 避免不可见时产生 undefined 和 NaN
const fixedSvg = svg.replace(/translate\(undefined,\s*NaN\)/g, 'translate(0, 0)')
container.innerHTML = fixedSvg
// 使用 shadow dom如果有问题可以回退到 innerHTML
renderSvgInShadowHost(fixedSvg, container)
// container.innerHTML = fixedSvg
},
[diagramId, mermaid]
)