Merge pull request #3070 from overleaf/ta-outline-scroll-fixes

Outline Scroll Fixes

GitOrigin-RevId: 14bff01ab7678d363884bd8525ad3f7e60acacb4

services/web/frontend/js/ide/outline/OutlineManager.js

@@ -56,7 +56,6 @@ class OutlineManager {
       }
 
       this.updateHighlightedLine(middleVisibleRow + 1)
-      this.broadcastChangeEvent()
     })
 
     scope.$watch('editor.showRichText', () => {
@@ -84,7 +83,9 @@ class OutlineManager {
       if (editorLine < outline.line) break // editorLine is above
       closestOutlineLine = outline.line
     }
+    if (closestOutlineLine === this.highlightedLine) return
     this.highlightedLine = closestOutlineLine
+    this.broadcastChangeEvent()
   }
 
   jumpToLine(line) {

services/web/frontend/js/ide/outline/components/OutlineItem.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, createRef } from 'react'
+import React, { useState, useEffect, createRef, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import OutlineList from './OutlineList'
@@ -6,6 +6,7 @@ import OutlineList from './OutlineList'
 function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
   const [expanded, setExpanded] = useState(true)
   const titleElementRef = createRef()
+  const isHighlightedRef = useRef(false)
 
   const mainItemClasses = classNames('outline-item', {
     'outline-item-no-children': !outlineItem.children
@@ -30,14 +31,18 @@ function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
 
   useEffect(
     () => {
-      if (highlightedLine !== outlineItem.line) return
+      const wasHighlighted = isHighlightedRef.current
+      const isNowHighlighted = highlightedLine === outlineItem.line
 
-      titleElementRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center'
-      })
+      isHighlightedRef.current = isNowHighlighted
+
+      if (!wasHighlighted && isNowHighlighted) {
+        titleElementRef.current.scrollIntoView({
+          block: 'center'
+        })
+      }
     },
-    [highlightedLine, titleElementRef]
+    [highlightedLine, titleElementRef, isHighlightedRef]
   )
 
   return (