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

Show warning if note is longer than configured maximum length (#534)

Browse source 
* Add maximum document length config option

* Show remaining characters in tooltip of status-bar length-info

* Remove unnecessary checkDocumentLength function

* Add max-length warning

* Update translation wording

* Set dialog to medium size

* Add coloring to status-bar length info

* Improve wording in warning modal

* Add cypress e2e tests

I included the cypress-commands package and set the language level to ES6 to allow easier testing e.g. of element attributes.

* Changed way how the modal-advice was styled and positioned

* Show warning modal only on first length exceeding

* Improved length tooltip by adding messages when exceeding or reaching limit
This commit is contained in:
Erik Michelson 2020-09-05 16:36:46 +02:00 • committed by GitHub
parent 14dfb5f315
commit 79469c5ddc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 151 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/markdown-renderer/markdown-renderer.tsx
View file

@ -127,6 +127,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
wide
}) => {
const [tocAst, setTocAst] = useState<TocAst>()
const maxLength = useSelector((state: ApplicationState) => state.config.maxDocumentLength)
const lastTocAst = useRef<TocAst>()
const [yamlError, setYamlError] = useState(false)
const rawMetaRef = useRef<RawYAMLMetadata>()
@ -364,13 +365,14 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
// This is used if the front-matter callback is never called, because the user deleted everything regarding metadata from the document
rawMetaRef.current = undefined
}
const html: string = markdownIt.render(content)
const contentLines = content.split('\n')
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
return ReactHtmlParser(html, { transform: buildTransformer(newLines, allReplacers) })
}, [content, markdownIt, onMetaDataChange, onTaskCheckedChange])
}, [content, markdownIt, onMetaDataChange, onTaskCheckedChange, maxLength])
return (
<div className={'bg-light flex-fill'}>
@ -382,6 +384,11 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
</Trans>
</Alert>
</ShowIf>
<ShowIf condition={content.length > maxLength}>
<Alert variant='danger' dir={'auto'}>
<Trans i18nKey={'editor.error.limitReached.description'} values={{ maxLength }}/>
</Alert>
</ShowIf>
<div ref={documentElement} className={'markdown-body w-100 d-flex flex-column align-items-center'}>
{markdownReactDom}
</div>