fix: #275 flush debounced changes in text mode before blur and destroy

josdejong · May 18, 2023 · e8270e9 · e8270e9
1 parent 6b21bf6
commit e8270e9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/lib/components/modes/textmode/TextMode.svelte b/src/lib/components/modes/textmode/TextMode.svelte
@@ -188,13 +188,20 @@
   // This is used to track whether the editor still has focus
   let modalOpen = false
 
+  onDestroy(() => {
+    flush()
+  })
+
   createFocusTracker({
     onMount,
     onDestroy,
     getWindow: () => getWindow(domTextMode),
     hasFocus: () => (modalOpen && document.hasFocus()) || activeElementIsChildOf(domTextMode),
     onFocus,
-    onBlur
+    onBlur: () => {
+      flush()
+      onBlur()
+    }
   })
 
   export function patch(operations: JSONPatchDocument): JSONPatchResult {
@@ -737,6 +744,10 @@
     TEXT_MODE_ONCHANGE_DELAY
   )
 
+  function flush() {
+    onChangeCodeMirrorValueDebounced.flush()
+  }
+
   function emitOnChange(content: Content, previousContent: Content) {
     if (onChange) {
       onChange(content, previousContent, {
@@ -778,7 +789,7 @@
   export function validate(): ContentErrors | null {
     debug('validate:start')
 
-    onChangeCodeMirrorValueDebounced.flush()
+    flush()
 
     const contentErrors = memoizedValidateText(
       normalization.escapeValue(text),

diff --git a/src/routes/development/+page.svelte b/src/routes/development/+page.svelte
@@ -650,6 +650,8 @@
             onChange={onChangeTree}
             onRenderValue={$useCustomValueRenderer ? customRenderValue : renderValue}
             {onChangeMode}
+            onFocus={() => console.log('onFocus tree')}
+            onBlur={() => console.log('onBlur tree', { content: refTreeEditor.get() })}
           />
         {/if}
       </div>
@@ -700,6 +702,8 @@
             onChange={onChangeText}
             onRenderValue={$useCustomValueRenderer ? customRenderValue : renderValue}
             {onChangeMode}
+            onFocus={() => console.log('onFocus text')}
+            onBlur={() => console.log('onBlur text', { content: refTextEditor.get() })}
           />
         {/if}
       </div>