mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-18 00:54:43 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

refactor(code highlighter): Use sanitizer directly instead of building a node preprocessor

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-09-23 10:14:24 +02:00
parent 0fc6271b57
commit 3b15b83fe1
1 changed files with 2 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/markdown-renderer/markdown-extension/highlighted-fence/hooks/use-code-dom.tsx
View file

@ -6,9 +6,9 @@
import type { ReactElement } from 'react' import type { ReactElement } from 'react'
import React, { Fragment, useMemo } from 'react' import React, { Fragment, useMemo } from 'react'
import { MarkdownExtensionCollection } from '../../markdown-extension-collection'
import convertHtmlToReact from '@hedgedoc/html-to-react' import convertHtmlToReact from '@hedgedoc/html-to-react'
import type { HLJSApi } from 'highlight.js' import type { HLJSApi } from 'highlight.js'
import { sanitize } from 'dompurify'
/** /**
* Highlights the given code using highlight.js. If the language wasn't recognized then it won't be highlighted. * Highlights the given code using highlight.js. If the language wasn't recognized then it won't be highlighted.
@ -32,8 +32,6 @@ export const useCodeDom = (code: string, hljs: HLJSApi | undefined, language?: s
}, [code, hljs, language]) }, [code, hljs, language])
} }
const nodeProcessor = new MarkdownExtensionCollection([]).buildFlatNodeProcessor()
/** /**
* Converts the given html code to react elements without any custom transformation but with sanitizing. * Converts the given html code to react elements without any custom transformation but with sanitizing.
* *
@ -41,13 +39,7 @@ const nodeProcessor = new MarkdownExtensionCollection([]).buildFlatNodeProcessor
* @return the code represented as react elements * @return the code represented as react elements
*/ */
const createHtmlLinesToReactDOM = (code: string[]): ReactElement[] => { const createHtmlLinesToReactDOM = (code: string[]): ReactElement[] => {
return code.map((line, lineIndex) => ( return code.map((line, lineIndex) => <Fragment key={lineIndex}>{convertHtmlToReact(sanitize(line))}</Fragment>)
<Fragment key={lineIndex}>
{convertHtmlToReact(line, {
preprocessNodes: nodeProcessor
})}
</Fragment>
))
} }
/** /**