Merge pull request #26407 from overleaf/dp-review-panel-gap

Allow comments to be positioned at top of review panel in new editor

GitOrigin-RevId: 581bbf85cc54b68b54235123b14b1564ed019e6d

services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx

@@ -33,6 +33,7 @@ import ReviewPanelMoreCommentsButton from './review-panel-more-comments-button'
 import useMoreCommments from '../hooks/use-more-comments'
 import { Decoration } from '@codemirror/view'
 import { debounce } from 'lodash'
+import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 
 type AggregatedRanges = {
   changes: Change<EditOperation>[]
@@ -46,6 +47,7 @@ const ReviewPanelCurrentFile: FC = () => {
   const threads = useThreadsContext()
   const state = useCodeMirrorStateContext()
   const [hoveredEntry, setHoveredEntry] = useState<string | null>(null)
+  const newEditor = useIsNewEditorEnabled()
 
   const hoverTimeout = useRef<number>(0)
   const handleEntryEnter = useCallback((id: string) => {
@@ -242,7 +244,8 @@ const ReviewPanelCurrentFile: FC = () => {
       const positioningRes = positionItems(
         containerRef.current,
         previousFocusedItem.current.get(docId),
-        docId
+        docId,
+        newEditor
       )
 
       onEntriesPositioned()
@@ -254,7 +257,7 @@ const ReviewPanelCurrentFile: FC = () => {
         )
       }
     }
-  }, [ranges?.docId, onEntriesPositioned])
+  }, [ranges?.docId, onEntriesPositioned, newEditor])
 
   useEffect(() => {
     const timer = window.setTimeout(() => {

services/web/frontend/js/features/review-panel-new/utils/position-items.ts

@@ -8,7 +8,8 @@ export const positionItems = debounce(
   (
     element: HTMLDivElement,
     previousFocusedItemIndex: number | undefined,
-    docId: string
+    docId: string,
+    newEditor: boolean
   ) => {
     const items = Array.from(
       element.querySelectorAll<HTMLDivElement>('.review-panel-entry')
@@ -41,7 +42,11 @@ export const positionItems = debounce(
       return
     }
 
-    const activeItemTop = getTopPosition(activeItem, activeItemIndex === 0)
+    const activeItemTop = getTopPosition(
+      activeItem,
+      activeItemIndex === 0,
+      newEditor
+    )
 
     const positions: [HTMLElement, number][] = []
     positions.push([activeItem, activeItemTop])
@@ -51,7 +56,7 @@ export const positionItems = debounce(
     for (let i = activeItemIndex - 1; i >= 0; i--) {
       const item = items[i]
       const height = item.offsetHeight
-      let top = getTopPosition(item, i === 0)
+      let top = getTopPosition(item, i === 0, newEditor)
       const bottom = top + height
       if (bottom > topLimit) {
         top = topLimit - height - GAP_BETWEEN_ENTRIES
@@ -65,7 +70,7 @@ export const positionItems = debounce(
     for (let i = activeItemIndex + 1; i < items.length; i++) {
       const item = items[i]
       const height = item.offsetHeight
-      let top = getTopPosition(item, false)
+      let top = getTopPosition(item, false, newEditor)
       if (top < bottomLimit) {
         top = bottomLimit + GAP_BETWEEN_ENTRIES
       }
@@ -87,7 +92,16 @@ export const positionItems = debounce(
   { leading: false, trailing: true, maxWait: 1000 }
 )
 
-function getTopPosition(item: HTMLDivElement, isFirstEntry: boolean) {
+function getTopPosition(
+  item: HTMLDivElement,
+  isFirstEntry: boolean,
+  newEditor: boolean
+) {
   const offset = isFirstEntry ? 0 : OFFSET_FOR_ENTRIES_ABOVE
+
+  if (newEditor) {
+    return Math.max(offset, Number(item.dataset.top))
+  }
+
   return Math.max(COLLAPSED_HEADER_HEIGHT + offset, Number(item.dataset.top))
 }