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

* 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

src/components/editor/editor-modals/max-length-warning-modal.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Button, Modal } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { CommonModal } from '../../common/modals/common-modal'
+
+export interface MaxLengthWarningModalProps {
+  show: boolean
+  onHide: () => void
+  maxLength: number
+}
+
+export const MaxLengthWarningModal: React.FC<MaxLengthWarningModalProps> = ({ show, onHide, maxLength }) => {
+  useTranslation()
+
+  return (
+    <CommonModal show={show} onHide={onHide} titleI18nKey={'editor.error.limitReached.title'} closeButton={true}>
+      <Modal.Body className={'limit-warning'}>
+        <Trans i18nKey={'editor.error.limitReached.description'} values={{ maxLength }} />
+        <strong className='mt-2 d-block'><Trans i18nKey={'editor.error.limitReached.advice'}/></strong>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={onHide}><Trans i18nKey={'common.close'}/></Button>
+      </Modal.Footer>
+    </CommonModal>
+  )
+}