From 52fb372b9b8b0532d6d461a200abc01a46cc8222 Mon Sep 17 00:00:00 2001
From: mrdrogdrog <mr.drogdrog@gmail.com>
Date: Wed, 26 Aug 2020 21:59:03 +0200
Subject: [PATCH] Fix scroll bugs (#487)

* Check line presence before calculating position
* Fix jump bug
---
 .../document-render-pane.tsx                  | 22 +++++++++++--------
 .../editor/editor-pane/editor-pane.tsx        |  2 +-
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/editor/document-renderer-pane/document-render-pane.tsx b/src/components/editor/document-renderer-pane/document-render-pane.tsx
index 4d07d0279..3e6d61dde 100644
--- a/src/components/editor/document-renderer-pane/document-render-pane.tsx
+++ b/src/components/editor/document-renderer-pane/document-render-pane.tsx
@@ -52,20 +52,24 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps & ScrollProps>
     if (!renderer.current || !lineMarks || !onScroll) {
       return
     }
-    const resyncedScroll = Math.ceil(renderer.current.scrollTop) === lastScrollPosition.current
-    if (resyncedScroll) {
-      return
-    }
 
     const scrollTop = renderer.current.scrollTop
 
-    const beforeLineMark = lineMarks
-      .filter(lineMark => lineMark.position <= scrollTop)
+    const lineMarksBeforeScrollTop = lineMarks.filter(lineMark => lineMark.position <= scrollTop)
+    if (lineMarksBeforeScrollTop.length === 0) {
+      return
+    }
+
+    const lineMarksAfterScrollTop = lineMarks.filter(lineMark => lineMark.position > scrollTop)
+    if (lineMarksAfterScrollTop.length === 0) {
+      return
+    }
+
+    const beforeLineMark = lineMarksBeforeScrollTop
       .reduce((prevLineMark, currentLineMark) =>
         prevLineMark.line >= currentLineMark.line ? prevLineMark : currentLineMark)
 
-    const afterLineMark = lineMarks
-      .filter(lineMark => lineMark.position > scrollTop)
+    const afterLineMark = lineMarksAfterScrollTop
       .reduce((prevLineMark, currentLineMark) =>
         prevLineMark.line < currentLineMark.line ? prevLineMark : currentLineMark)
 
@@ -79,7 +83,7 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps & ScrollProps>
 
   return (
     <div className={'bg-light flex-fill pb-5 flex-row d-flex w-100 h-100 overflow-y-scroll'}
-      ref={renderer} onScroll={userScroll} onMouseEnter={onMakeScrollSource} >
+      ref={renderer} onScroll={userScroll} onMouseEnter={onMakeScrollSource}>
       <div className={'col-md'}/>
       <MarkdownRenderer
         className={'flex-fill mb-3'}
diff --git a/src/components/editor/editor-pane/editor-pane.tsx b/src/components/editor/editor-pane/editor-pane.tsx
index e6f49c1d7..89fa84276 100644
--- a/src/components/editor/editor-pane/editor-pane.tsx
+++ b/src/components/editor/editor-pane/editor-pane.tsx
@@ -87,7 +87,7 @@ export const EditorPane: React.FC<EditorPaneProps & ScrollProps> = ({ onContentC
     if (!editor || !scrollState) {
       return
     }
-    const startYOfLine = editor.heightAtLine(scrollState.firstLineInView - 1, 'div')
+    const startYOfLine = editor.heightAtLine(scrollState.firstLineInView - 1, 'local')
     const heightOfLine = (editor.lineInfo(scrollState.firstLineInView - 1).handle as { height: number }).height
     const newPositionRaw = startYOfLine + (heightOfLine * scrollState.scrolledPercentage / 100)
     const newPosition = Math.floor(newPositionRaw)