github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-21 03:13:42 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed "Add comment" tooltip if cursor is out of viewport (#21852)

Browse source 
* Fixed "Add comment" tooltip if cursor is out of viewport

* account for cm-line padding when calulation tooltip pos

GitOrigin-RevId: f4b69a3bf83dd15c0304bfd6b37f3be8b07cd727
This commit is contained in:
Domagoj Kriskovic 2024-11-19 11:07:33 +01:00 • committed by Copybot
parent fb36fff63d
commit 99f77b2205
1 changed files with 47 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx
View file

@ -1,4 +1,5 @@
import {
CSSProperties,
Dispatch,
FC,
SetStateAction,
@ -32,6 +33,10 @@ import { isCursorNearViewportEdge } from '@/features/source-editor/utils/is-curs
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
import { useModalsContext } from '@/features/ide-react/context/modals-context'
import { numberOfChangesInSelection } from '../utils/changes-in-selection'
import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
const TRACK_CHANGES_ON_WIDGET_HEIGHT = 25
const CM_LINE_RIGHT_PADDING = 2
const ReviewTooltipMenu: FC = () => {
const state = useCodeMirrorStateContext()
@ -70,11 +75,13 @@ const ReviewTooltipMenuContent: FC<{
const { t } = useTranslation()
const view = useCodeMirrorViewContext()
const state = useCodeMirrorStateContext()
const { setReviewPanelOpen } = useLayoutContext()
const { setReviewPanelOpen, reviewPanelOpen } = useLayoutContext()
const { setView } = useReviewPanelViewActionsContext()
const ranges = useRangesContext()
const { acceptChanges, rejectChanges } = useRangesActionsContext()
const { showGenericConfirmModal } = useModalsContext()
const { wantTrackChanges } = useEditorManagerContext()
const [tooltipStyle, setTooltipStyle] = useState<CSSProperties | undefined>()
const addComment = useCallback(() => {
setReviewPanelOpen(true)
@ -151,8 +158,46 @@ const ReviewTooltipMenuContent: FC<{
const showChangesButtons = changeIdsInSelection.length > 0
useEffect(() => {
view.requestMeasure({
key: 'review-tooltip-outside-viewport',
read(view) {
const cursorCoords = view.coordsAtPos(view.state.selection.main.head)
if (!cursorCoords) {
return
}
const scrollDomRect = view.scrollDOM.getBoundingClientRect()
const contentDomRect = view.contentDOM.getBoundingClientRect()
const editorRightPos = contentDomRect.right - CM_LINE_RIGHT_PADDING
if (
cursorCoords.top > scrollDomRect.top &&
cursorCoords.top < scrollDomRect.bottom
) {
return
}
const widgetOffset =
wantTrackChanges && !reviewPanelOpen
? TRACK_CHANGES_ON_WIDGET_HEIGHT
: 0
return {
position: 'fixed' as const,
top: scrollDomRect.top + widgetOffset,
right: window.innerWidth - editorRightPos,
}
},
write(res) {
setTooltipStyle(res)
},
})
}, [view, reviewPanelOpen, wantTrackChanges])
return (
<div className="review-tooltip-menu">
<div className="review-tooltip-menu" style={tooltipStyle}>
<button
className="review-tooltip-menu-button review-tooltip-add-comment-button"
onClick={addComment}