From f6c3f9b5806f4744c527f3969983259724a7d713 Mon Sep 17 00:00:00 2001
From: Simon Cambier <simon.cambier@protonmail.com>
Date: Mon, 18 Apr 2022 22:01:15 +0200
Subject: [PATCH] In-file search ok

---
 src/CmpInfileResult.svelte | 20 +++++++----
 src/CmpInput.svelte        | 32 +++++-------------
 src/CmpModalFile.svelte    | 69 ++++++++++++++++++++++++++++----------
 src/CmpModalVault.svelte   | 55 +++++++++++++++++++++++++-----
 src/CmpNoteResult.svelte   | 36 +++++---------------
 src/search.ts              |  9 -----
 src/stores.ts              | 31 -----------------
 src/utils.ts               | 19 +++--------
 8 files changed, 133 insertions(+), 138 deletions(-)

diff --git a/src/CmpInfileResult.svelte b/src/CmpInfileResult.svelte
index d736e2b..d48e8f5 100644
--- a/src/CmpInfileResult.svelte
+++ b/src/CmpInfileResult.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
+import { createEventDispatcher } from "svelte"
 import {
-excerptAfter,
-excerptBefore,
-  type IndexedNote,
+  excerptAfter,
+  excerptBefore,
   type ResultNote,
-  type SearchMatch,
 } from "./globals"
-import { indexedNotes, inFileSearch } from "./stores"
 import { escapeHTML, highlighter, stringsToRegex } from "./utils"
 
+const dispatch = createEventDispatcher()
 export let offset: number
 export let note: ResultNote
+export let index = 0
+export let selected = false
 
 $: reg = stringsToRegex(note.foundWords)
 
@@ -26,9 +27,16 @@ function cleanContent(content: string): string {
   }
   return escapeHTML(content)
 }
+
 </script>
 
-<div class="suggestion-item omnisearch-result">
+<div
+  class="suggestion-item omnisearch-result"
+  data-item-id={index}
+  class:is-selected={selected}
+  on:mousemove={(e) => dispatch("hover")}
+  on:click={(e) => dispatch("click")}
+>
   <div class="omnisearch-result__body">
     {@html cleanContent(note?.content ?? "").replace(reg, highlighter)}
   </div>
diff --git a/src/CmpInput.svelte b/src/CmpInput.svelte
index f806fbd..98946e8 100644
--- a/src/CmpInput.svelte
+++ b/src/CmpInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-import { debounce } from "obsidian";
+import { debounce } from "obsidian"
 import { createEventDispatcher, onMount, tick } from "svelte"
-import { searchQuery, selectedNote } from "./stores"
+import { searchQuery } from "./stores"
 
 let elInput: HTMLInputElement
 let inputValue: string
@@ -14,50 +14,36 @@ onMount(async () => {
   elInput.select()
 })
 
