[#66130] add input debouncing to cursor syncing

antmicro · Sep 23, 2024 · b33fc9f · b33fc9f
1 parent c859141
commit b33fc9f
Showing 1 changed file with 20 additions and 11 deletions.
diff --git a/src/extensions/syncDualPane.js b/src/extensions/syncDualPane.js
@@ -3,9 +3,12 @@ import { markdownUpdatedStateEffect } from "../hooks/useText";
 import { findNearestElementForLine } from "../hooks/markdownSourceMap";
 
 const previewTopPadding = 20;
+const debounceTimeout = 50;
 
-export const syncPreviewWithCursor = (lineMap, preview) =>
-  EditorView.updateListener.of((update) => {
+export const syncPreviewWithCursor = (lineMap, preview) => {
+  let timeout;
+
+  return EditorView.updateListener.of((update) => {
     const cursorLineBefore = update.startState.doc.lineAt(update.startState.selection.main.head).number;
     const cursorLineAfter = update.state.doc.lineAt(update.state.selection.main.head).number;
     const selectionChanged = update.selectionSet && (cursorLineBefore !== cursorLineAfter || cursorLineBefore === 1);
@@ -15,17 +18,23 @@ export const syncPreviewWithCursor = (lineMap, preview) =>
       return;
     }
 
-    const [matchingElem, matchingLine] = findNearestElementForLine(cursorLineAfter, lineMap, preview.current);
-    if (matchingElem) {
-      scrollPreviewElemIntoView({
-        view: update.view,
-        matchingLine,
-        matchingElem,
-        behavior: "smooth",
-        preview: preview.current,
-      });
+    function sync() {
+      const [matchingElem, matchingLine] = findNearestElementForLine(cursorLineAfter, lineMap, preview.current);
+      if (matchingElem) {
+        scrollPreviewElemIntoView({
+          view: update.view,
+          matchingLine,
+          matchingElem,
+          behavior: "smooth",
+          preview: preview.current,
+        });
+      }
     }
+
+    clearTimeout(timeout);
+    timeout = setTimeout(sync, debounceTimeout);
   });
+};
 
 /** @param {Object} param0
  * @param {EditorView} param0.view