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

Collected minor changes from #837 (#962)

Browse source 
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-01-23 22:01:53 +01:00 • committed by GitHub
parent 0ef81eca5d
commit 1777ba848f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 261 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/components/markdown-renderer/basic-markdown-renderer.tsx
View file

@ -1,71 +1,45 @@
/*
SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
SPDX-License-Identifier: AGPL-3.0-only
*/
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import MarkdownIt from 'markdown-it'
import React, { ReactElement, RefObject, useMemo, useRef } from 'react'
import { Alert } from 'react-bootstrap'
import ReactHtmlParser from 'react-html-parser'
import { Trans } from 'react-i18next'
import React, { RefObject, useMemo } from 'react'
import { useSelector } from 'react-redux'
import { ApplicationState } from '../../redux'
import { ShowIf } from '../common/show-if/show-if'
import { DocumentLengthLimitReachedAlert } from './document-length-limit-reached-alert'
import { useConvertMarkdownToReactDom } from './hooks/use-convert-markdown-to-react-dom'
import './markdown-renderer.scss'
import { ComponentReplacer } from './replace-components/ComponentReplacer'
import { AdditionalMarkdownRendererProps, LineKeys } from './types'
import { buildTransformer } from './utils/html-react-transformer'
import { calculateNewLineNumberMapping } from './utils/line-number-mapping'
import { AdditionalMarkdownRendererProps } from './types'
export interface BasicMarkdownRendererProps {
componentReplacers?: () => ComponentReplacer[],
markdownIt: MarkdownIt,
documentReference?: RefObject<HTMLDivElement>
onBeforeRendering?: () => void
onPostRendering?: () => void
onAfterRendering?: () => void
}
export const BasicMarkdownRenderer: React.FC<BasicMarkdownRendererProps & AdditionalMarkdownRendererProps> = ({
className,
content,
wide,
componentReplacers,
markdownIt,
documentReference,
onBeforeRendering,
onPostRendering
}) => {
export const BasicMarkdownRenderer: React.FC<BasicMarkdownRendererProps & AdditionalMarkdownRendererProps> = (
{
className,
content,
wide,
componentReplacers,
markdownIt,
documentReference,
onBeforeRendering,
onAfterRendering
}) => {
const maxLength = useSelector((state: ApplicationState) => state.config.maxDocumentLength)
const oldMarkdownLineKeys = useRef<LineKeys[]>()
const lastUsedLineId = useRef<number>(0)
const markdownReactDom: ReactElement[] = useMemo(() => {
if (onBeforeRendering) {
onBeforeRendering()
}
const trimmedContent = content.substr(0, maxLength)
const html: string = markdownIt.render(trimmedContent)
const contentLines = trimmedContent.split('\n')
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 rendering = ReactHtmlParser(html, { transform: transformer })
if (onPostRendering) {
onPostRendering()
}
return rendering
}, [onBeforeRendering, onPostRendering, content, maxLength, markdownIt, componentReplacers])
const trimmedContent = useMemo(() => content.length > maxLength ? content.substr(0, maxLength) : content, [content, maxLength])
const markdownReactDom = useConvertMarkdownToReactDom(trimmedContent, markdownIt, componentReplacers, onBeforeRendering, onAfterRendering)
return (
<div className={`${className || ''} d-flex flex-column align-items-center ${wide ? 'wider' : ''}`}>
<ShowIf condition={content.length > maxLength}>
<Alert variant='danger' dir={'auto'} data-cy={'limitReachedMessage'}>
<Trans i18nKey={'editor.error.limitReached.description'} values={{ maxLength }}/>
</Alert>
</ShowIf>
<div className={`${className ?? ''} d-flex flex-column align-items-center ${wide ? 'wider' : ''}`}>
<DocumentLengthLimitReachedAlert contentLength={content.length}/>
<div ref={documentReference} className={'markdown-body w-100 d-flex flex-column align-items-center'}>
{markdownReactDom}
</div>