-const debouncedOnInput = debounce(() => $searchQuery = inputValue, 100)
+const debouncedOnInput = debounce(() => ($searchQuery = inputValue), 100)
 
 function moveNoteSelection(ev: KeyboardEvent): void {
   switch (ev.key) {
     case "ArrowDown":
       ev.preventDefault()
-      selectedNote.next()
+      dispatch("arrow-down")
       break
     case "ArrowUp":
       ev.preventDefault()
-      selectedNote.previous()
+      dispatch("arrow-up")
       break
-    // case "ArrowLeft":
-    //   ev.preventDefault()
-    //   break
-    // case "ArrowRight":
-    //   ev.preventDefault()
-    //   break
 
     case "Enter":
       ev.preventDefault()
       if (ev.ctrlKey || ev.metaKey) {
         // Open in a new pane
-        dispatch("ctrl-enter", $selectedNote)
+        dispatch("ctrl-enter")
       } else if (ev.shiftKey) {
         // Create a new note
-        dispatch("shift-enter", $selectedNote)
+        dispatch("shift-enter")
       } else if (ev.altKey) {
         // Create a new note
-        dispatch("alt-enter", $selectedNote)
+        dispatch("alt-enter")
       } else {
         // Open in current pane
-        dispatch("enter", $selectedNote)
+        dispatch("enter")
       }
       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>
 
diff --git a/src/CmpModalFile.svelte b/src/CmpModalFile.svelte
index cca83f1..b53062b 100644
--- a/src/CmpModalFile.svelte
+++ b/src/CmpModalFile.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
 import CmpInput from "./CmpInput.svelte"
-import CmpNoteInternalResult from "./CmpInfileResult.svelte"
-import { excerptAfter, type ResultNote, type SearchMatch } from "./globals"
-import { resultNotes } from "./stores"
+import CmpInFileResult from "./CmpInfileResult.svelte"
+import { excerptAfter, type SearchMatch } from "./globals"
+import { modal, plugin, resultNotes } from "./stores"
+import { loopIndex } from "./utils"
+import { tick } from "svelte"
+import { MarkdownView } from "obsidian"
 
 let matches: SearchMatch[] = []
 let groupedOffsets: number[] = []
+let selectedIndex = 0
 
 $: note = $resultNotes[0]
 $: {
@@ -47,21 +51,58 @@ function getGroupedMatches(
   )
 }
 
-function onInputEnter(event: CustomEvent<ResultNote>): void {
-  // console.log(event.detail)
-  // openNote(event.detail)
-  // $modal.close()
+function moveIndex(dir: 1 | -1): void {
+  selectedIndex = loopIndex(selectedIndex + dir, groupedOffsets.length)
+  scrollIntoView()
+}
+
+function scrollIntoView(): void {
+  tick().then(() => {
+    const elem = document.querySelector(`[data-item-id="${selectedIndex}"]`)
+    elem?.scrollIntoView({ behavior: "auto", block: "nearest" })
+  })
+}
+
+function openSelection(): void {
+  // TODO: clean me, merge with notes.openNote()
+  if (note) {
+    $plugin.app.workspace.openLinkText(note.path, "")
+    const view = $plugin.app.workspace.getActiveViewOfType(MarkdownView)
+    if (!view) {
+      throw new Error("OmniSearch - No active MarkdownView")
+    }
+    const offset = groupedOffsets[selectedIndex] ?? 0
+    const pos = view.editor.offsetToPos(offset)
+    pos.ch = 0
+    view.editor.setCursor(pos)
+    view.editor.scrollIntoView({
+      from: { line: pos.line - 10, ch: 0 },
+      to: { line: pos.line + 10, ch: 0 },
+    })
+    $modal.close()
+  }
 }
 </script>
 
 <div class="modal-title">Omnisearch - File</div>
-<CmpInput on:enter={onInputEnter} />
+<CmpInput
+  on:enter={openSelection}
+  on:arrow-up={() => moveIndex(-1)}
+  on:arrow-down={() => moveIndex(1)}
+/>
 
 <div class="modal-content">
   <div class="prompt-results">
     {#if groupedOffsets.length && note}
-      {#each groupedOffsets as offset}
-        <CmpNoteInternalResult {offset} {note} />
+      {#each groupedOffsets as offset, i}
+        <CmpInFileResult
+          {offset}
+          {note}
+          index={i}
+          selected={i === selectedIndex}
+          on:hover={(e) => (selectedIndex = i)}
+          on:click={openSelection}
+        />
       {/each}
     {:else}
       We found 0 result for your search here.
@@ -75,14 +116,6 @@ function onInputEnter(event: CustomEvent<ResultNote>): void {
   <div class="prompt-instruction">
     <span class="prompt-instruction-command">↵</span><span>to open</span>
   </div>
-  <!-- <div class="prompt-instruction">
-      <span class="prompt-instruction-command">ctrl ↵</span>
-      <span>to open in a new pane</span>
-    </div>
-    <div class="prompt-instruction">
-      <span class="prompt-instruction-command">shift ↵</span>
-      <span>to create</span>
-    </div> -->
   <div class="prompt-instruction">
     <span class="prompt-instruction-command">esc</span><span>to dismiss</span>
   </div>
diff --git a/src/CmpModalVault.svelte b/src/CmpModalVault.svelte
index a6ee460..171ed01 100644
--- a/src/CmpModalVault.svelte
+++ b/src/CmpModalVault.svelte
@@ -1,9 +1,18 @@
 <script lang="ts">
+import { tick } from "svelte"
 import CmpInput from "./CmpInput.svelte"
 import CmpNoteResult from "./CmpNoteResult.svelte"
 import type { ResultNote } from "./globals"
 import { openNote } from "./notes"
-import { modal, plugin, resultNotes, searchQuery, selectedNote } from "./stores"
+import { modal, plugin, resultNotes, searchQuery } from "./stores"
+import { loopIndex } from "./utils"
+
+let selectedIndex = 0
+$: selectedNote = $resultNotes[selectedIndex]!
+
+searchQuery.subscribe((q) => {
+  selectedIndex = 0
+})
 
 async function createOrOpenNote(item: ResultNote): Promise<void> {
   try {
@@ -22,21 +31,42 @@ async function createOrOpenNote(item: ResultNote): Promise<void> {
   }
 }
 
-function onInputEnter(event: CustomEvent<ResultNote>): void {
+function onClick() {
+  openNote(selectedNote)
+  $modal.close()
+}
+
+function onInputEnter(event: CustomEvent<unknown>): void {
   // console.log(event.detail)
-  openNote(event.detail)
+  openNote(selectedNote)
   $modal.close()
 }
 
-function onInputCtrlEnter(event: CustomEvent<ResultNote>): void {
-  openNote(event.detail, true)
+function onInputCtrlEnter(event: CustomEvent<unknown>): void {
+  openNote(selectedNote, true)
   $modal.close()
 }
 
-function onInputShiftEnter(event: CustomEvent<ResultNote>): void {
-  createOrOpenNote(event.detail)
+function onInputShiftEnter(event: CustomEvent<unknown>): void {
+  createOrOpenNote(selectedNote)
   $modal.close()
 }
+
+function moveIndex(dir: 1 | -1): void {
+  selectedIndex = loopIndex(selectedIndex + dir, $resultNotes.length)
+  scrollIntoView()
+}
+
+function scrollIntoView(): void {
+  if (selectedNote) {
+    tick().then(() => {
+      const elem = document.querySelector(
+        `[data-note-id="${selectedNote.path}"]`
+      )
+      elem?.scrollIntoView({ behavior: "auto", block: "nearest" })
+    })
+  }
+}
 </script>
 
 <div class="modal-title">Omnisearch - Vault</div>
@@ -44,12 +74,19 @@ function onInputShiftEnter(event: CustomEvent<ResultNote>): void {
   on:enter={onInputEnter}
   on:shift-enter={onInputShiftEnter}
   on:ctrl-enter={onInputCtrlEnter}
+  on:arrow-up={() => moveIndex(-1)}
+  on:arrow-down={() => moveIndex(1)}
 />
 
 <div class="modal-content">
   <div class="prompt-results">
-    {#each $resultNotes as result}
-      <CmpNoteResult selected={result === $selectedNote} note={result} />
+    {#each $resultNotes as result, i}
+      <CmpNoteResult
+        selected={i === selectedIndex}
+        note={result}
+        on:hover={(e) => (selectedIndex = i)}
+        on:click={onClick}
+      />
     {/each}
   </div>
 </div>
diff --git a/src/CmpNoteResult.svelte b/src/CmpNoteResult.svelte
index 260459a..d0f5cf5 100644
--- a/src/CmpNoteResult.svelte
+++ b/src/CmpNoteResult.svelte
@@ -1,21 +1,16 @@
 <script lang="ts">
-import {  excerptAfter, excerptBefore, type ResultNote } from "./globals"
-import { openNote } from "./notes"
-import { getMatches } from "./search";
-import { modal, selectedNote } from "./stores"
+import { createEventDispatcher } from "svelte"
+import { excerptAfter, excerptBefore, type ResultNote } from "./globals"
+import { getMatches } from "./search"
 import { escapeHTML, highlighter, stringsToRegex } from "./utils"
 
+const dispatch = createEventDispatcher()
 export let selected = false
 export let note: ResultNote
 
-// function getMatches(text: string) {
-//   let match: RegExpExecArray | null = null
-//   const matches: { term: string; index: number }[] = []
-//   while (null !== (match = reg.exec(text))) {
-//     matches.push({ term: match[0], index: match.index })
-//   }
-//   return matches
-// }
+$: reg = stringsToRegex(note.foundWords)
+$: matches = getMatches(note.content, reg)
+$: cleanedContent = cleanContent(note.content)
 
 function cleanContent(content: string): string {
   const pos = note.matches[0]?.offset ?? -1
@@ -29,27 +24,14 @@ function cleanContent(content: string): string {
   }
   return escapeHTML(content)
 }
-
-$: reg = stringsToRegex(note.foundWords)
-$: matches = getMatches(note.content, reg)
-$: cleanedContent = cleanContent(note.content)
-
-function onHover() {
-  $selectedNote = note
-}
-function onClick() {
-  openNote(note)
-  $modal.close()
-}
 </script>
 
 <div
   data-note-id={note.path}
   class="suggestion-item omnisearch-result"
   class:is-selected={selected}
-  on:mouseover={onHover}
-  on:focus={onHover}
-  on:click={onClick}
+  on:mousemove={(e) => dispatch("hover")}
+  on:click={(e) => dispatch("click")}
 >
   <span class="omnisearch-result__title">
     <!-- {@html note.basename.replace(reg, highlighter)} -->
diff --git a/src/search.ts b/src/search.ts
index dad14f8..9376b09 100644
--- a/src/search.ts
+++ b/src/search.ts
@@ -7,11 +7,9 @@ import {
   plugin,
   resultNotes,
   searchQuery,
-  selectedNote,
 } from './stores'
 import { get } from 'svelte/store'
 import { extractHeadingsFromCache, stringsToRegex, wait } from './utils'
-import { tick } from 'svelte'
 
 let minisearchInstance: MiniSearch<IndexedNote>
 
@@ -96,13 +94,6 @@ function subscribeToQuery(): void {
 
     // Save the results in the store
     resultNotes.set(results)
-
-    // Automatically select the first result
-    const firstResult = results[0]
-    if (firstResult) {
-      await tick()
-      selectedNote.set(firstResult)
-    }
   }
 }
 
diff --git a/src/stores.ts b/src/stores.ts
index f5e1e18..2a28133 100644
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -27,32 +27,6 @@ function createIndexedNotes() {
   }
 }
 
-function createSelectedNote() {
-  const { subscribe, set, update } = writable<ResultNote | null>(null)
-  return {
-    subscribe,
-    set,
-    next: () =>
-      update(v => {
-        const notes = get(resultNotes)
-        if (!notes.length) return null
-        let id = notes.findIndex(n => n.path === v?.path)
-        if (id === -1) return notes[0] ?? null
-        id = id < notes.length - 1 ? id + 1 : 0
-        return notes[id] ?? null
-      }),
-    previous: () =>
-      update(v => {
-        const notes = get(resultNotes)
-        if (!notes.length) return null
-        let id = notes.findIndex(n => n.path === v?.path)
-        if (id === -1) return notes[0] ?? null
-        id = id > 0 ? id - 1 : notes.length - 1
-        return notes[id] ?? null
-      }),
-  }
-}
-
 /**
  * If this field is set, the search will be limited to the given file
  */
@@ -68,11 +42,6 @@ export const searchQuery = writable<string>('')
  */
 export const resultNotes = writable<ResultNote[]>([])
 
-/**
- * The currently selected/hovered note in the results list
- */
-export const selectedNote = createSelectedNote()
-
 /**
  * A reference to the plugin instance
  */
diff --git a/src/utils.ts b/src/utils.ts
index ca0a19b..500930b 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -53,21 +53,6 @@ export function getAllIndices(text: string, regex: RegExp): SearchMatch[] {
     .filter(isSearchMatch)
 }
 
-// export function getAllIndices(text: string, terms: string[]): SearchMatch[] {
-//   let matches: SearchMatch[] = []
-//   for (const term of terms) {
-//     matches = [
-//       ...matches,
-//       ...[...text.matchAll(new RegExp(escapeRegex(term), 'gi'))]
-//         .map(o => ({ match: o[0], index: o.index }))
-//         .filter(isSearchMatch),
-//     ]
-//   }
-//   return matches
-//   // matches.sort((a, b) => b.match.length - a.match.length)
-//   // return uniqBy(matches, 'index')
-// }
-
 export function stringsToRegex(strings: string[]): RegExp {
   return new RegExp(strings.map(escapeRegex).join('|'), 'gi')
 }
@@ -93,3 +78,7 @@ export function extractHeadingsFromCache(
     cache.headings?.filter(h => h.level === level).map(h => h.heading) ?? []
   )
 }
+
+export function loopIndex(index: number, nbItems: number): number {
+  return (index + nbItems) % nbItems
+}