In-file highlighting, tweaked grouping

src/CmpInfileResult.svelte

@@ -1,22 +1,24 @@
 <script lang="ts">
-import { surroundLen, type IndexedNote, type SearchMatch } from "./globals"
+import {
+excerptAfter,
+excerptBefore,
+  type IndexedNote,
+  type ResultNote,
+  type SearchMatch,
+} from "./globals"
 import { indexedNotes, inFileSearch } from "./stores"
-import { escapeHTML } from "./utils";
+import { escapeHTML, highlighter, stringsToRegex } from "./utils"
 
-export let match: SearchMatch
+export let offset: number
+export let note: ResultNote
 
-let note: IndexedNote | null = null
+$: reg = stringsToRegex(note.foundWords)
-inFileSearch.subscribe((file) => {
-  if (file) {
-    note = indexedNotes.get(file.path) ?? null
-  }
-})
 
 function cleanContent(content: string): string {
-  const pos = match.offset ?? -1
+  const pos = offset ?? -1
   if (pos > -1) {
-    const from = Math.max(0, pos - surroundLen)
+    const from = Math.max(0, pos - excerptBefore)
-    const to = Math.min(content.length - 1, pos + surroundLen)
+    const to = Math.min(content.length - 1, pos + excerptAfter)
     content =
       (from > 0 ? "…" : "") +
       content.slice(from, to).trim() +
@@ -24,11 +26,10 @@ function cleanContent(content: string): string {
   }
   return escapeHTML(content)
 }
-
 </script>
 
 <div class="suggestion-item omnisearch-result">
   <div class="omnisearch-result__body">
-    {@html cleanContent(note?.content ?? '')}
+    {@html cleanContent(note?.content ?? "").replace(reg, highlighter)}
   </div>
 </div>

src/CmpModalFile.svelte

@@ -1,20 +1,24 @@
 <script lang="ts">
 import CmpInput from "./CmpInput.svelte"
 import CmpNoteInternalResult from "./CmpInfileResult.svelte"
-import { surroundLen, type ResultNote, type SearchMatch } from "./globals"
+import { excerptAfter, type ResultNote, type SearchMatch } from "./globals"
 import { resultNotes } from "./stores"
-import type { SearchResult } from "minisearch"
-import { stringsToRegex } from "./utils"
 
-$: firstResult = $resultNotes[0]
+let matches: SearchMatch[] = []
-$: matches = firstResult?.matches ?? []
+let groupedOffsets: number[] = []
-$: groupedMatches = (() => {
+
+$: note = $resultNotes[0]
+$: {
+  if (note) {
+    matches = note.matches
     const groups = getGroups()
-  return groups.map((group) => ({
+    groupedOffsets = groups.map((group) =>
-    match: "",
+      Math.round((group.first()!.offset + group.last()!.offset) / 2)
-    offset: (group.first()!.offset + group.last()!.offset) / 2,
+    )
-  }))
+    console.log(groups)
-})()
+    console.log(groupedOffsets)
+  }
+}
 
 /**
  * Group together close
@@ -23,7 +27,7 @@ function getGroups(): SearchMatch[][] {
   const groups: SearchMatch[][] = []
   let lastOffset = -1
   while (true) {
-    const group = getGroupedMatches(matches, lastOffset, surroundLen)
+    const group = getGroupedMatches(matches, lastOffset, excerptAfter)
     if (!group.length) break
     lastOffset = group.last()!.offset
     groups.push(group)
@@ -36,7 +40,7 @@ function getGroupedMatches(
   offsetFrom: number,
   maxLen: number
 ): SearchMatch[] {
-  const first = matches.find((m) => m.offset >= offsetFrom)
+  const first = matches.find((m) => m.offset > offsetFrom)
   if (!first) return []
   return matches.filter(
     (m) => m.offset > offsetFrom && m.offset <= first.offset + maxLen
@@ -55,14 +59,15 @@ function onInputEnter(event: CustomEvent<ResultNote>): void {
 
 <div class="modal-content">
   <div class="prompt-results">
-    {#if groupedMatches.length}
+    {#if groupedOffsets.length && note}
-      {#each groupedMatches as match}
+      {#each groupedOffsets as offset}
-        <CmpNoteInternalResult {match} />
+        <CmpNoteInternalResult {offset} {note} />
       {/each}
     {:else}
       We found 0 result for your search here.
     {/if}
   </div>
+</div>
 <div class="prompt-instructions">
   <div class="prompt-instruction">
     <span class="prompt-instruction-command">↑↓</span><span>to navigate</span>
@@ -82,4 +87,3 @@ function onInputEnter(event: CustomEvent<ResultNote>): void {
     <span class="prompt-instruction-command">esc</span><span>to dismiss</span>
   </div>
 </div>
-</div>

src/CmpNoteResult.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { surroundLen, type ResultNote } from "./globals"
+import {  excerptAfter, excerptBefore, type ResultNote } from "./globals"
 import { openNote } from "./notes"
 import { getMatches } from "./search";
 import { modal, selectedNote } from "./stores"
@@ -20,8 +20,8 @@ export let note: ResultNote
 function cleanContent(content: string): string {
   const pos = note.matches[0]?.offset ?? -1
   if (pos > -1) {
-    const from = Math.max(0, pos - surroundLen)
+    const from = Math.max(0, pos - excerptBefore)
-    const to = Math.min(content.length - 1, pos + surroundLen)
+    const to = Math.min(content.length - 1, pos + excerptAfter)
     content =
       (from > 0 ? "…" : "") +
       content.slice(from, to).trim() +

src/globals.ts

@@ -3,7 +3,8 @@ export const regexWikilink = /^!?\[\[(?<name>.+?)(\|(?<alias>.+?))?\]\]/
 export const regexLineSplit = /\r?\n|\r|((\.|\?|!)( |\r?\n|\r))/g
 export const regexYaml = /^---\s*\n(.*?)\n?^---\s?/ms
 
-export const surroundLen = 180
+export const excerptBefore = 100
+export const excerptAfter = 180
 
 export type SearchNote = {
   path: string

src/search.ts

@@ -90,6 +90,8 @@ function subscribeToQuery(): void {
     const results = get(singleFileSearch)
       ? getSuggestions(q, { singleFile: get(singleFileSearch) })
       : getSuggestions(q)
+
+    console.log('Search results')
     console.log(results)
 
     // Save the results in the store