Be able to select a single node by clicking

src/JSONEditor.svelte

@@ -19,6 +19,7 @@
   import { createHistory } from './history.js'
   import Node from './JSONNode.svelte'
   import { expandSelection } from './selection.js'
+  import { isContentEditableDiv } from './utils/domUtils.js'
   import {
     existsIn,
     getIn,
@@ -410,10 +411,7 @@
   function handleKeyDown (event) {
     const combo = keyComboFromEvent(event)
 
-    const targetIsContentEditableDiv = (
-      event.target.nodeName === 'DIV' && event.target.contentEditable === 'true')
-
-    if (!targetIsContentEditableDiv) {
+    if (!isContentEditableDiv(event.target)) {
       if (combo === 'Ctrl+X' || combo === 'Command+X') {
         event.preventDefault()
         handleCut()

src/JSONNode.svelte

@@ -12,7 +12,11 @@
     INDENTATION_WIDTH
   } from './constants.js'
   import { singleton } from './singleton.js'
-  import { getPlainText, setPlainText } from './utils/domUtils.js'
+  import {
+    getPlainText,
+    isChildOfButton, isContentEditableDiv,
+    setPlainText
+  } from './utils/domUtils.js'
   import Icon from 'svelte-awesome'
   import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons'
   import classnames from 'classnames'
@@ -96,10 +100,18 @@
   }
 
   function toggleExpand (event) {
+    event.stopPropagation()
+
     const recursive = event.ctrlKey
     onExpand(path, !expanded, recursive)
   }
 
+  function handleExpand (event) {
+    event.stopPropagation()
+
+    onExpand(path, true)
+  }
+
   function updateKey () {
     const newKey = getPlainText(domKey)
 
@@ -205,14 +217,17 @@
       onSelect(null)
     }
 
-    // check if the mouse down is not happening in the key or value input fields
-    if (event.target.contentEditable !== 'true') {
+    // check if the mouse down is not happening in the key or value input fields or on a button
+    if (!isContentEditableDiv(event.target) && !isChildOfButton(event.target)) {
       // initialize dragging a selection
       singleton.mousedown = true
       singleton.selectionAnchor = path
-      singleton.selectionFocus = null
+      singleton.selectionFocus = path
 
-      // TODO: select the clicked node directly
+      onSelect({
+        anchorPath: singleton.selectionAnchor,
+        focusPath: singleton.selectionFocus
+      })
 
       event.stopPropagation()
     }
@@ -335,7 +350,7 @@
         <div class="delimiter">[</div>
       {:else}
         <div class="delimiter">[</div>
-        <button class="tag" on:click={() => onExpand(path, true)}>{value.length} items</button>
+        <button class="tag" on:click={handleExpand}>{value.length} items</button>
         <div class="delimiter">]</div>
       {/if}
     </div>
@@ -403,7 +418,7 @@
         <span class="delimiter">&#123;</span>
       {:else}
         <span class="delimiter"> &#123;</span>
-        <button class="tag" on:click={() => onExpand(path, true)}>{Object.keys(value).length} props</button>
+        <button class="tag" on:click={handleExpand}>{Object.keys(value).length} props</button>
         <span class="delimiter">}</span>
       {/if}
     </div>

src/utils/domUtils.js

@@ -178,3 +178,19 @@ export function traverseInnerText (element, buffer) {
   // br or unknown
   return ''
 }
+
+// test whether a DOM element is a child of a button
+export function isChildOfButton (element) {
+  let e = element
+
+  while (e && e.nodeName !== 'BUTTON') {
+    e = e.parentNode
+  }
+
+  return e && e.nodeName === 'BUTTON'
+}
+
+// test whether a DOM element is a content editable div
+export function isContentEditableDiv (element) {
+  return (element.nodeName === 'DIV' && element.contentEditable === 'true')
+}