mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-06-06 17:41:52 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

29
src/components/editor/editor-pane/status-bar/status-bar.tsx
View file

@ -1,5 +1,5 @@
import { Editor, Position } from 'codemirror'
import React from 'react'
import React, { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { ShowIf } from '../../../common/show-if/show-if'
import './status-bar.scss'
@ -10,6 +10,7 @@ export interface StatusBarInfo {
selectedLines: number
linesInDocument: number
charactersInDocument: number
remainingCharacters: number
}
export const defaultState: StatusBarInfo = {
@ -17,20 +18,32 @@ export const defaultState: StatusBarInfo = {
selectedColumns: 0,
selectedLines: 0,
linesInDocument: 0,
charactersInDocument: 0
charactersInDocument: 0,
remainingCharacters: 0
}
export const createStatusInfo = (editor: Editor): StatusBarInfo => ({
export const createStatusInfo = (editor: Editor, maxDocumentLength: number): StatusBarInfo => ({
position: editor.getCursor(),
charactersInDocument: editor.getValue().length,
remainingCharacters: maxDocumentLength - editor.getValue().length,
linesInDocument: editor.lineCount(),
selectedColumns: editor.getSelection().length,
selectedLines: editor.getSelection().split('\n').length
})
export const StatusBar: React.FC<StatusBarInfo> = ({ position, selectedColumns, selectedLines, charactersInDocument, linesInDocument }) => {
export const StatusBar: React.FC<StatusBarInfo> = ({ position, selectedColumns, selectedLines, charactersInDocument, linesInDocument, remainingCharacters }) => {
const { t } = useTranslation()
const getLengthTooltip = useMemo(() => {
if (remainingCharacters === 0) {
return t('editor.statusBar.lengthTooltip.maximumReached')
}
if (remainingCharacters < 0) {
return t('editor.statusBar.lengthTooltip.exceeded', { exceeded: -remainingCharacters })
}
return t('editor.statusBar.lengthTooltip.remaining', { remaining: remainingCharacters })
}, [remainingCharacters, t])
return (
<div className="d-flex flex-row status-bar px-2">
<div>
@ -46,7 +59,13 @@ export const StatusBar: React.FC<StatusBarInfo> = ({ position, selectedColumns,
</div>
<div className="ml-auto">
<span>{t('editor.statusBar.lines', { lines: linesInDocument })}</span>
<span title={t('editor.statusBar.lengthTooltip')}>&nbsp;–&nbsp;{t('editor.statusBar.length', { length: charactersInDocument })}</span>
&nbsp;–&nbsp;
<span
title={getLengthTooltip}
className={remainingCharacters <= 0 ? 'text-danger' : remainingCharacters <= 100 ? 'text-warning' : ''}
>
{t('editor.statusBar.length', { length: charactersInDocument })}
</span>
</div>
</div>
)