mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-20 10:15:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Feature/lazy load components (#590)

Browse source
This commit is contained in:
mrdrogdrog 2020-09-26 09:54:17 +02:00 • committed by GitHub
parent 9c38655a92
commit 101292da92
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
46 changed files with 261 additions and 248 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx
View file

@ -1,4 +1,3 @@
import { parse } from 'flowchart.js'
import React, { useEffect, useRef, useState } from 'react'
import { Alert } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
@ -17,20 +16,21 @@ export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
if (diagramRef.current === null) {
return
}
const parserOutput = parse(code)
try {
parserOutput.drawSVG(diagramRef.current, {
'line-width': 2,
fill: 'none',
'font-size': '16px',
'font-family': 'Source Code Pro, twemoji, monospace'
})
setError(false)
} catch (error) {
setError(true)
}
const currentDiagramRef = diagramRef.current
import(/* webpackChunkName: "flowchart.js" */ 'flowchart.js').then((imp) => {
const parserOutput = imp.parse(code)
try {
parserOutput.drawSVG(currentDiagramRef, {
'line-width': 2,
fill: 'none',
'font-size': '16px',
'font-family': 'Source Code Pro, twemoji, monospace'
})
setError(false)
} catch (error) {
setError(true)
}
}).catch(() => { console.error('error while loading flowchart.js') })
return () => {
Array.from(currentDiagramRef.children).forEach(value => value.remove())
@ -41,8 +41,8 @@ export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
return (
<Alert variant={'danger'}>
<Trans i18nKey={'renderer.flowchart.invalidSyntax'}/>
</Alert>
)
</Alert>)
} else {
return <div ref={diagramRef} className={'text-center'}/>
}
return <div ref={diagramRef} className={'text-center'}/>
}