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

Outline Scroll Fixes

GitOrigin-RevId: 14bff01ab7678d363884bd8525ad3f7e60acacb4
This commit is contained in:
Paulo Jorge Reis 2020-08-06 10:04:45 +01:00 committed by Copybot
parent 0538ea2069
commit 4e3a9d4fa8
2 changed files with 14 additions and 8 deletions

View file

@ -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) {

View file

@ -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 (