mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-22 03:05:19 -04:00
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:
parent
89968387c2
commit
0670cddb0b
42 changed files with 524 additions and 360 deletions
|
@ -1,13 +1,4 @@
|
|||
import MarkdownIt from 'markdown-it'
|
||||
import abbreviation from 'markdown-it-abbr'
|
||||
import definitionList from 'markdown-it-deflist'
|
||||
import emoji from 'markdown-it-emoji'
|
||||
import footnote from 'markdown-it-footnote'
|
||||
import imsize from 'markdown-it-imsize'
|
||||
import inserted from 'markdown-it-ins'
|
||||
import marked from 'markdown-it-mark'
|
||||
import subscript from 'markdown-it-sub'
|
||||
import superscript from 'markdown-it-sup'
|
||||
import React, { ReactElement, RefObject, useMemo, useRef } from 'react'
|
||||
import { Alert } from 'react-bootstrap'
|
||||
import ReactHtmlParser from 'react-html-parser'
|
||||
|
@ -15,9 +6,6 @@ import { Trans } from 'react-i18next'
|
|||
import { useSelector } from 'react-redux'
|
||||
import { ApplicationState } from '../../redux'
|
||||
import { ShowIf } from '../common/show-if/show-if'
|
||||
import { combinedEmojiData } from './markdown-it-plugins/emoji/mapping'
|
||||
import { linkifyExtra } from './markdown-it-plugins/linkify-extra'
|
||||
import { MarkdownItParserDebugger } from './markdown-it-plugins/parser-debugger'
|
||||
import './markdown-renderer.scss'
|
||||
import { ComponentReplacer } from './replace-components/ComponentReplacer'
|
||||
import { AdditionalMarkdownRendererProps, LineKeys } from './types'
|
||||
|
@ -25,8 +13,8 @@ import { buildTransformer } from './utils/html-react-transformer'
|
|||
import { calculateNewLineNumberMapping } from './utils/line-number-mapping'
|
||||
|
||||
export interface BasicMarkdownRendererProps {
|
||||
componentReplacers?: ComponentReplacer[],
|
||||
onConfigureMarkdownIt?: (md: MarkdownIt) => void,
|
||||
componentReplacers?: () => ComponentReplacer[],
|
||||
markdownIt: MarkdownIt,
|
||||
documentReference?: RefObject<HTMLDivElement>
|
||||
onBeforeRendering?: () => void
|
||||
}
|
||||
|
@ -36,44 +24,12 @@ export const BasicMarkdownRenderer: React.FC<BasicMarkdownRendererProps & Additi
|
|||
content,
|
||||
wide,
|
||||
componentReplacers,
|
||||
onConfigureMarkdownIt,
|
||||
markdownIt,
|
||||
documentReference,
|
||||
onBeforeRendering
|
||||
}) => {
|
||||
const maxLength = useSelector((state: ApplicationState) => state.config.maxDocumentLength)
|
||||
|
||||
const markdownIt = useMemo(() => {
|
||||
const md = new MarkdownIt('default', {
|
||||
html: true,
|
||||
breaks: true,
|
||||
langPrefix: '',
|
||||
typographer: true
|
||||
})
|
||||
|
||||
md.use(emoji, {
|
||||
defs: combinedEmojiData
|
||||
})
|
||||
md.use(abbreviation)
|
||||
md.use(definitionList)
|
||||
md.use(subscript)
|
||||
md.use(superscript)
|
||||
md.use(inserted)
|
||||
md.use(marked)
|
||||
md.use(footnote)
|
||||
md.use(imsize)
|
||||
|
||||
if (onConfigureMarkdownIt) {
|
||||
onConfigureMarkdownIt(md)
|
||||
}
|
||||
|
||||
md.use(linkifyExtra)
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
md.use(MarkdownItParserDebugger)
|
||||
}
|
||||
|
||||
return md
|
||||
}, [onConfigureMarkdownIt])
|
||||
|
||||
const oldMarkdownLineKeys = useRef<LineKeys[]>()
|
||||
const lastUsedLineId = useRef<number>(0)
|
||||
|
||||
|
@ -87,7 +43,7 @@ export const BasicMarkdownRenderer: React.FC<BasicMarkdownRendererProps & Additi
|
|||
const { lines: newLines, lastUsedLineId: newLastUsedLineId } = calculateNewLineNumberMapping(contentLines, oldMarkdownLineKeys.current ?? [], lastUsedLineId.current)
|
||||
oldMarkdownLineKeys.current = newLines
|
||||
lastUsedLineId.current = newLastUsedLineId
|
||||
const transformer = componentReplacers ? buildTransformer(newLines, componentReplacers) : undefined
|
||||
const transformer = componentReplacers ? buildTransformer(newLines, componentReplacers()) : undefined
|
||||
return ReactHtmlParser(html, { transform: transformer })
|
||||
}, [onBeforeRendering, content, maxLength, markdownIt, componentReplacers])
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue