fix(scroll): fix scroll offset calculation

Fix offset calculation when first "line-start" attribute found is not 0.
wallpants · Oct 15, 2023 · 8fb397e · 8fb397e
1 parent 1afd25b
commit 8fb397e
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/app/src/web/markdown/cursor-line.tsx b/app/src/web/markdown/cursor-line.tsx
@@ -27,7 +27,7 @@ export const CursorLine = ({ offsets, cursorLineElement, markdownContainerElemen
     useEffect(() => {
         if (!cursorLineElement || !markdownContainerElement) return;
         scroll(markdownContainerElement, topOffsetPct, offsets, cursorLine, cursorLineElement);
-    }, [cursorLine, cursorLineElement, offsets, topOffsetPct, markdownContainerElement]);
+    }, [markdownContainerElement, topOffsetPct, offsets, cursorLine, cursorLineElement]);
 
     return (
         <div

diff --git a/app/src/web/markdown/index.tsx b/app/src/web/markdown/index.tsx
@@ -82,7 +82,7 @@ export const Markdown = ({ className }: { className: string }) => {
         if (!markdownElement || !markdownContainerElement) return;
 
         const observer = new ResizeObserver(() => {
-            setOffsets(getScrollOffsets(markdownContainerElement));
+            setOffsets(getScrollOffsets(markdownContainerElement, markdownElement));
         });
 
         observer.observe(markdownElement);

diff --git a/app/src/web/markdown/scroll.ts b/app/src/web/markdown/scroll.ts
@@ -45,7 +45,10 @@ function getAttrs(element: HTMLElement): Attrs {
 
 export type Offsets = [number, HTMLElement][];
 
-export function getScrollOffsets(markdownContainerElement: HTMLElement): Offsets {
+export function getScrollOffsets(
+    markdownContainerElement: HTMLElement,
+    markdownElement: HTMLElement,
+): Offsets {
     const elements: NodeListOf<HTMLElement> = document.querySelectorAll("[line-start]");
     // HTMLElement kept arround for debugging purposes
     const sourceLineOffsets: Offsets = [];
@@ -62,7 +65,7 @@ export function getScrollOffsets(markdownContainerElement: HTMLElement): Offsets
         const { elemStartLine, elemEndLine, offsetTop, scrollHeight } = getAttrs(element);
 
         if (currLine < elemStartLine) {
-            let acc = 0;
+            let acc = markdownElement.offsetTop + markdownElement.getBoundingClientRect().top;
             let perLine = 0;
 
             const prevElement = elements[index - 1];