overleaf/services/web/frontend/js/features/review-panel-new/components/review-panel-add-comment.tsx
Alf Eaton c6633632d6 Move CodeMirror contexts into a separate file (#20643)
GitOrigin-RevId: 8425454a75ff8160a03fda1be5bda2242b41f6cd
2024-09-30 08:04:48 +00:00

165 lines
4.8 KiB
TypeScript

import { FC, FormEventHandler, useCallback, useState, useRef } from 'react'
import {
useCodeMirrorStateContext,
useCodeMirrorViewContext,
} from '@/features/source-editor/components/codemirror-context'
import { EditorSelection } from '@codemirror/state'
import { useTranslation } from 'react-i18next'
import { useThreadsActionsContext } from '../context/threads-context'
import { removeNewCommentRangeEffect } from '@/features/source-editor/extensions/add-comment'
import useSubmittableTextInput from '../hooks/use-submittable-text-input'
import AutoExpandingTextArea from '@/shared/components/auto-expanding-text-area'
import { Button } from 'react-bootstrap'
import { ReviewPanelEntry } from './review-panel-entry'
import { ThreadId } from '../../../../../types/review-panel/review-panel'
import { Decoration } from '@codemirror/view'
export const ReviewPanelAddComment: FC<{
docId: string
from: number
to: number
value: Decoration
top: number | undefined
}> = ({ from, to, value, top, docId }) => {
const { t } = useTranslation()
const view = useCodeMirrorViewContext()
const state = useCodeMirrorStateContext()
const { addComment } = useThreadsActionsContext()
const [error, setError] = useState<Error>()
const [submitting, setSubmitting] = useState(false)
const handleClose = useCallback(() => {
view.dispatch({
effects: removeNewCommentRangeEffect.of(value),
})
}, [view, value])
const submitForm = useCallback(
message => {
setSubmitting(true)
const content = view.state.sliceDoc(from, to)
addComment(from, content, message)
.catch(setError)
.finally(() => setSubmitting(false))
view.dispatch({
selection: EditorSelection.cursor(view.state.selection.main.anchor),
})
handleClose()
},
[addComment, view, handleClose, from, to]
)
const { handleChange, handleKeyPress, content } =
useSubmittableTextInput(submitForm)
const handleBlur = useCallback(() => {
if (content === '') {
handleClose()
}
}, [content, handleClose])
const handleSubmit = useCallback<FormEventHandler>(
event => {
event.preventDefault()
submitForm(content)
},
[submitForm, content]
)
// We only ever want to focus the element once
const hasBeenFocused = useRef(false)
// Auto-focus the textarea once the element has been correctly positioned.
// We cannot use the autofocus attribute as we need to wait until the parent element
// has been positioned (with the "top" attribute) to avoid scrolling to the initial
// position of the element
const observerCallback = useCallback(mutationList => {
if (hasBeenFocused.current) {
return
}
for (const mutation of mutationList) {
if (mutation.target.style.top) {
const textArea = mutation.target.getElementsByTagName('textarea')[0]
if (textArea) {
textArea.focus()
hasBeenFocused.current = true
}
}
}
}, [])
const handleElement = useCallback(
(element: HTMLElement | null) => {
if (element) {
element.dispatchEvent(new Event('review-panel:position'))
const observer = new MutationObserver(observerCallback)
const entryWrapper = element.closest('.review-panel-entry')
if (entryWrapper) {
observer.observe(entryWrapper, {
attributes: true,
attributeFilter: ['style'],
})
return () => observer.disconnect()
}
}
},
[observerCallback]
)
return (
<ReviewPanelEntry
docId={docId}
top={top}
position={from}
op={{
p: from,
c: state.sliceDoc(from, to),
t: value.spec.id as ThreadId,
}}
selectLineOnFocus={false}
>
<form
className="review-panel-entry-content"
onBlur={handleBlur}
onSubmit={handleSubmit}
ref={handleElement}
>
<AutoExpandingTextArea
name="message"
className="review-panel-add-comment-textarea"
onChange={handleChange}
onKeyDown={handleKeyPress}
placeholder={t('add_your_comment_here')}
value={content}
disabled={submitting}
/>
<div className="review-panel-add-comment-buttons">
<Button
bsSize="sm"
bsStyle={null}
className="review-panel-add-comment-cancel-button"
disabled={submitting}
onClick={handleClose}
>
{t('cancel')}
</Button>
<Button
type="submit"
bsSize="sm"
className="btn-primary"
disabled={content === '' || submitting}
>
{t('comment')}
</Button>
</div>
{error && <div>{error.message}</div>}
</form>
</ReviewPanelEntry>
)
}