overleaf/services/web/frontend/js/features/review-panel-new/components/review-panel-add-comment.tsx

62 lines
1.9 KiB
TypeScript
Raw Normal View History

Add review panel context providers and components (#19490) * Tidy up review panel components * Add ReviewPanel providers * [web] new design for review panel track change (#19544) * [web] new design for review panel track change * fixed mini view * mini icon style change * fix icon size * format date * useRangesUserContext hook * remove useRangesUserContext hook * using full class names * fix action icons hover * change wording for tooltips * added ReviewPanelChangeUser component * Update header in new review panel * Extract ReviewPanelTrackChangesMenuButton as a separate component * Remove wrapper div * Replace h2 with div for review panel label * Rename ReviewPanelTools to ReviewPanelHeader * Rename trackChangesExpanded -> trackChangesMenuExpanded * Dont break memoisation of ReviewPanelTrackChangesMenuButton * Fix the width of the track changes arrow icon * Update how prop types are declared * Remove new empty state from old review panel * Add empty state to new review panel * Add project members and owner to ChangesUsers context (#19624) --------- Co-authored-by: Alf Eaton <alf.eaton@overleaf.com> * Redesign comment entry in review panel (#19678) * Redesign comment entry in review panel * ReviewPanelCommentOptions component * remove unused prop * Tidying * Add conditional import * Optional changeManager * Add more split test compatibility * More split test compatibility * Fixes * Improve overview scrolling * Fix overview scrolling * Fix & simplify track changes toggle * Fix overview scrolling * Fix current file container * ExpandableContent component for messages in review panel (#19738) * ExpandableContent component for messages in review panel * remove isExpanded dependancy * Delete comment option for new review panel (#19772) * Delete comment option for new review panel * dont show thread warning if there are no replies * fix hasReplies issue * Implement initial collapsing overview files * Fix positioning of overview panel * Small styling changes * Add count of unresolved comments and tracked chanegs * More style adjustments * Move review-panel-overview styles into css file * Remove unused var --------- Co-authored-by: Domagoj Kriskovic <dom.kriskovic@overleaf.com> Co-authored-by: David Powell <david.powell@overleaf.com> Co-authored-by: David <33458145+davidmcpowell@users.noreply.github.com> GitOrigin-RevId: e67463443d541f88445a86eed5e2b6ec6040f9c7
2024-08-12 05:50:54 -04:00
import { FC, FormEventHandler, useCallback, useState } from 'react'
import {
useCodeMirrorStateContext,
useCodeMirrorViewContext,
} from '@/features/source-editor/components/codemirror-editor'
import { EditorSelection } from '@codemirror/state'
import { PANEL_WIDTH } from './review-panel'
import { useTranslation } from 'react-i18next'
import { useThreadsActionsContext } from '../context/threads-context'
export const ReviewPanelAddComment: FC = () => {
const { t } = useTranslation()
const view = useCodeMirrorViewContext()
// eslint-disable-next-line no-unused-vars
const _state = useCodeMirrorStateContext()
const { addComment } = useThreadsActionsContext()
const [error, setError] = useState<Error>()
const [showForm, setShowForm] = useState(false)
const handleSubmit = useCallback<FormEventHandler>(
event => {
event.preventDefault()
const { from, to } = view.state.selection.main
const content = view.state.sliceDoc(from, to)
const formData = new FormData(event.target as HTMLFormElement)
const message = formData.get('message') as string
addComment(from, content, message).catch(setError)
view.dispatch({
selection: EditorSelection.cursor(view.state.selection.main.anchor),
})
},
[addComment, view]
)
const handleElement = useCallback((element: HTMLElement | null) => {
if (element) {
element.dispatchEvent(new Event('review-panel:position'))
}
}, [])
if (!showForm) {
return <button onClick={() => setShowForm(true)}>{t('add_comment')}</button>
}
return (
<form
onSubmit={handleSubmit}
style={{ display: 'flex', flexDirection: 'column', width: PANEL_WIDTH }}
ref={handleElement}
>
{/* eslint-disable-next-line jsx-a11y/no-autofocus */}
<textarea name="message" rows={3} autoFocus />
<button type="submit">{t('comment')}</button>
{error && <div>{error.message}</div>}
</form>
)
}