feat(#245): in results list, show where an image/pdf is embedded

* Add an index of embeds for reference in results

* Notes embedding images are now shown in results

* Updated dependencies

* Correctly referencing all embeds

* Updated docs

* Basic embedded feature ok

src/components/ResultItemContainer.svelte

@@ -4,11 +4,12 @@
   export let id: string
   export let selected = false
   export let glyph = false
+  export let cssClass = ''
 </script>
 
 <div
   data-result-id={id}
-  class="suggestion-item omnisearch-result"
+  class="suggestion-item omnisearch-result {cssClass}"
   class:is-selected={selected}
   on:mousemove
   on:click

src/components/ResultItemVault.svelte

@@ -3,7 +3,8 @@
   import type { ResultNote } from '../globals'
   import {
     getExtension,
-    isFileCanvas, isFileExcalidraw,
+    isFileCanvas,
+    isFileExcalidraw,
     isFileImage,
     isFilePDF,
     pathWithoutFilename,
@@ -11,6 +12,7 @@
   import ResultItemContainer from './ResultItemContainer.svelte'
   import { TFile, setIcon } from 'obsidian'
   import type OmnisearchPlugin from '../main'
+  import { SvelteComponent } from 'svelte'
 
   export let selected = false
   export let note: ResultNote
@@ -21,6 +23,7 @@
   let notePath = ''
   let elFolderPathIcon: HTMLElement
   let elFilePathIcon: HTMLElement
+  let elEmbedIcon: HTMLElement
 
   $: {
     imagePath = null
@@ -32,8 +35,14 @@
     }
   }
   $: matchesTitle = plugin.textProcessor.getMatches(title, note.foundWords)
-  $: matchesNotePath = plugin.textProcessor.getMatches(notePath, note.foundWords)
-  $: cleanedContent = plugin.textProcessor.makeExcerpt(note.content, note.matches[0]?.offset ?? -1)
+  $: matchesNotePath = plugin.textProcessor.getMatches(
+    notePath,
+    note.foundWords
+  )
+  $: cleanedContent = plugin.textProcessor.makeExcerpt(
+    note.content,
+    note.matches[0]?.offset ?? -1
+  )
   $: glyph = false //cacheManager.getLiveDocument(note.path)?.doesNotExist
   $: {
     title = note.displayTitle || note.basename
@@ -46,23 +55,24 @@
     if (elFilePathIcon) {
       if (isFileImage(note.path)) {
         setIcon(elFilePathIcon, 'image')
-      }
-      else if (isFilePDF(note.path)) {
+      } else if (isFilePDF(note.path)) {
         setIcon(elFilePathIcon, 'file-text')
-      }
-      else if (isFileCanvas(note.path) || isFileExcalidraw(note.path)) {
+      } else if (isFileCanvas(note.path) || isFileExcalidraw(note.path)) {
         setIcon(elFilePathIcon, 'layout-dashboard')
-      }
-      else {
+      } else {
         setIcon(elFilePathIcon, 'file')
       }
     }
+    if (elEmbedIcon) {
+      setIcon(elEmbedIcon, 'corner-down-right')
+    }
   }
 </script>
 
 <ResultItemContainer
   glyph="{glyph}"
   id="{note.path}"
+  cssClass=" {note.isEmbed ? 'omnisearch-result__embed' : ''}"
   on:auxclick
   on:click
   on:mousemove
@@ -70,8 +80,14 @@
   <div>
     <div class="omnisearch-result__title-container">
       <span class="omnisearch-result__title">
-        <span bind:this="{elFilePathIcon}"></span>
-        <span>{@html plugin.textProcessor.highlightText(title, matchesTitle)}</span>
+        {#if note.isEmbed}
+          <span bind:this="{elEmbedIcon}" title="The document above is embedded in this note"></span>
+        {:else}
+          <span bind:this="{elFilePathIcon}"></span>
+        {/if}
+        <span>
+          {@html plugin.textProcessor.highlightText(title, matchesTitle)}
+        </span>
         <span class="omnisearch-result__extension">
           .{getExtension(note.path)}
         </span>
@@ -91,23 +107,33 @@
     {#if notePath}
       <div class="omnisearch-result__folder-path">
         <span bind:this="{elFolderPathIcon}"></span>
-        <span>{@html plugin.textProcessor.highlightText(notePath, matchesNotePath)}</span>
+        <span>
+          {@html plugin.textProcessor.highlightText(
+            notePath,
+            matchesNotePath
+          )}</span>
       </div>
     {/if}
 
-    <div style="display: flex; flex-direction: row;">
-      {#if $showExcerpt}
-        <div class="omnisearch-result__body">
-          {@html plugin.textProcessor.highlightText(cleanedContent, note.matches)}
-        </div>
-      {/if}
+    <!-- Do not display the excerpt for embedding references -->
+    {#if !note.isEmbed}
+      <div style="display: flex; flex-direction: row;">
+        {#if $showExcerpt}
+          <div class="omnisearch-result__body">
+            {@html plugin.textProcessor.highlightText(
+              cleanedContent,
+              note.matches
+            )}
+          </div>
+        {/if}
 
-      <!-- Image -->
-      {#if imagePath}
-        <div class="omnisearch-result__image-container">
-          <img style="width: 100px" src="{imagePath}" alt="" />
-        </div>
-      {/if}
-    </div>
+        <!-- Image -->
+        {#if imagePath}
+          <div class="omnisearch-result__image-container">
+            <img style="width: 100px" src="{imagePath}" alt="" />
+          </div>
+        {/if}
+      </div>
+    {/if}
   </div>
 </ResultItemContainer>