markdown-it-configurator (#626)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Philip Molares 2020-10-08 22:24:42 +02:00 committed by GitHub
parent 89968387c2
commit 0670cddb0b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 524 additions and 360 deletions

View file

@ -1,10 +1,9 @@
import MarkdownIt from 'markdown-it'
import markdownItContainer from 'markdown-it-container'
import React, { useCallback } from 'react'
import React, { useMemo } from 'react'
import { Table } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import { BasicMarkdownRenderer } from '../../../markdown-renderer/basic-markdown-renderer'
import { createRenderContainer, validAlertLevels } from '../../../markdown-renderer/markdown-it-plugins/alert-container'
import { BasicMarkdownItConfigurator } from '../../../markdown-renderer/markdown-it-configurator/BasicMarkdownItConfigurator'
import { alertContainer } from '../../../markdown-renderer/markdown-it-plugins/alert-container'
import { HighlightedCode } from '../../../markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code'
import './cheatsheet.scss'
@ -31,10 +30,10 @@ export const Cheatsheet: React.FC = () => {
`:::info\n${t('editor.help.cheatsheet.exampleAlert')}\n:::`
]
const markdownItPlugins = useCallback((md: MarkdownIt) => {
validAlertLevels.forEach(level => {
md.use(markdownItContainer, level, { render: createRenderContainer(level) })
})
const markdownIt = useMemo(() => {
return new BasicMarkdownItConfigurator()
.pushConfig(alertContainer)
.buildConfiguredMarkdownIt()
}, [])
return (
@ -53,7 +52,7 @@ export const Cheatsheet: React.FC = () => {
<BasicMarkdownRenderer
content={code}
wide={false}
onConfigureMarkdownIt={markdownItPlugins}
markdownIt={markdownIt}
/>
</td>
<td className={'markdown-body'}>