fix: partial fix for #40, clicking outside the editor should stop edi…

…ting a key/value
josdejong · Dec 15, 2021 · 70eab0c · 70eab0c
1 parent 880795f
commit 70eab0c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/src/lib/components/controls/EditableDiv.svelte b/src/lib/components/controls/EditableDiv.svelte
@@ -2,7 +2,7 @@
 
 <script>
   import { onDestroy, onMount } from 'svelte'
-  import { getPlainText, setCursorToEnd, setPlainText } from '$lib/utils/domUtils'
+  import { getPlainText, isChildOf, setCursorToEnd, setPlainText } from '$lib/utils/domUtils'
   import { keyComboFromEvent } from '$lib/utils/keyBindings'
   import { createDebug } from '$lib/utils/debug'
   import { noop } from 'lodash-es'
@@ -33,7 +33,8 @@
     debug('onDestroy', { closed, value, newValue })
 
     if (!closed && newValue !== value) {
-      onChange(newValue)
+      const passiveExit = true
+      onChange(newValue, passiveExit)
     }
   })
 
@@ -86,8 +87,28 @@
     const clipboardText = event.clipboardData.getData('text/plain')
     onPaste(clipboardText)
   }
+
+  function handleWindowMouseDown(event) {
+    const outsideEditableDiv = !isChildOf(event.target, (element) => element === domValue)
+    if (outsideEditableDiv) {
+      // apply changes
+      closed = true
+
+      const newValue = getDomValue()
+      if (newValue !== value) {
+        const passiveExit = true
+        onChange(newValue, passiveExit)
+      }
+
+      // FIXME: after applying the change, when the mouse click was outside of
+      //  the editor, it should loose focus directly (right now the hidden input
+      //  always gets focus after any selection change)
+    }
+  }
 </script>
 
+<svelte:window on:mousedown|capture={handleWindowMouseDown} />
+
 <div
   class={'jse-editable-div ' + valueClass}
   contenteditable="true"

diff --git a/src/lib/components/modes/treemode/JSONKey.svelte b/src/lib/components/modes/treemode/JSONKey.svelte
@@ -32,11 +32,15 @@
     })
   }
 
-  function handleChangeValue(newKey) {
+  function handleChangeValue(newKey, passiveExit = false) {
     const updatedKey = onUpdateKey(key, newKey)
     const updatedPath = initial(path).concat(updatedKey)
 
-    onSelect({ type: SELECTION_TYPE.KEY, path: updatedPath, next: true })
+    onSelect({
+      type: SELECTION_TYPE.KEY,
+      path: updatedPath,
+      next: !passiveExit
+    })
   }
 
   function handleCancelChange() {

diff --git a/src/lib/plugins/value/components/EditableValue.svelte b/src/lib/plugins/value/components/EditableValue.svelte
@@ -13,7 +13,7 @@
   export let onPasteJson
   export let onSelect
 
-  function handleChangeValue(newValue) {
+  function handleChangeValue(newValue, passiveExit = false) {
     onPatch([
       {
         op: 'replace',
@@ -22,7 +22,11 @@
       }
     ])
 
-    onSelect({ type: SELECTION_TYPE.VALUE, path, nextInside: true })
+    onSelect({
+      type: SELECTION_TYPE.VALUE,
+      path,
+      nextInside: !passiveExit
+    })
   }
 
   function handleCancelChange() {