diff --git a/src/JSONEditor.svelte b/src/JSONEditor.svelte index c899e4a..629c3ec 100644 --- a/src/JSONEditor.svelte +++ b/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() diff --git a/src/JSONNode.svelte b/src/JSONNode.svelte index 39e86ae..5c22d63 100644 --- a/src/JSONNode.svelte +++ b/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 @@