Make quick keys for cut/copy/paste working
This commit is contained in:
parent
0e5dabed89
commit
2a7d4828cb
|
@ -7,6 +7,7 @@
|
||||||
min-height: 150px;
|
min-height: 150px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
font-family: $font-family-menu;
|
font-family: $font-family-menu;
|
||||||
|
@ -60,6 +61,27 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hidden-input-label {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
|
||||||
|
.hidden-input {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
outline: none;
|
||||||
|
visibility: hidden;
|
||||||
|
|
||||||
|
&.visible {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.contents {
|
.contents {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { tick, beforeUpdate, afterUpdate } from 'svelte'
|
import { tick } from 'svelte'
|
||||||
import {
|
import {
|
||||||
append,
|
append,
|
||||||
insertBefore,
|
insertBefore,
|
||||||
|
@ -25,29 +25,21 @@
|
||||||
setIn,
|
setIn,
|
||||||
updateIn
|
updateIn
|
||||||
} from './utils/immutabilityHelpers.js'
|
} from './utils/immutabilityHelpers.js'
|
||||||
import { compileJSONPointer, parseJSONPointer } from './utils/jsonPointer.js'
|
import { compileJSONPointer } from './utils/jsonPointer.js'
|
||||||
import { keyComboFromEvent } from './utils/keyBindings.js'
|
import { keyComboFromEvent } from './utils/keyBindings.js'
|
||||||
import { flattenSearch, search } from './utils/search.js'
|
import { flattenSearch, search } from './utils/search.js'
|
||||||
import { immutableJSONPatch } from './utils/immutableJSONPatch'
|
import { immutableJSONPatch } from './utils/immutableJSONPatch'
|
||||||
import { isEqual, isNumber, initial, last, cloneDeep } from 'lodash-es'
|
import { isEqual, isNumber, initial, last, cloneDeep } from 'lodash-es'
|
||||||
import jump from './assets/jump.js/src/jump.js'
|
import jump from './assets/jump.js/src/jump.js'
|
||||||
import { syncState } from './utils/syncState.js'
|
import { syncState } from './utils/syncState.js'
|
||||||
import { isObject } from './utils/typeUtils.js'
|
|
||||||
import { getNextKeys, patchProps } from './utils/updateProps.js'
|
import { getNextKeys, patchProps } from './utils/updateProps.js'
|
||||||
|
|
||||||
let divContents
|
let divContents
|
||||||
|
let domHiddenInput
|
||||||
// beforeUpdate(() => {
|
|
||||||
// console.time('render')
|
|
||||||
// })
|
|
||||||
// afterUpdate(() => {
|
|
||||||
// console.timeEnd('render')
|
|
||||||
// })
|
|
||||||
|
|
||||||
export let doc = {}
|
export let doc = {}
|
||||||
let state = undefined
|
let state = undefined
|
||||||
let selection = null
|
let selection = null
|
||||||
let selectionMap = {}
|
|
||||||
|
|
||||||
export let onChangeJson = () => {}
|
export let onChangeJson = () => {}
|
||||||
|
|
||||||
|
@ -355,6 +347,9 @@
|
||||||
} else {
|
} else {
|
||||||
console.error('Unknown type of selection', newSelection)
|
console.error('Unknown type of selection', newSelection)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// set focus to the hidden input, so we can capture quick keys like Ctrl+X, Ctrl+C, Ctrl+V
|
||||||
|
setTimeout(() => domHiddenInput.focus())
|
||||||
} else {
|
} else {
|
||||||
selection = null
|
selection = null
|
||||||
}
|
}
|
||||||
|
@ -420,6 +415,10 @@
|
||||||
handleRedo()
|
handleRedo()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleKeyDownHiddenInput (event) {
|
||||||
|
const combo = keyComboFromEvent(event)
|
||||||
|
|
||||||
if (combo === 'Ctrl+X' || combo === 'Command+X') {
|
if (combo === 'Ctrl+X' || combo === 'Command+X') {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
@ -511,6 +510,14 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
<label class="hidden-input-label">
|
||||||
|
<input
|
||||||
|
class="hidden-input"
|
||||||
|
class:visible={!!selection}
|
||||||
|
bind:this={domHiddenInput}
|
||||||
|
on:keydown={handleKeyDownHiddenInput}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
<div class="contents" bind:this={divContents}>
|
<div class="contents" bind:this={divContents}>
|
||||||
<Node
|
<Node
|
||||||
value={doc}
|
value={doc}
|
||||||
|
|
Loading…
Reference in New Issue