mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-04 23:46:00 -05:00
5b6bbcb73c
[web] Migrate notifications and error boundaries on the editor page GitOrigin-RevId: c195ecf0dd9e38ec8326c823174e559e1f192ce1
86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
import { Trans, useTranslation } from 'react-i18next'
|
|
import { memo, useState } from 'react'
|
|
import { useLocation } from '@/shared/hooks/use-location'
|
|
import OLButton from '@/features/ui/components/ol/ol-button'
|
|
import OLModal, {
|
|
OLModalBody,
|
|
OLModalFooter,
|
|
OLModalHeader,
|
|
OLModalTitle,
|
|
} from '@/features/ui/components/ol/ol-modal'
|
|
|
|
export type OutOfSyncModalProps = {
|
|
editorContent: string
|
|
show: boolean
|
|
onHide: () => void
|
|
}
|
|
|
|
function OutOfSyncModal({ editorContent, show, onHide }: OutOfSyncModalProps) {
|
|
const { t } = useTranslation()
|
|
const location = useLocation()
|
|
const [editorContentShown, setEditorContentShown] = useState(false)
|
|
const editorContentRows = (editorContent.match(/\n/g)?.length || 0) + 1
|
|
|
|
// Reload the page to avoid staying in an inconsistent state.
|
|
// https://github.com/overleaf/issues/issues/3694
|
|
function done() {
|
|
onHide()
|
|
location.reload()
|
|
}
|
|
|
|
return (
|
|
<OLModal
|
|
show={show}
|
|
onHide={done}
|
|
className="out-of-sync-modal"
|
|
backdrop={false}
|
|
keyboard={false}
|
|
>
|
|
<OLModalHeader closeButton>
|
|
<OLModalTitle>{t('out_of_sync')}</OLModalTitle>
|
|
</OLModalHeader>
|
|
<OLModalBody className="modal-body-share">
|
|
<Trans
|
|
i18nKey="out_of_sync_detail"
|
|
components={[
|
|
// eslint-disable-next-line react/jsx-key
|
|
<br />,
|
|
// eslint-disable-next-line jsx-a11y/anchor-has-content,react/jsx-key
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href="/learn/Kb/Editor_out_of_sync_problems"
|
|
/>,
|
|
]}
|
|
/>
|
|
</OLModalBody>
|
|
<OLModalBody>
|
|
<OLButton
|
|
variant="secondary"
|
|
onClick={() => setEditorContentShown(shown => !shown)}
|
|
>
|
|
{editorContentShown
|
|
? t('hide_local_file_contents')
|
|
: t('show_local_file_contents')}
|
|
</OLButton>
|
|
{editorContentShown ? (
|
|
<div className="text-preview">
|
|
<textarea
|
|
className="scroll-container"
|
|
readOnly
|
|
rows={editorContentRows}
|
|
value={editorContent}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</OLModalBody>
|
|
<OLModalFooter>
|
|
<OLButton variant="secondary" onClick={done}>
|
|
{t('reload_editor')}
|
|
</OLButton>
|
|
</OLModalFooter>
|
|
</OLModal>
|
|
)
|
|
}
|
|
|
|
export default memo(OutOfSyncModal)
|