@uiw/react-codemirror 4.23.13 → 4.24.0

package/README.md

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

package/cjs/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/cjs/timeoutLatch.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getScheduler = exports.TimeoutLatch = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+// Setting / Unsetting timeouts for every keystroke was a significant overhead
+// Inspired from https://github.com/iostreamer-X/timeout-latch
+var TimeoutLatch = exports.TimeoutLatch = /*#__PURE__*/function () {
+  function TimeoutLatch(callback, timeoutMS) {
+    (0, _classCallCheck2["default"])(this, TimeoutLatch);
+    (0, _defineProperty2["default"])(this, "timeLeftMS", void 0);
+    (0, _defineProperty2["default"])(this, "timeoutMS", void 0);
+    (0, _defineProperty2["default"])(this, "isCancelled", false);
+    (0, _defineProperty2["default"])(this, "isTimeExhausted", false);
+    (0, _defineProperty2["default"])(this, "callbacks", []);
+    this.timeLeftMS = timeoutMS;
+    this.timeoutMS = timeoutMS;
+    this.callbacks.push(callback);
+  }
+  return (0, _createClass2["default"])(TimeoutLatch, [{
+    key: "tick",
+    value: function 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(function (callback) {
+            try {
+              callback();
+            } catch (error) {
+              console.error('TimeoutLatch callback error:', error);
+            }
+          });
+        }
+      }
+    }
+  }, {
+    key: "cancel",
+    value: function cancel() {
+      this.isCancelled = true;
+      this.callbacks.length = 0;
+    }
+  }, {
+    key: "reset",
+    value: function reset() {
+      this.timeLeftMS = this.timeoutMS;
+      this.isCancelled = false;
+      this.isTimeExhausted = false;
+    }
+  }, {
+    key: "isDone",
+    get: function get() {
+      return this.isCancelled || this.isTimeExhausted;
+    }
+  }]);
+}();
+var Scheduler = /*#__PURE__*/function () {
+  function Scheduler() {
+    (0, _classCallCheck2["default"])(this, Scheduler);
+    (0, _defineProperty2["default"])(this, "interval", null);
+    (0, _defineProperty2["default"])(this, "latches", new Set());
+  }
+  return (0, _createClass2["default"])(Scheduler, [{
+    key: "add",
+    value: function add(latch) {
+      this.latches.add(latch);
+      this.start();
+    }
+  }, {
+    key: "remove",
+    value: function remove(latch) {
+      this.latches["delete"](latch);
+      if (this.latches.size === 0) {
+        this.stop();
+      }
+    }
+  }, {
+    key: "start",
+    value: function start() {
+      var _this = this;
+      if (this.interval === null) {
+        this.interval = setInterval(function () {
+          _this.latches.forEach(function (latch) {
+            latch.tick();
+            if (latch.isDone) {
+              _this.remove(latch);
+            }
+          });
+        }, 1);
+      }
+    }
+  }, {
+    key: "stop",
+    value: function stop() {
+      if (this.interval !== null) {
+        clearInterval(this.interval);
+        this.interval = null;
+      }
+    }
+  }]);
+}();
+var globalScheduler = null;
+var getScheduler = exports.getScheduler = function getScheduler() {
+  if (typeof window === 'undefined') {
+    return new Scheduler();
+  }
+  if (!globalScheduler) {
+    globalScheduler = new Scheduler();
+  }
+  return globalScheduler;
+};

package/cjs/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/cjs/useCodeMirror.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ExternalChange = void 0;
 exports.useCodeMirror = useCodeMirror;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -12,7 +13,10 @@ var _state = require("@codemirror/state");
 var _view = require("@codemirror/view");
 var _getDefaultExtensions = require("./getDefaultExtensions");
 var _utils = require("./utils");
-var External = _state.Annotation.define();
+var _timeoutLatch = require("./timeoutLatch");
+var ExternalChange = exports.ExternalChange = _state.Annotation.define();
+var TYPING_TIMOUT = 200; // ms
+
 var emptyExtensions = [];
 function useCodeMirror(props) {
   var value = props.value,
@@ -62,6 +66,16 @@ function useCodeMirror(props) {
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     state = _useState6[0],
     setState = _useState6[1];
+  var typingLatch = (0, _react.useState)(function () {
+    return {
+      current: null
+    };
+  })[0];
+  var pendingUpdate = (0, _react.useState)(function () {
+    return {
+      current: null
+    };
+  })[0];
   var defaultThemeOption = _view.EditorView.theme({
     '&': {
       height: height,
@@ -80,8 +94,21 @@ function useCodeMirror(props) {
     // Fix echoing of the remote changes:
     // If transaction is market as remote we don't have to call `onChange` handler again
     !vu.transactions.some(function (tr) {
-      return tr.annotation(External);
+      return tr.annotation(ExternalChange);
     })) {
+      if (typingLatch.current) {
+        typingLatch.current.reset();
+      } else {
+        typingLatch.current = new _timeoutLatch.TimeoutLatch(function () {
+          if (pendingUpdate.current) {
+            var forceUpdate = pendingUpdate.current;
+            pendingUpdate.current = null;
+            forceUpdate();
+          }
+          typingLatch.current = null;
+        }, TYPING_TIMOUT);
+        (0, _timeoutLatch.getScheduler)().add(typingLatch.current);
+      }
       var doc = vu.state.doc;
       var _value = doc.toString();
       onChange(_value, vu);
@@ -138,6 +165,10 @@ function useCodeMirror(props) {
         view.destroy();
         setView(undefined);
       }
+      if (typingLatch.current) {
+        typingLatch.current.cancel();
+        typingLatch.current = null;
+      }
     };
   }, [view]);
   (0, _react.useEffect)(function () {
@@ -159,14 +190,24 @@ 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 = function 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 {