Fixed input binding
This commit is contained in:
@@ -2,11 +2,10 @@
|
|||||||
import { debounce } from "obsidian"
|
import { debounce } from "obsidian"
|
||||||
import { createEventDispatcher, onMount, tick } from "svelte"
|
import { createEventDispatcher, onMount, tick } from "svelte"
|
||||||
|
|
||||||
export let debouncedValue: string
|
export let value = ''
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
let elInput: HTMLInputElement
|
let elInput: HTMLInputElement
|
||||||
let inputValue: string
|
|
||||||
const dispatch = createEventDispatcher()
|
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
await tick()
|
await tick()
|
||||||
@@ -15,7 +14,9 @@ onMount(async () => {
|
|||||||
elInput.select()
|
elInput.select()
|
||||||
})
|
})
|
||||||
|
|
||||||
const debouncedOnInput = debounce(() => (debouncedValue = inputValue), 100)
|
const debouncedOnInput = debounce(() => {
|
||||||
|
dispatch("input", value)
|
||||||
|
}, 100)
|
||||||
|
|
||||||
function moveNoteSelection(ev: KeyboardEvent): void {
|
function moveNoteSelection(ev: KeyboardEvent): void {
|
||||||
switch (ev.key) {
|
switch (ev.key) {
|
||||||
@@ -47,10 +48,10 @@ function moveNoteSelection(ev: KeyboardEvent): void {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
{inputValue} - {debouncedValue}
|
|
||||||
<input
|
<input
|
||||||
|
bind:value
|
||||||
bind:this={elInput}
|
bind:this={elInput}
|
||||||
bind:value={inputValue}
|
|
||||||
on:input={debouncedOnInput}
|
on:input={debouncedOnInput}
|
||||||
on:keydown={moveNoteSelection}
|
on:keydown={moveNoteSelection}
|
||||||
type="text"
|
type="text"
|
||||||
|
|||||||
@@ -94,7 +94,7 @@ function openSelection(): void {
|
|||||||
|
|
||||||
<div class="modal-title">Omnisearch - File</div>
|
<div class="modal-title">Omnisearch - File</div>
|
||||||
<CmpInput
|
<CmpInput
|
||||||
bind:debouncedValue={searchQuery}
|
on:input={(e) => (searchQuery = e.detail)}
|
||||||
on:enter={openSelection}
|
on:enter={openSelection}
|
||||||
on:arrow-up={() => moveIndex(-1)}
|
on:arrow-up={() => moveIndex(-1)}
|
||||||
on:arrow-down={() => moveIndex(1)}
|
on:arrow-down={() => moveIndex(1)}
|
||||||
|
|||||||
@@ -1,3 +1,7 @@
|
|||||||
|
<script lang="ts" context="module">
|
||||||
|
let lastSearch = ""
|
||||||
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { TFile } from "obsidian"
|
import { TFile } from "obsidian"
|
||||||
import { onMount, tick } from "svelte"
|
import { onMount, tick } from "svelte"
|
||||||
@@ -7,18 +11,18 @@ import type { ResultNote } from "./globals"
|
|||||||
import { OmnisearchModal } from "./modal"
|
import { OmnisearchModal } from "./modal"
|
||||||
import { openNote } from "./notes"
|
import { openNote } from "./notes"
|
||||||
import { getSuggestions } from "./search"
|
import { getSuggestions } from "./search"
|
||||||
import { lastSearch, modal, plugin } from "./stores"
|
import { modal, plugin } from "./stores"
|
||||||
import { loopIndex } from "./utils"
|
import { loopIndex } from "./utils"
|
||||||
|
|
||||||
let selectedIndex = 0
|
let selectedIndex = 0
|
||||||
let searchQuery: string
|
let searchQuery: string
|
||||||
let resultNotes: ResultNote[] = []
|
let resultNotes: ResultNote[] = []
|
||||||
$: selectedNote = resultNotes[selectedIndex]!
|
$: selectedNote = resultNotes[selectedIndex]
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if (searchQuery) {
|
if (searchQuery) {
|
||||||
resultNotes = getSuggestions(searchQuery)
|
resultNotes = getSuggestions(searchQuery)
|
||||||
$lastSearch = searchQuery
|
lastSearch = searchQuery
|
||||||
}
|
}
|
||||||
selectedIndex = 0
|
selectedIndex = 0
|
||||||
scrollIntoView()
|
scrollIntoView()
|
||||||
@@ -26,7 +30,7 @@ $: {
|
|||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
await tick()
|
await tick()
|
||||||
searchQuery = $lastSearch
|
searchQuery = lastSearch
|
||||||
})
|
})
|
||||||
|
|
||||||
async function createOrOpenNote(item: ResultNote): Promise<void> {
|
async function createOrOpenNote(item: ResultNote): Promise<void> {
|
||||||
@@ -47,22 +51,26 @@ async function createOrOpenNote(item: ResultNote): Promise<void> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onClick() {
|
function onClick() {
|
||||||
|
if (!selectedNote) return
|
||||||
openNote(selectedNote)
|
openNote(selectedNote)
|
||||||
$modal.close()
|
$modal.close()
|
||||||
}
|
}
|
||||||
|
|
||||||
function onInputEnter(): void {
|
function onInputEnter(): void {
|
||||||
// console.log(event.detail)
|
// console.log(event.detail)
|
||||||
|
if (!selectedNote) return
|
||||||
openNote(selectedNote)
|
openNote(selectedNote)
|
||||||
$modal.close()
|
$modal.close()
|
||||||
}
|
}
|
||||||
|
|
||||||
function onInputCtrlEnter(): void {
|
function onInputCtrlEnter(): void {
|
||||||
|
if (!selectedNote) return
|
||||||
openNote(selectedNote, true)
|
openNote(selectedNote, true)
|
||||||
$modal.close()
|
$modal.close()
|
||||||
}
|
}
|
||||||
|
|
||||||
function onInputShiftEnter(): void {
|
function onInputShiftEnter(): void {
|
||||||
|
if (!selectedNote) return
|
||||||
createOrOpenNote(selectedNote)
|
createOrOpenNote(selectedNote)
|
||||||
$modal.close()
|
$modal.close()
|
||||||
}
|
}
|
||||||
@@ -83,20 +91,21 @@ function moveIndex(dir: 1 | -1): void {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function scrollIntoView(): void {
|
function scrollIntoView(): void {
|
||||||
if (selectedNote) {
|
tick().then(() => {
|
||||||
tick().then(() => {
|
if (selectedNote) {
|
||||||
const elem = document.querySelector(
|
const elem = document.querySelector(
|
||||||
`[data-note-id="${selectedNote.path}"]`
|
`[data-note-id="${selectedNote.path}"]`
|
||||||
)
|
)
|
||||||
elem?.scrollIntoView({ behavior: "auto", block: "nearest" })
|
elem?.scrollIntoView({ behavior: "auto", block: "nearest" })
|
||||||
})
|
}
|
||||||
}
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="modal-title">Omnisearch - Vault</div>
|
<div class="modal-title">Omnisearch - Vault</div>
|
||||||
<CmpInput
|
<CmpInput
|
||||||
bind:debouncedValue={searchQuery}
|
value={lastSearch}
|
||||||
|
on:input={(e) => (searchQuery = e.detail)}
|
||||||
on:enter={onInputEnter}
|
on:enter={onInputEnter}
|
||||||
on:shift-enter={onInputShiftEnter}
|
on:shift-enter={onInputShiftEnter}
|
||||||
on:ctrl-enter={onInputCtrlEnter}
|
on:ctrl-enter={onInputCtrlEnter}
|
||||||
|
|||||||
@@ -27,11 +27,6 @@ function createIndexedNotes() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* If this field is set, the search will be limited to the given file
|
|
||||||
*/
|
|
||||||
// export const inFileSearch = writable<TFile | null>(null)
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A reference to the plugin instance
|
* A reference to the plugin instance
|
||||||
*/
|
*/
|
||||||
@@ -46,5 +41,3 @@ export const modal = writable<OmnisearchModal>()
|
|||||||
* The entire list of indexed notes, constantly kept up-to-date.
|
* The entire list of indexed notes, constantly kept up-to-date.
|
||||||
*/
|
*/
|
||||||
export const indexedNotes = createIndexedNotes()
|
export const indexedNotes = createIndexedNotes()
|
||||||
|
|
||||||
export const lastSearch = writable('')
|
|
||||||
|
|||||||
Reference in New Issue
Block a user