@uiw/react-codemirror 4.23.13 → 4.24.0

package/esm/timeoutLatch.d.ts

@@ -0,0 +1,22 @@
+export declare class TimeoutLatch {
+    private timeLeftMS;
+    private timeoutMS;
+    private isCancelled;
+    private isTimeExhausted;
+    private callbacks;
+    constructor(callback: Function, timeoutMS: number);
+    tick(): void;
+    cancel(): void;
+    reset(): void;
+    get isDone(): boolean;
+}
+declare class Scheduler {
+    private interval;
+    private latches;
+    add(latch: TimeoutLatch): void;
+    remove(latch: TimeoutLatch): void;
+    private start;
+    private stop;
+}
+export declare const getScheduler: () => Scheduler;
+export {};

package/esm/timeoutLatch.js

@@ -0,0 +1,88 @@
+// Setting / Unsetting timeouts for every keystroke was a significant overhead
+// Inspired from https://github.com/iostreamer-X/timeout-latch
+
+export class TimeoutLatch {
+  constructor(callback, timeoutMS) {
+    this.timeLeftMS = void 0;
+    this.timeoutMS = void 0;
+    this.isCancelled = false;
+    this.isTimeExhausted = false;
+    this.callbacks = [];
+    this.timeLeftMS = timeoutMS;
+    this.timeoutMS = timeoutMS;
+    this.callbacks.push(callback);
+  }
+  tick() {
+    if (!this.isCancelled && !this.isTimeExhausted) {
+      this.timeLeftMS--;
+      if (this.timeLeftMS <= 0) {
+        this.isTimeExhausted = true;
+        var callbacks = this.callbacks.slice();
+        this.callbacks.length = 0;
+        callbacks.forEach(callback => {
+          try {
+            callback();
+          } catch (error) {
+            console.error('TimeoutLatch callback error:', error);
+          }
+        });
+      }
+    }
+  }
+  cancel() {
+    this.isCancelled = true;
+    this.callbacks.length = 0;
+  }
+  reset() {
+    this.timeLeftMS = this.timeoutMS;
+    this.isCancelled = false;
+    this.isTimeExhausted = false;
+  }
+  get isDone() {
+    return this.isCancelled || this.isTimeExhausted;
+  }
+}
+class Scheduler {
+  constructor() {
+    this.interval = null;
+    this.latches = new Set();
+  }
+  add(latch) {
+    this.latches.add(latch);
+    this.start();
+  }
+  remove(latch) {
+    this.latches.delete(latch);
+    if (this.latches.size === 0) {
+      this.stop();
+    }
+  }
+  start() {
+    if (this.interval === null) {
+      this.interval = setInterval(() => {
+        this.latches.forEach(latch => {
+          latch.tick();
+          if (latch.isDone) {
+            this.remove(latch);
+          }
+        });
+      }, 1);
+    }
+  }
+  stop() {
+    if (this.interval !== null) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
+  }
+}
+var globalScheduler = null;
+export var getScheduler = () => {
+  if (typeof window === 'undefined') {
+    return new Scheduler();
+  }
+  if (!globalScheduler) {
+    globalScheduler = new Scheduler();
+  }
+  return globalScheduler;
+};

package/esm/useCodeMirror.d.ts

@@ -1,6 +1,7 @@
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { type ReactCodeMirrorProps } from '.';
+export declare const ExternalChange: import("@codemirror/state").AnnotationType<boolean>;
 export interface UseCodeMirror extends ReactCodeMirrorProps {
     container?: HTMLDivElement | null;
 }

package/esm/useCodeMirror.js

@@ -3,7 +3,10 @@ import { Annotation, EditorState, StateEffect } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { getDefaultExtensions } from "./getDefaultExtensions.js";
 import { getStatistics } from "./utils.js";
