mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-14 23:24:46 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

50
src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.tsx
View file

@ -1,5 +1,4 @@
import hljs from 'highlight.js'
import React, { Fragment, useMemo } from 'react'
import React, { Fragment, ReactElement, useEffect, useState } from 'react'
import ReactHtmlParser from 'react-html-parser'
import { CopyToClipboardButton } from '../../../../common/copyable/copy-to-clipboard-button/copy-to-clipboard-button'
import '../../../utils/button-inside.scss'
@ -21,10 +20,6 @@ export const escapeHtml = (unsafe: string): string => {
.replace(/'/g, ''')
}
const checkIfLanguageIsSupported = (language: string): boolean => {
return hljs.listLanguages().includes(language)
}
const correctLanguage = (language: string | undefined): string | undefined => {
switch (language) {
case 'html':
@ -34,29 +29,36 @@ const correctLanguage = (language: string | undefined): string | undefined => {
}
}
const replaceCode = (code: string): ReactElement[][] => {
return code.split('\n')
.filter(line => !!line)
.map(line => ReactHtmlParser(line))
}
export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language, startLineNumber, wrapLines }) => {
const highlightedCode = useMemo(() => {
const replacedLanguage = correctLanguage(language)
return ((!!replacedLanguage && checkIfLanguageIsSupported(replacedLanguage)) ? hljs.highlight(replacedLanguage, code).value : escapeHtml(code))
.split('\n')
.filter(line => !!line)
.map(line => ReactHtmlParser(line))
}, [code, language])
const [dom, setDom] = useState<ReactElement[]>()
useEffect(() => {
import(/* webpackChunkName: "highlight.js" */ 'highlight.js').then((hljs) => {
const correctedLanguage = correctLanguage(language)
const languageSupported = (lang: string) => hljs.listLanguages().includes(lang)
const unreplacedCode = !!correctedLanguage && languageSupported(correctedLanguage) ? hljs.highlight(correctedLanguage, code).value : escapeHtml(code)
const replacedDom = replaceCode(unreplacedCode).map((line, index) => (
<Fragment key={index}>
<span className={'linenumber'} data-line-number={(startLineNumber || 1) + index}/>
<div className={'codeline'}>
{line}
</div>
</Fragment>
))
setDom(replacedDom)
}).catch(() => { console.error('error while loading highlight.js') })
}, [code, language, startLineNumber])
return (
<Fragment>
<code className={`hljs ${startLineNumber !== undefined ? 'showGutter' : ''} ${wrapLines ? 'wrapLines' : ''}`}>
{
highlightedCode
.map((line, index) => (
<Fragment key={index}>
<span className={'linenumber'} data-line-number={(startLineNumber || 1) + index}/>
<div className={'codeline'}>
{line}
</div>
</Fragment>
))
}
{ dom }
</code>
<div className={'text-right button-inside'}>
<CopyToClipboardButton content={code}/>