overleaf/services/web/frontend/js/features/source-editor/components/grammarly-warning.tsx
M Fahru d70e0b1c0e Implement grammarly warning alert on cm6 users
GitOrigin-RevId: ed272bbc385faa69811ec1891075906cdca1c984
2022-11-16 09:06:39 +00:00

65 lines
1.9 KiB
TypeScript

import { useCallback, useEffect, useState } from 'react'
import { Button } from 'react-bootstrap'
import customLocalStorage from '../../../infrastructure/local-storage'
import useScopeValue from '../../../shared/hooks/use-scope-value'
import grammarlyExtensionPresent from '../../../shared/utils/grammarly'
import getMeta from '../../../utils/meta'
export default function GrammarlyWarning() {
const [show, setShow] = useState(false)
const [newSourceEditor] = useScopeValue('editor.newSourceEditor')
const [showRichText] = useScopeValue('editor.showRichText')
const grammarly = grammarlyExtensionPresent()
const hasDismissedGrammarlyWarning = customLocalStorage.getItem(
'editor.has_dismissed_grammarly_warning'
)
useEffect(() => {
const showGrammarlyWarning =
!hasDismissedGrammarlyWarning &&
grammarly &&
newSourceEditor &&
!showRichText
if (showGrammarlyWarning) {
setShow(true)
}
}, [grammarly, hasDismissedGrammarlyWarning, newSourceEditor, showRichText])
const handleClose = useCallback(() => {
setShow(false)
customLocalStorage.setItem('editor.has_dismissed_grammarly_warning', true)
}, [])
if (!getMeta('ol-showNewSourceEditorOption')) {
return null
}
if (!show) {
return null
}
return (
<div className="alert alert-info grammarly-warning" role="alert">
<Button
className="close"
data-dismiss="alert"
aria-label="Close"
onClick={handleClose}
>
<span aria-hidden="true">&times;</span>
</Button>
<div className="warning-content">
A browser extension, for example Grammarly, may be slowing down
Overleaf.{' '}
<a
className="warning-link"
href="/learn/how-to/Use_Grammarly_with_Overleaf#Performance_issues"
target="_blank"
>
Find out how to avoid this
</a>
</div>
</div>
)
}