github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-25 11:16:31 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(frontend): migrate mermaid chart

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-02-25 20:28:33 +01:00
parent 810ec92530
commit eb3340d735
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/extensions/extra-integrations/mermaid/mermaid-chart.tsx
View file

@ -17,9 +17,9 @@ const log = new Logger('MermaidChart')
let mermaidInitialized = false let mermaidInitialized = false
const loadMermaid = async (): Promise<typeof import('mermaid')> => { const loadMermaid = async (): Promise<typeof import('mermaid')['default']> => {
try { try {
return import(/* webpackChunkName: "mermaid" */ 'mermaid') return (await import(/* webpackChunkName: "mermaid" */ 'mermaid')).default
} catch (error) { } catch (error) {
log.error('Error while loading mermaid', error) log.error('Error while loading mermaid', error)
throw new Error('Error while loading mermaid') throw new Error('Error while loading mermaid')
@ -43,7 +43,7 @@ export const MermaidChart: React.FC<CodeProps> = ({ code }) => {
const mermaid = await loadMermaid() const mermaid = await loadMermaid()
if (!mermaidInitialized) { if (!mermaidInitialized) {
mermaid.default.initialize({ startOnLoad: false }) mermaid.initialize({ startOnLoad: false, securityLevel: 'sandbox' })
mermaidInitialized = true mermaidInitialized = true
} }
@ -51,14 +51,14 @@ export const MermaidChart: React.FC<CodeProps> = ({ code }) => {
if (!diagramContainer.current) { if (!diagramContainer.current) {
return return
} }
mermaid.default.parse(code) await mermaid.parse(code)
delete diagramContainer.current.dataset.processed delete diagramContainer.current.dataset.processed
diagramContainer.current.textContent = code diagramContainer.current.textContent = code
await mermaid.default.init(undefined, diagramContainer.current) await mermaid.init(undefined, diagramContainer.current)
} catch (error) { } catch (error) {
const message = (error as Error).message const message = (error as Error).message
log.error(error) log.error(error)
diagramContainer.current?.querySelectorAll('svg').forEach((child) => child.remove()) diagramContainer.current?.querySelectorAll('iframe').forEach((child) => child.remove())
throw new Error(message ?? t('renderer.mermaid.unknownError')) throw new Error(message ?? t('renderer.mermaid.unknownError'))
} }
}, [code, t]) }, [code, t])
@ -70,7 +70,7 @@ export const MermaidChart: React.FC<CodeProps> = ({ code }) => {
</ShowIf> </ShowIf>
<div <div
{...cypressId('mermaid-frame')} {...cypressId('mermaid-frame')}
className={`text-center ${styles['mermaid']} text-black`} className={`text-center ${styles['mermaid']} bg-dark text-black`}
ref={diagramContainer} ref={diagramContainer}
/> />
</Fragment> </Fragment>