mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
a323f3af75
* Implement floating Add comment button * Fix comment typo * Remove unused imports * Make tooltip always appear above cursor Co-authored-by: Domagoj Kriskovic <dom.kriskovic@overleaf.com> * Refactor how new comment form is positioned * Add missing file * Create new map when rendering positions * Use codemirror state to manage ranges and allow for mutliple in-progress comments * Memoise sorting * Create new ranges map each time it is changed * Add back mutation observer * Only allow single tooltip * Fix typo * Convert state field to store a single tooltip * Make add comment tooltip content a react component * Refactor to remove usages of !important * Use RangeSet to keep track of new comment ranges * Fix logic broken in rebase * Map ranges through document changes * Add decorations for in-progress comments * Use set-review-panel-open rather than an editor event to open review panel * Implement new designs for add comment form * Add padding to textarea * Fix bug where comment was being submitted for incorrect range * Add missing key to ReviewPanelAddComment * Store new comment ranges as a DecorationSet * Small refactor to how ReviewPanelAddCommens are rendered * Make op prop to ReviewPanelEntry required * Add handling for disabling of add comemnt form buttons * Move viewer check inside AddCommentTooltip * Ensure that add comment button doesn't reshow when collaborators edit the document * Remove unneeded op check in ReviewPanelEntry * Update services/web/frontend/js/features/review-panel-new/components/review-panel-add-comment.tsx Co-authored-by: Domagoj Kriskovic <dom.kriskovic@overleaf.com> --------- Co-authored-by: Domagoj Kriskovic <dom.kriskovic@overleaf.com> GitOrigin-RevId: 3110845f6a557310f3bf72014689e2f2ab53e966
94 lines
3 KiB
TypeScript
94 lines
3 KiB
TypeScript
import { Dispatch, memo, SetStateAction, useCallback, useState } from 'react'
|
|
import { Change, CommentOperation } from '../../../../../types/change'
|
|
import { ReviewPanelMessage } from './review-panel-message'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
useThreadsActionsContext,
|
|
useThreadsContext,
|
|
} from '../context/threads-context'
|
|
import AutoExpandingTextArea from '@/shared/components/auto-expanding-text-area'
|
|
import ReviewPanelResolvedMessage from './review-panel-resolved-message'
|
|
import { ReviewPanelResolvedCommentThread } from '../../../../../types/review-panel/comment-thread'
|
|
import useSubmittableTextInput from '../hooks/use-submittable-text-input'
|
|
|
|
export const ReviewPanelCommentContent = memo<{
|
|
comment: Change<CommentOperation>
|
|
isResolved: boolean
|
|
}>(({ comment, isResolved }) => {
|
|
const { t } = useTranslation()
|
|
const [submitting, setSubmitting] = useState(false)
|
|
const [error, setError] = useState<Error>()
|
|
const threads = useThreadsContext()
|
|
const { resolveThread, addMessage } = useThreadsActionsContext()
|
|
|
|
const handleSubmitReply = useCallback(
|
|
(content: string, setContent: Dispatch<SetStateAction<string>>) => {
|
|
setSubmitting(true)
|
|
addMessage(comment.op.t, content)
|
|
.then(() => {
|
|
setContent('')
|
|
})
|
|
.catch(error => {
|
|
setError(error)
|
|
})
|
|
.finally(() => {
|
|
setSubmitting(false)
|
|
})
|
|
},
|
|
[addMessage, comment.op.t]
|
|
)
|
|
|
|
const { handleChange, handleKeyPress, content } =
|
|
useSubmittableTextInput(handleSubmitReply)
|
|
|
|
const thread = threads?.[comment.op.t]
|
|
if (!thread) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="review-panel-entry-content">
|
|
{thread.messages.map((message, i) => {
|
|
const isReply = i !== 0
|
|
|
|
return (
|
|
<div key={message.id} className="review-panel-comment-wrapper">
|
|
{isReply && <div className="review-panel-comment-reply-divider" />}
|
|
<ReviewPanelMessage
|
|
message={message}
|
|
threadId={comment.op.t}
|
|
isReply={isReply}
|
|
hasReplies={!isReply && thread.messages.length > 1}
|
|
onResolve={() => resolveThread(comment.op.t)}
|
|
isThreadResolved={isResolved}
|
|
/>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
{isResolved && (
|
|
<div className="review-panel-comment-wrapper">
|
|
<div className="review-panel-comment-reply-divider" />
|
|
<ReviewPanelResolvedMessage
|
|
thread={thread as ReviewPanelResolvedCommentThread}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{!isResolved && (
|
|
<AutoExpandingTextArea
|
|
name="content"
|
|
className="review-panel-comment-input"
|
|
onChange={handleChange}
|
|
onKeyDown={handleKeyPress}
|
|
placeholder={t('reply')}
|
|
value={content}
|
|
disabled={submitting}
|
|
/>
|
|
)}
|
|
|
|
{error && <div>{error.message}</div>}
|
|
</div>
|
|
)
|
|
})
|
|
ReviewPanelCommentContent.displayName = 'ReviewPanelCommentContent'
|