-var External = Annotation.define();
+import { TimeoutLatch, getScheduler } from "./timeoutLatch.js";
+export var ExternalChange = Annotation.define();
+var TYPING_TIMOUT = 200; // ms
+
 var emptyExtensions = [];
 export function useCodeMirror(props) {
   var {
@@ -33,6 +36,12 @@ export function useCodeMirror(props) {
   var [container, setContainer] = useState();
   var [view, setView] = useState();
   var [state, setState] = useState();
+  var typingLatch = useState(() => ({
+    current: null
+  }))[0];
+  var pendingUpdate = useState(() => ({
+    current: null
+  }))[0];
   var defaultThemeOption = EditorView.theme({
     '&': {
       height,
@@ -50,7 +59,20 @@ export function useCodeMirror(props) {
     if (vu.docChanged && typeof onChange === 'function' &&
     // Fix echoing of the remote changes:
     // If transaction is market as remote we don't have to call `onChange` handler again
-    !vu.transactions.some(tr => tr.annotation(External))) {
+    !vu.transactions.some(tr => tr.annotation(ExternalChange))) {
+      if (typingLatch.current) {
+        typingLatch.current.reset();
+      } else {
+        typingLatch.current = new TimeoutLatch(() => {
+          if (pendingUpdate.current) {
+            var forceUpdate = pendingUpdate.current;
+            pendingUpdate.current = null;
+            forceUpdate();
+          }
+          typingLatch.current = null;
+        }, TYPING_TIMOUT);
+        getScheduler().add(typingLatch.current);
+      }
       var doc = vu.state.doc;
       var _value = doc.toString();
       onChange(_value, vu);
@@ -106,6 +128,10 @@ export function useCodeMirror(props) {
       view.destroy();
       setView(undefined);
     }
+    if (typingLatch.current) {
+      typingLatch.current.cancel();
+      typingLatch.current = null;
+    }
   }, [view]);
   useEffect(() => {
     if (autoFocus && view) {
@@ -126,14 +152,24 @@ export function useCodeMirror(props) {
     }
     var currentValue = view ? view.state.doc.toString() : '';
     if (view && value !== currentValue) {
-      view.dispatch({
-        changes: {
-          from: 0,
-          to: currentValue.length,
-          insert: value || ''
-        },
-        annotations: [External.of(true)]
-      });
+      var isTyping = typingLatch.current && !typingLatch.current.isDone;
+      var forceUpdate = () => {
+        if (view && value !== view.state.doc.toString()) {
+          view.dispatch({
+            changes: {
+              from: 0,
+              to: view.state.doc.toString().length,
+              insert: value || ''
+            },
+            annotations: [ExternalChange.of(true)]
+          });
+        }
+      };
+      if (!isTyping) {
+        forceUpdate();
+      } else {
+        pendingUpdate.current = forceUpdate;
+      }
     }
   }, [value, view]);
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-codemirror",
-  "version": "4.23.13",
+  "version": "4.24.0",
   "description": "CodeMirror component for React.",
   "homepage": "https://uiwjs.github.io/react-codemirror",
   "funding": "https://jaywcjlove.github.io/#/sponsor",
@@ -47,7 +47,7 @@
     "@codemirror/commands": "^6.1.0",
     "@codemirror/state": "^6.1.1",
     "@codemirror/theme-one-dark": "^6.0.0",
-    "@uiw/codemirror-extensions-basic-setup": "4.23.13",
+    "@uiw/codemirror-extensions-basic-setup": "4.24.0",
     "codemirror": "^6.0.0"
   },
   "keywords": [

package/src/timeoutLatch.ts

@@ -0,0 +1,98 @@
+// Setting / Unsetting timeouts for every keystroke was a significant overhead
+// Inspired from https://github.com/iostreamer-X/timeout-latch
+
+export class TimeoutLatch {
+  private timeLeftMS: number;
+  private timeoutMS: number;
+  private isCancelled = false;
+  private isTimeExhausted = false;
+  private callbacks: Function[] = [];
+
+  constructor(callback: Function, timeoutMS: number) {
+    this.timeLeftMS = timeoutMS;
+    this.timeoutMS = timeoutMS;
+    this.callbacks.push(callback);
+  }
+
+  tick(): void {
+    if (!this.isCancelled && !this.isTimeExhausted) {
+      this.timeLeftMS--;
+      if (this.timeLeftMS <= 0) {
+        this.isTimeExhausted = true;
+        const callbacks = this.callbacks.slice();
+        this.callbacks.length = 0;
+        callbacks.forEach((callback) => {
+          try {
+            callback();
+          } catch (error) {
+            console.error('TimeoutLatch callback error:', error);
+          }
+        });
+      }
+    }
+  }
+
+  cancel(): void {
+    this.isCancelled = true;
+    this.callbacks.length = 0;
+  }
+
+  reset(): void {
+    this.timeLeftMS = this.timeoutMS;
+    this.isCancelled = false;
+    this.isTimeExhausted = false;
+  }
+
+  get isDone(): boolean {
+    return this.isCancelled || this.isTimeExhausted;
+  }
+}
+
+class Scheduler {
+  private interval: NodeJS.Timeout | null = null;
+  private latches = new Set<TimeoutLatch>();
+
+  add(latch: TimeoutLatch): void {
+    this.latches.add(latch);
+    this.start();
+  }
+
+  remove(latch: TimeoutLatch): void {
+    this.latches.delete(latch);
+    if (this.latches.size === 0) {
+      this.stop();
+    }
+  }
+
+  private start(): void {
+    if (this.interval === null) {
+      this.interval = setInterval(() => {
+        this.latches.forEach((latch) => {
+          latch.tick();
+          if (latch.isDone) {
+            this.remove(latch);
+          }
+        });
+      }, 1);
+    }
+  }
+
+  private stop(): void {
+    if (this.interval !== null) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
+  }
+}
+
+let globalScheduler: Scheduler | null = null;
+
+export const getScheduler = (): Scheduler => {
+  if (typeof window === 'undefined') {
+    return new Scheduler();
+  }
+  if (!globalScheduler) {
+    globalScheduler = new Scheduler();
+  }
+  return globalScheduler;
+};

package/src/useCodeMirror.ts

@@ -4,8 +4,10 @@ import { EditorView, type ViewUpdate } from '@codemirror/view';
 import { getDefaultExtensions } from './getDefaultExtensions';
 import { getStatistics } from './utils';
 import { type ReactCodeMirrorProps } from '.';
+import { TimeoutLatch, getScheduler } from './timeoutLatch';
 
-const External = Annotation.define<boolean>();
+export const ExternalChange = Annotation.define<boolean>();
+const TYPING_TIMOUT = 200; // ms
 
 export interface UseCodeMirror extends ReactCodeMirrorProps {
   container?: HTMLDivElement | null;
@@ -41,6 +43,8 @@ export function useCodeMirror(props: UseCodeMirror) {
   const [container, setContainer] = useState<HTMLDivElement | null>();
   const [view, setView] = useState<EditorView>();
   const [state, setState] = useState<EditorState>();
+  const typingLatch = useState<{ current: TimeoutLatch | null }>(() => ({ current: null }))[0];
+  const pendingUpdate = useState<{ current: (() => void) | null }>(() => ({ current: null }))[0];
   const defaultThemeOption = EditorView.theme({
     '&': {
       height,
@@ -60,8 +64,22 @@ export function useCodeMirror(props: UseCodeMirror) {
       typeof onChange === 'function' &&
       // Fix echoing of the remote changes:
       // If transaction is market as remote we don't have to call `onChange` handler again
-      !vu.transactions.some((tr) => tr.annotation(External))
+      !vu.transactions.some((tr) => tr.annotation(ExternalChange))
     ) {
+      if (typingLatch.current) {
+        typingLatch.current.reset();
+      } else {
+        typingLatch.current = new TimeoutLatch(() => {
+          if (pendingUpdate.current) {
+            const forceUpdate = pendingUpdate.current;
+            pendingUpdate.current = null;
+            forceUpdate();
+          }
+          typingLatch.current = null;
+        }, TYPING_TIMOUT);
+        getScheduler().add(typingLatch.current);
+      }
+
       const doc = vu.state.doc;
       const value = doc.toString();
       onChange(value, vu);
@@ -126,6 +144,10 @@ export function useCodeMirror(props: UseCodeMirror) {
         view.destroy();
         setView(undefined);
       }
+      if (typingLatch.current) {
+        typingLatch.current.cancel();
+        typingLatch.current = null;
+      }
     },
     [view],
   );
@@ -165,10 +187,22 @@ export function useCodeMirror(props: UseCodeMirror) {
     }
     const currentValue = view ? view.state.doc.toString() : '';
     if (view && value !== currentValue) {
-      view.dispatch({
-        changes: { from: 0, to: currentValue.length, insert: value || '' },
-        annotations: [External.of(true)],
-      });
+      const isTyping = typingLatch.current && !typingLatch.current.isDone;
+
+      const forceUpdate = () => {
+        if (view && value !== view.state.doc.toString()) {
+          view.dispatch({
+            changes: { from: 0, to: view.state.doc.toString().length, insert: value || '' },
+            annotations: [ExternalChange.of(true)],
+          });
+        }
+      };
+
+      if (!isTyping) {
+        forceUpdate();
+      } else {
+        pendingUpdate.current = forceUpdate;
+      }
     }
   }, [value, view]);