Refactoring in duplicate

src/components/DropdownMenu.svelte

@@ -51,7 +51,7 @@
       {#each items as item}
         <li>
           <button 
-            on:click={item.onClick} 
+            on:click={() => item.onClick()} 
             title={item.title}
             disabled={item.disabled}
           >

src/components/JSONEditor.svelte

@@ -9,16 +9,14 @@
   import {
     STATE_EXPANDED,
     STATE_LIMIT,
-    SCROLL_DURATION,
+    SCROLL_DURATION
-    STATE_PROPS
   } from '../constants.js'
   import { createHistory } from '../logic/history.js'
   import JSONNode from './JSONNode.svelte'
   import {
     createPathsMap,
     createSelectionFromOperations,
-    expandSelection,
+    expandSelection
-getParentPath
   } from '../logic/selection.js'
   import { isContentEditableDiv } from '../utils/domUtils.js'
   import {
@@ -30,11 +28,11 @@ getParentPath
   import { keyComboFromEvent } from '../utils/keyBindings.js'
   import { search, searchNext, searchPrevious } from '../logic/search.js'
   import { immutableJSONPatch } from '../utils/immutableJSONPatch'
-  import { initial, last, cloneDeep } from 'lodash-es'
+  import { last, cloneDeep } from 'lodash-es'
   import jump from '../assets/jump.js/src/jump.js'
-  import { expandPath, syncState, getNextKeys, patchProps } from '../logic/documentState.js'
+  import { expandPath, syncState, patchProps } from '../logic/documentState.js'
   import Menu from './Menu.svelte'
-import { isObjectOrArray } from '../utils/typeUtils.js';
+import { isObjectOrArray } from '../utils/typeUtils.js'
 
   let divContents
   let domHiddenInput
@@ -162,15 +160,7 @@ import { isObjectOrArray } from '../utils/typeUtils.js';
     if (selection && selection.paths) {
       console.log('duplicate', { selection })
 
-    // TODO: move this logic inside duplicate()
+      const operations = duplicate(doc, state, selection.paths)
-
-      const lastPath = last(selection.paths) // FIXME: here we assume selection.paths is sorted correctly, that's a dangerous assumption
-      const parentPath = initial(lastPath)
-      const beforeKey = last(lastPath)
-      const props = getIn(state, parentPath.concat(STATE_PROPS))
-      const nextKeys = getNextKeys(props, beforeKey, false)
-
-      const operations = duplicate(doc, selection.paths, nextKeys)
       const newSelection = createSelectionFromOperations(operations)
 
       handlePatch(operations, newSelection)
@@ -434,7 +424,6 @@ import { isObjectOrArray } from '../utils/typeUtils.js';
     searchResult={searchResult}
     bind:showSearch
 
-    doc={doc}
     selection={selection}
     clipboard={clipboard}
     

src/components/Menu.svelte

@@ -3,13 +3,10 @@
   import { faCut, faClone, faCopy, faPaste, faSearch, faUndo, faRedo, faPlus } from '@fortawesome/free-solid-svg-icons'
   import SearchBox from './SearchBox.svelte'
   import DropdownMenu from './DropdownMenu.svelte'
-  import { getParentPath } from '../logic/selection'
-  import { getIn } from '../utils/immutabilityHelpers'
 
   export let searchText
   export let searchResult
   export let showSearch = false
-  export let doc
   export let selection
   export let clipboard
   export let historyState
@@ -40,8 +37,8 @@
     onSearchText('')
   }
 
-  function handleInsertValue () {
+  function handleInsertStructure () {
-    onInsert('value')
+    onInsert('structure')
   }
 
   /** @type {MenuDropdownItem[]} */
@@ -49,7 +46,7 @@
     {
       text: 'Insert value',
       title: 'Insert a new value',
-      onClick: handleInsertValue,
+      onClick: () => onInsert('value'),
       disabled: !hasSelectionWithoutContents,
       default: true
     },
@@ -69,7 +66,7 @@
       text: 'Insert structure',
       title: 'Insert a new item with the same structure as other items. ' +
         'Only applicable inside an array',
-      onClick: () => onInsert('structure'),
+      onClick: handleInsertStructure,
       disabled: !hasSelectionWithoutContents
     }
   ]
@@ -119,7 +116,7 @@
     <button 
       class="button insert"
       slot="defaultItem" 
-      on:click={handleInsertValue}
+      on:click={handleInsertStructure}
       disabled={!hasSelectionWithoutContents}
     >
       <Icon data={faPlus} />

src/logic/operations.js

@@ -185,16 +185,18 @@ export function replace (json, paths, values, nextKeys) {  // TODO: find a bette
  * and object property
  *
  * @param {JSON} json
+ * @param {JSON} doc
  * @param {Path[]} paths
- * @param {string[]} nextKeys   A list with all keys *after* the renamed key,
- *                              these keys will be moved down, so the renamed
- *                              key will maintain it's position above these keys
  * @return {JSONPatchDocument}
  */
-export function duplicate (json, paths, nextKeys) {
+export function duplicate (doc, state, paths) {
-  const firstPath = first(paths)
+  // FIXME: here we assume selection.paths is sorted correctly, that's a dangerous assumption
-  const parentPath = initial(firstPath)
+  const lastPath = last(paths) 
-  const parent = getIn(json, parentPath)
+  const parentPath = initial(lastPath)
+  const beforeKey = last(lastPath)
+  const props = getIn(state, parentPath.concat(STATE_PROPS))
+  const nextKeys = getNextKeys(props, beforeKey, false)
+  const parent = getIn(doc, parentPath)
   
   if (Array.isArray(parent)) {
     const lastPath = last(paths)
@@ -240,6 +242,7 @@ export function insert (doc, state, selection, values) {
     const props = getIn(state, parentPath.concat(STATE_PROPS))
     const nextKeys = getNextKeys(props, beforeKey, true)
     const operations = insertBefore(doc, selection.beforePath, values, nextKeys)
+    // TODO: move calculation of nextKeys inside insertBefore?
     
     return operations
   } else if (selection.appendPath) {
@@ -253,6 +256,7 @@ export function insert (doc, state, selection, values) {
     const props = getIn(state, parentPath.concat(STATE_PROPS))
     const nextKeys = getNextKeys(props, beforeKey, true)
     const operations = replace(doc, selection.paths, values, nextKeys)
+    // TODO: move calculation of nextKeys inside replace?
     
     return operations
   }