mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-24 21:12:38 -04: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
64 lines
2 KiB
TypeScript
64 lines
2 KiB
TypeScript
import { FC, useCallback, useState } from 'react'
|
|
import { AnyOperation } from '../../../../../types/change'
|
|
import {
|
|
useCodeMirrorStateContext,
|
|
useCodeMirrorViewContext,
|
|
} from '@/features/source-editor/components/codemirror-editor'
|
|
import { isSelectionWithinOp } from '../utils/is-selection-within-op'
|
|
import { EditorSelection } from '@codemirror/state'
|
|
import { EditorView } from '@codemirror/view'
|
|
import classNames from 'classnames'
|
|
|
|
export const ReviewPanelEntry: FC<{
|
|
position: number
|
|
op: AnyOperation
|
|
top?: number
|
|
className?: string
|
|
selectLineOnFocus?: boolean
|
|
}> = ({ children, position, top, op, className, selectLineOnFocus }) => {
|
|
const state = useCodeMirrorStateContext()
|
|
const view = useCodeMirrorViewContext()
|
|
const [focused, setFocused] = useState(false)
|
|
|
|
const highlighted = isSelectionWithinOp(op, state.selection.main)
|
|
|
|
const focusHandler = useCallback(() => {
|
|
setTimeout(() => {
|
|
// without setTimeout, error "EditorView.update are not allowed while an update is in progress" can occur
|
|
// this can be avoided by using onClick rather than onFocus but it will then not pick up <Tab> or <Shift+Tab> events for focusing entries
|
|
if (selectLineOnFocus) {
|
|
view.dispatch({
|
|
selection: EditorSelection.cursor(position),
|
|
effects: EditorView.scrollIntoView(position, { y: 'center' }),
|
|
})
|
|
}
|
|
}, 0)
|
|
setFocused(true)
|
|
}, [view, position, selectLineOnFocus])
|
|
|
|
return (
|
|
<div
|
|
onFocus={focusHandler}
|
|
onBlur={() => setFocused(false)}
|
|
role="button"
|
|
tabIndex={position + 1}
|
|
className={classNames(
|
|
'review-panel-entry',
|
|
{
|
|
'review-panel-entry-focused': focused,
|
|
'review-panel-entry-highlighted': highlighted,
|
|
},
|
|
className
|
|
)}
|
|
data-top={top}
|
|
data-pos={position}
|
|
style={{
|
|
position: top === undefined ? 'relative' : 'absolute',
|
|
visibility: top === undefined ? 'visible' : 'hidden',
|
|
transition: 'top .3s, left .1s, right .1s',
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|