65 lines
1.5 KiB
Svelte
65 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher, onMount, tick } from "svelte"
|
|
// import { throttle } from "lodash-es"
|
|
import { searchQuery, selectedNote } from "./stores"
|
|
|
|
let input: HTMLInputElement
|
|
const dispatch = createEventDispatcher()
|
|
|
|
onMount(async () => {
|
|
await tick()
|
|
input.focus()
|
|
input.select()
|
|
})
|
|
|
|
// const throttledMoveNoteSelection = throttle(moveNoteSelection, 75)
|
|
function moveNoteSelection(ev: KeyboardEvent): void {
|
|
switch (ev.key) {
|
|
case "ArrowDown":
|
|
ev.preventDefault()
|
|
selectedNote.next()
|
|
break
|
|
case "ArrowUp":
|
|
ev.preventDefault()
|
|
selectedNote.previous()
|
|
break
|
|
case "ArrowLeft":
|
|
break
|
|
case "ArrowRight":
|
|
break
|
|
|
|
case "Enter":
|
|
ev.preventDefault()
|
|
if (ev.ctrlKey || ev.metaKey) {
|
|
// Open in a new pane
|
|
dispatch("ctrl-enter", $selectedNote)
|
|
} else if (ev.shiftKey) {
|
|
// Create a new note
|
|
dispatch("shift-enter", $selectedNote)
|
|
} else {
|
|
// Open in current pane
|
|
dispatch("enter", $selectedNote)
|
|
}
|
|
break
|
|
}
|
|
|
|
// Scroll selected note into view when selecting with keyboard
|
|
if ($selectedNote) {
|
|
const elem = document.querySelector(
|
|
`[data-note-id="${$selectedNote.path}"]`
|
|
)
|
|
elem?.scrollIntoView({ behavior: "auto", block: "nearest" })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<input
|
|
bind:this={input}
|
|
bind:value={$searchQuery}
|
|
on:keydown={moveNoteSelection}
|
|
type="text"
|
|
class="prompt-input"
|
|
placeholder="Type to search through your notes"
|
|
spellcheck="false"
|
|
/>
|