mirror of
https://github.com/overleaf/overleaf.git
synced 2024-09-16 02:52:31 -04:00
19dd2f67e2
Implement legacy source editor survey: * Force user to switch to cm6 if they haven't seen switch away survey * Only show user switch away survey if they open ace from another editor * We need to wait 3 seconds until the survey is being shown * Add comment to explain the reasoning of not showing cm6 switch away survey for rich text users * Use localstorage `editor.has_seen_cm6_switch_away_survey` setter to not show the survey if user has seen the survey * the `editor.has_seen_cm6_switch_away_survey` will have the value `true` even if user is not interacting with it, so update comment to reflect that * Add `once: true` option to keydown event to avoid unnecessary callback invocation upon key presses GitOrigin-RevId: c26be2bb39efac2dff112c821fca893e5993dcbf
98 lines
3 KiB
TypeScript
98 lines
3 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
import { Button } from 'react-bootstrap'
|
|
import customLocalStorage from '../../../infrastructure/local-storage'
|
|
import useScopeValue from '../../../shared/hooks/use-scope-value'
|
|
|
|
type CM6SwitchAwaySurveyState = 'disabled' | 'enabled' | 'shown'
|
|
|
|
export default function CM6SwitchAwaySurvey() {
|
|
const [state, setState] = useState<CM6SwitchAwaySurveyState>('disabled')
|
|
const [newSourceEditor] = useScopeValue('editor.newSourceEditor')
|
|
const [richText] = useScopeValue('editor.showRichText')
|
|
const initialRichTextPreference = useRef<boolean>(richText)
|
|
|
|
useEffect(() => {
|
|
// If the user has previously seen the survey, then don't show it again
|
|
const hasSeenCM6SwitchAwaySurvey = customLocalStorage.getItem(
|
|
'editor.has_seen_cm6_switch_away_survey'
|
|
)
|
|
if (hasSeenCM6SwitchAwaySurvey) return
|
|
|
|
if (initialRichTextPreference.current) {
|
|
if (!richText && newSourceEditor) {
|
|
// If user change from rich text to cm6, we remove the rich text preference
|
|
// so if user use rich text -> cm6 -> ace, we will show the survey
|
|
initialRichTextPreference.current = false
|
|
}
|
|
|
|
// If the user loaded rich text initially, then don't show the survey
|
|
// (we are assuming that they will not have used CM6 as much)
|
|
return
|
|
}
|
|
|
|
if (!newSourceEditor) {
|
|
setState('enabled')
|
|
}
|
|
}, [newSourceEditor, richText])
|
|
|
|
useEffect(() => {
|
|
if (state === 'enabled') {
|
|
const handleKeyDown = () => {
|
|
const TIME_FOR_SURVEY_TO_APPEAR = 3000
|
|
|
|
setTimeout(() => {
|
|
setState('shown')
|
|
customLocalStorage.setItem(
|
|
'editor.has_seen_cm6_switch_away_survey',
|
|
true
|
|
)
|
|
}, TIME_FOR_SURVEY_TO_APPEAR)
|
|
}
|
|
|
|
// can't access the ace editor directly, so add the keydown event
|
|
// to window
|
|
window?.addEventListener('keydown', handleKeyDown, { once: true })
|
|
}
|
|
}, [state])
|
|
|
|
const handleClose = useCallback(() => {
|
|
setState('disabled')
|
|
}, [])
|
|
|
|
if (state !== 'shown') {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="alert alert-success cm6-switch-away-survey" role="alert">
|
|
<Button
|
|
className="close"
|
|
data-dismiss="alert"
|
|
aria-label="Close"
|
|
onClick={handleClose}
|
|
>
|
|
<span aria-hidden="true">×</span>
|
|
</Button>
|
|
<div className="warning-content">
|
|
<div>
|
|
<div className="warning-text">
|
|
We noticed that you're still using the{' '}
|
|
<strong>Source (legacy)</strong> editor.
|
|
</div>
|
|
<div className="warning-text">Could you let us know why?</div>
|
|
</div>
|
|
<div style={{ display: 'inline-flex' }}>
|
|
<a
|
|
href="https://forms.gle/aW5tMRASpQ7Snds6A"
|
|
className="btn btn-sm btn-info"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
onClick={handleClose}
|
|
>
|
|
Take survey
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|