diff --git a/src/components/DocumentForm/DocumentForm.js b/src/components/DocumentForm/DocumentForm.js index b9212fe1..93e05b95 100644 --- a/src/components/DocumentForm/DocumentForm.js +++ b/src/components/DocumentForm/DocumentForm.js @@ -1,6 +1,6 @@ /* eslint-disable react/jsx-props-no-spreading */ import React, { - useState, useMemo, useContext, + useState, useMemo, useContext, useEffect, } from 'react'; import { useRouter } from 'next/router'; import unfetch from 'unfetch'; @@ -15,6 +15,7 @@ import { Form, ProgressBar, Row, + Spinner, useAccordionToggle, } from 'react-bootstrap'; import * as yup from 'yup'; @@ -63,9 +64,11 @@ const DocumentForm = ({ const [contentType, setContentType] = useState(''); const [progress, setProgress] = useState({}); const [htmlValue, setHtmlValue] = useState(''); + const [slateLoading, setSlateLoading] = useState(false); const handleCloseModal = () => setShowModal(false); const handleShowModal = () => setShowModal(true); + const ContextAwareToggle = ({ children, disabled, eventKey, callback, }) => { @@ -323,6 +326,11 @@ const DocumentForm = ({ 'Other', ]; + useEffect(() => { + setSlateLoading(false); + }, [slateValue]); + + return ( { @@ -452,13 +460,37 @@ const DocumentForm = ({ editor={editor} value={slateValue} onChange={(value) => { + setSlateLoading(false); setSlateValue(value); props.setFieldValue(field.name, value); }} > + {slateLoading && ( +
+ + Loading... + +
+

+ Please wait, processing pasted content. +

+ + The page may become unresponsive. Please do not + close or navigate away from the page. + +
+
+ )} { + const isPasteCapture = (e.ctrlKey || e.metaKey) + && e.keyCode === 86; + if (isPasteCapture) { + setSlateLoading(true); + } + }]} placeholder="Paste or type here" id={field.name} className="slate-editor" diff --git a/src/style/custom.scss b/src/style/custom.scss index 62723cee..1ba45331 100644 --- a/src/style/custom.scss +++ b/src/style/custom.scss @@ -83,6 +83,16 @@ ol.breadcrumb { } } +#slate-loader { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + position: absolute; + width: 750px; + height: 350px; +} + .slate-ToolbarButton { width: 2.3rem; margin-right: 0.25rem;