Fixed layout, removed agressive highlighter and some console.logs

assets/styles.css

@@ -24,3 +24,6 @@
 
   color: var(--text-muted);
 }
+
+.omnisearch-highlight {
+}

src/CmpModalFile.svelte

@@ -15,8 +15,8 @@ $: {
     groupedOffsets = groups.map((group) =>
       Math.round((group.first()!.offset + group.last()!.offset) / 2)
     )
-    console.log(groups)
-    console.log(groupedOffsets)
+    // console.log(groups)
+    // console.log(groupedOffsets)
   }
 }
 

src/CmpModalVault.svelte

@@ -3,15 +3,7 @@ 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, selectedNote } from "./stores"
 
 async function createOrOpenNote(item: ResultNote): Promise<void> {
   try {
@@ -60,23 +52,23 @@ function onInputShiftEnter(event: CustomEvent<ResultNote>): void {
       <CmpNoteResult selected={result === $selectedNote} note={result} />
     {/each}
   </div>
-  <div class="prompt-instructions">
-    <div class="prompt-instruction">
-      <span class="prompt-instruction-command">↑↓</span><span>to navigate</span>
-    </div>
-    <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>
+</div>
+<div class="prompt-instructions">
+  <div class="prompt-instruction">
+    <span class="prompt-instruction-command">↑↓</span><span>to navigate</span>
+  </div>
+  <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>
 </div>

src/globals.ts

@@ -6,6 +6,8 @@ export const regexYaml = /^---\s*\n(.*?)\n?^---\s?/ms
 export const excerptBefore = 100
 export const excerptAfter = 180
 
+export const highlightClass = 'suggestion-highlight omnisearch-highlight'
+
 export type SearchNote = {
   path: string
   basename: string

src/search.ts

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

src/utils.ts

@@ -1,5 +1,6 @@
 import type { CachedMetadata } from 'obsidian'
 import {
+  highlightClass,
   isSearchMatch,
   regexLineSplit,
   regexYaml,
@@ -7,7 +8,7 @@ import {
 import type { SearchMatch } from './globals'
 
 export function highlighter(str: string): string {
-  return '<span class="search-result-file-matched-text">' + str + '</span>'
+  return `<span class="${highlightClass}">${str}</span>`
 }
 
 export function escapeHTML(html: string): string {