Lock the scroll of the div and textarea to keep the highlighting accurate.

src/Editor.css

@@ -49,6 +49,8 @@
   pointer-events: none;
   color: transparent;
   white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-y: scroll;
 
   .highlighted {
     background: #ffff00;

src/Editor.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useMemo, useState } from "react";
+import React, { ReactNode, useMemo, useRef, useState } from "react";
 import "./Editor.css";
 import { Highlight } from "./highlight";
 import { buildShadow } from "./shadow";
@@ -63,15 +63,29 @@ function Editor({ defaultValue = default_org_source }) {
     setHighlights([]);
   }
 
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const shadowRef = useRef<HTMLDivElement>(null);
+  function onTextAreaScroll() {
+    if (shadowRef.current !== null && textAreaRef.current !== null) {
+      const textAreaScrollTop = textAreaRef.current.scrollTop;
+      shadowRef.current.scrollTop = textAreaScrollTop;
+    }
+  }
+
   return (
     <div className="Editor">
       <div className="Editor-textwrapper">
         <textarea
+          ref={textAreaRef}
           onChange={handleChange}
           className="Editor-textarea"
           value={value}
+          onScroll={onTextAreaScroll}
         />
-        <div className="Editor-underlay">{buildShadow(highlights, value)}</div>
+        <div ref={shadowRef} className="Editor-underlay">
+          {buildShadow(highlights, value)}
+          <br/>
+        </div>
       </div>
       <OrgAst
         setHighlight={setHighlight}

src/OrgAst.module.css

@@ -2,7 +2,7 @@
   flex: 1;
   background: #eeeeee;
   padding: 5px;
-  overflow: scroll;
+  overflow: auto;
 }
 
 .OrgAstNode {