fix: debounce changes in code mode, fixing a race condition in React …

…(see #23)

package.json

@@ -15,6 +15,7 @@
     "dev": "svelte-kit dev",
     "preview": "svelte-kit preview",
     "build": "npm run package",
+    "build:watch": "npm run package -- --watch",
     "package": "svelte-kit package && rollup --config rollup.config.bundle.js",
     "test": "mocha",
     "check": "svelte-check --tsconfig ./tsconfig.json",

src/lib/components/modes/codemode/CodeMode.svelte

@@ -9,6 +9,7 @@
   import { getContext, onDestroy, onMount } from 'svelte'
   import {
     CHECK_VALID_JSON_DELAY,
+    CODE_MODE_ONCHANGE_DELAY,
     JSON_STATUS_INVALID,
     JSON_STATUS_REPAIRABLE,
     JSON_STATUS_VALID,
@@ -79,7 +80,7 @@
         ace,
         readOnly,
         indentation,
-        onChange: onChangeAceEditorValue
+        onChange: onChangeAceEditorValueDebounced
       })
 
       if (resizeObserver) {
@@ -529,6 +530,14 @@
 
   const updateCancelUndoRedoDebounced = debounce(updateCanUndoRedo, 0) // just on next tick
 
+  // debounce the input: when pressing Enter at the end of a line, two change
+  // events are fired: one with the new Return character, and a second with
+  // indentation added on the new line. This causes a race condition when used
+  // for example in React. Debouncing the onChange events also results in not
+  // firing a change event with every character that a user types, but only as
+  // soon as the user stops typing.
+  const onChangeAceEditorValueDebounced = debounce(onChangeAceEditorValue, CODE_MODE_ONCHANGE_DELAY)
+
   function emitOnChange() {
     if (onChange) {
       onChange(text)

src/lib/constants.js

@@ -14,7 +14,8 @@ export const ACTIVE_SEARCH_RESULT = Symbol('search:active-result')
 export const VALIDATION_ERROR = Symbol('validation:error')
 
 export const SCROLL_DURATION = 300 // ms
-export const DEBOUNCE_DELAY = 300
+export const DEBOUNCE_DELAY = 300 // ms
+export const CODE_MODE_ONCHANGE_DELAY = 300 // ms
 export const SEARCH_UPDATE_THROTTLE = 300 // ms
 export const CHECK_VALID_JSON_DELAY = 300 // ms
 export const AUTO_SCROLL_INTERVAL = 50 // ms