From 1c063004436565abe8964121cb4461bc6e974ec8 Mon Sep 17 00:00:00 2001
From: josdejong <wjosdejong@gmail.com>
Date: Tue, 2 Jun 2020 18:10:33 +0200
Subject: [PATCH] Remove `onChangeKey`, handle in child itself

---
 src/JSONEditor.svelte  |  7 -------
 src/JSONNode.svelte    | 43 ++++++++----------------------------------
 src/utils/syncState.js |  3 +++
 3 files changed, 11 insertions(+), 42 deletions(-)

diff --git a/src/JSONEditor.svelte b/src/JSONEditor.svelte
index 6bd1082..319fd5e 100644
--- a/src/JSONEditor.svelte
+++ b/src/JSONEditor.svelte
@@ -203,12 +203,6 @@
     }
   }
 
-
-  function handleChangeKey(key, oldKey) {
-    // console.log('handleChangeKey', { key, oldKey })
-    // TODO: this should not happen?
-  }
-
   function emitOnChange() {
     // TODO: add more logic here to emit onChange, onChangeJson, onChangeText, etc.
     onChangeJson(doc)
@@ -361,7 +355,6 @@
       path={[]}
       state={state}
       searchResult={searchResultWithActive}
-      onChangeKey={handleChangeKey}
       onPatch={handlePatch}
       onExpand={handleExpand}
       onLimit={handleLimit}
diff --git a/src/JSONNode.svelte b/src/JSONNode.svelte
index bcd5db2..a32f09a 100644
--- a/src/JSONNode.svelte
+++ b/src/JSONNode.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { debounce } from 'lodash-es'
+  import { debounce, initial } from 'lodash-es'
   import {
     DEBOUNCE_DELAY, DEFAULT_LIMIT,
     STATE_EXPANDED, STATE_LIMIT, STATE_PROPS,
@@ -21,7 +21,6 @@
   export let state
   export let searchResult
   export let onPatch
-  export let onChangeKey
   export let onExpand
   export let onLimit
 
@@ -89,7 +88,13 @@
 
   function updateKey () {
     const newKey = getPlainText(domKey)
-    onChangeKey(newKey, key)
+    const parentPath = initial(path)
+
+    onPatch([{
+      op: 'move',
+      from: compileJSONPointer(parentPath.concat(key)),
+      path: compileJSONPointer(parentPath.concat(newKey))
+    }])
   }
   const updateKeyDebounced = debounce(updateKey, DEBOUNCE_DELAY)
 
@@ -169,36 +174,6 @@
     }
   }
 
-  // TODO: can we do a handleChangeKey in the child again?
-  function handleChangeKey (newChildKey, oldChildKey) {
-    if (type === 'object') {
-      // make sure the key is not a duplicate of an other property
-      const uniqueNewChildKey = findUniqueName(newChildKey, value)
-
-      if (uniqueNewChildKey !== oldChildKey) {
-        // we need to make sure that the renamed property will keep the same id
-        // const index = props.findIndex(item => item.key === oldChildKey)
-        // if (index !== -1) {
-        //   // we use splice here to replace the old key with the new new one
-        //   // already without Svelte noticing it (no assignment), so we prevent
-        //   // a needless render. We keep the same id, so the child HTML will be
-        //   // reused
-        //   // TODO: is there a better way to do this?
-        //   props.splice(index, 1, {
-        //     id: props[index].id,
-        //     key: uniqueNewChildKey
-        //   })
-        // }
-
-        onPatch([{
-          op: 'move',
-          from: compileJSONPointer(path.concat(oldChildKey)),
-          path: compileJSONPointer(path.concat(uniqueNewChildKey))
-        }])
-      }
-    }
-  }
-
   function handleShowAll () {
     onLimit(path, Infinity)
   }
@@ -243,7 +218,6 @@
             path={path.concat(index)}
             state={state && state[index]}
             searchResult={searchResult ? searchResult[index] : undefined}
-            onChangeKey={handleChangeKey}
             onPatch={onPatch}
             onExpand={onExpand}
             onLimit={onLimit}
@@ -297,7 +271,6 @@
             path={path.concat(prop.key)}
             state={state && state[prop.key]}
             searchResult={searchResult ? searchResult[prop.key] : undefined}
-            onChangeKey={handleChangeKey}
             onPatch={onPatch}
             onExpand={onExpand}
             onLimit={onLimit}
diff --git a/src/utils/syncState.js b/src/utils/syncState.js
index 02b9a45..463bc64 100644
--- a/src/utils/syncState.js
+++ b/src/utils/syncState.js
@@ -15,6 +15,9 @@ import { updateProps } from './updateProps.js'
  * @returns {JSON | undefined}
  */
 export function syncState (document, state = undefined, path, expand) {
+  // TODO: this function can be made way more efficient if we pass prevState:
+  //  when immutable, we can simply be done already when the state === prevState
+
   if (isObject(document)) {
     const updatedState = {}