refactor: rename hostCss to customCss

This commit is contained in:
one 2025-08-15 16:06:06 +08:00
parent a34e407aa2
commit e801b9d298
5 changed files with 10 additions and 8 deletions

View File

@ -28,7 +28,7 @@ const GraphvizPreview = ({
const renderGraphviz = useCallback(async (content: string, container: HTMLDivElement) => { const renderGraphviz = useCallback(async (content: string, container: HTMLDivElement) => {
const viz = await vizInitializer.get() const viz = await vizInitializer.get()
const svg = viz.renderString(content, { format: 'svg' }) const svg = viz.renderString(content, { format: 'svg' })
renderSvgInShadowHost(svg, container, { hostCss: PreviewHostCssWhite }) renderSvgInShadowHost(svg, container, { customCss: PreviewHostCssWhite })
}, []) }, [])
// 使用预览渲染器 hook // 使用预览渲染器 hook

View File

@ -104,7 +104,7 @@ const PlantUmlPreview = ({
} }
const text = await response.text() const text = await response.text()
renderSvgInShadowHost(text, container, { hostCss: PreviewHostCssWhite }) renderSvgInShadowHost(text, container, { customCss: PreviewHostCssWhite })
}, []) }, [])
// 使用预览渲染器 hook // 使用预览渲染器 hook

View File

@ -19,7 +19,7 @@ interface SvgPreviewProps {
const SvgPreview = ({ children, enableToolbar = false, className, ref }: SvgPreviewProps) => { const SvgPreview = ({ children, enableToolbar = false, className, ref }: SvgPreviewProps) => {
// 定义渲染函数 // 定义渲染函数
const renderSvg = useCallback(async (content: string, container: HTMLDivElement) => { const renderSvg = useCallback(async (content: string, container: HTMLDivElement) => {
renderSvgInShadowHost(content, container, { hostCss: PreviewHostCssWhite }) renderSvgInShadowHost(content, container, { customCss: PreviewHostCssWhite })
}, []) }, [])
// 使用预览渲染器 hook // 使用预览渲染器 hook

View File

@ -35,7 +35,9 @@ export const PreviewContainer = styled(Flex).attrs({ role: 'alert' })`
` `
export const PreviewHostCssWhite = ` export const PreviewHostCssWhite = `
background-color: white; :host {
border: 0.5px solid var(--color-code-background); background-color: white;
border-radius: 8px; border: 0.5px solid var(--color-code-background);
border-radius: 8px;
}
` `

View File

@ -1,5 +1,5 @@
type ShadowHostOptions = { type ShadowHostOptions = {
hostCss?: string // override :host styles customCss?: string // override styles
} }
/** /**
@ -35,7 +35,7 @@ export function renderSvgInShadowHost(svgContent: string, hostElement: HTMLEleme
` `
const style = document.createElement('style') const style = document.createElement('style')
style.textContent = base + (options?.hostCss ? `\n${options.hostCss}\n` : '') style.textContent = base + (options?.customCss ? `\n${options.customCss}\n` : '')
// Clear previous content and append new style and SVG // Clear previous content and append new style and SVG
shadowRoot.innerHTML = '' shadowRoot.innerHTML = ''