import { Trans, useTranslation } from 'react-i18next' import { Button, Modal } from 'react-bootstrap' import AccessibleModal from '@/shared/components/accessible-modal' import { memo, useState } from 'react' import { useLocation } from '@/shared/hooks/use-location' 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 ( {t('out_of_sync')} , // eslint-disable-next-line jsx-a11y/anchor-has-content,react/jsx-key , ]} /> {editorContentShown ? (