chore: fix code formatting

README.md

@@ -5,7 +5,7 @@ This is a plugin for Obsidian (https://obsidian.md).
 Obsidian Dataview Autocomplete enhances the functionality of the popular [Dataview plugin](https://github.com/blacksmithgu/obsidian-dataview)
 by providing autocomplete suggestions for metadata fields in the editor. This makes it easy to reuse existing fields and reduces typing errors.
 
-![Demo](./assets/demo.gif)
+<img src="./assets/demo.gif" alt="Demo" width="400" >
 
 ## Features
 

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "dataview-autocompletion",
   "name": "Dataview Autocompletion",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "minAppVersion": "0.15.0",
   "description": "Adds autocompletion to Dataview metadata fields",
   "author": "Daniel Bauer",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-dataview-autocompletion",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "This is a plugin for Obsidian that provides autocompletion for Dataview metadata fields",
   "main": "main.js",
   "scripts": {

src/DataviewSuggester.ts

@@ -14,7 +14,6 @@ import { getTriggerText } from "./trigger";
 import uFuzzy from "@leeoniya/ufuzzy";
 import { getAPI, DataviewApi } from "obsidian-dataview";
 import DataviewAutocompletePlugin from "./main";
-import { parentPort } from "worker_threads";
 
 export class DataviewSuggester extends EditorSuggest<String> {
     plugin: DataviewAutocompletePlugin;
@@ -71,52 +70,57 @@ export class DataviewSuggester extends EditorSuggest<String> {
         return [];
     }
 
-    renderSuggestion(value: string, el: HTMLElement): void {
-        // Split the value into parts based on the <mark> tags and their content
-        const parts = value.split(/(<mark>.*?<\/mark>)/g);
+    renderMarkdownSuggestion(value: string, el: HTMLElement): void {
+        // render markdown preview of inline dataview metadata field
+        let suggestionText = this.context!.editor.getLine(this.context!.start.line).slice(
+            this.context!.start.ch - 1,
+            this.context!.start.ch,
+        )!;
+        suggestionText += value.replace(/<mark>(.*?)<\/mark>/g, "$1");
+        suggestionText += suggestionText.startsWith("(") ? ")" : "]";
 
-        const container = el.createDiv("dataview-suggestion-content");
-        const titleDiv = container.createDiv("dataview-suggestion-title");
-
-        parts.forEach((textPart) => {
-            if (textPart.startsWith("<mark>") && textPart.endsWith("</mark>")) {
-                const text = textPart.slice(6, -7); // Remove <mark> and </mark>
-                titleDiv.createEl("span", { text, cls: "dataview-suggestion-highlight" });
-            } else {
-                titleDiv.appendText(textPart);
-            }
-        });
-
-        if (value.indexOf("[[") !== -1 || value.indexOf("]]") !== -1 || value.indexOf("](") !== -1) {
-            const noteDiv = container.createDiv("dataview-suggestion-note");
-            let suggestionText = "";
-            parts.forEach((textPart) => {
-                if (textPart.startsWith("<mark>") && textPart.endsWith("</mark>")) {
-                    const text = textPart.slice(6, -7); // Remove <mark> and </mark>
-                    suggestionText += text;
-                } else {
-                    suggestionText += textPart;
-                }
-            });
         MarkdownRenderer.render(
             this.app,
             htmlToMarkdown(suggestionText),
-                noteDiv,
+            el,
             this.context!.file.path,
             this.app.workspace.getActiveViewOfType(MarkdownView)!,
         );
     }
+
+    renderSourceSuggestion(value: string, el: HTMLElement): void {
+        // render source text with highlights
+        // replaces <mark>...</mark> with <span>...</span>
+        const parts = value.split(/(<mark>.*?<\/mark>)/g);
+        parts.forEach((textPart) => {
+            if (textPart.startsWith("<mark>") && textPart.endsWith("</mark>")) {
+                const text = textPart.slice(6, -7); // Remove <mark> and </mark>
+                el.createEl("span", { text, cls: "dataview-suggestion-highlight" });
+            } else {
+                el.appendText(textPart);
+            }
+        });
+    }
+
+    renderSuggestion(value: string, el: HTMLElement): void {
+        const container = el.createDiv("dataview-suggestion-content");
+        const titleDiv = container.createDiv("dataview-suggestion-title");
+        const noteDiv = container.createDiv("dataview-suggestion-note");
+
+        this.renderMarkdownSuggestion(value, titleDiv);
+        this.renderSourceSuggestion(value, noteDiv);
     }
 
     selectSuggestion(value: string, evt: MouseEvent | KeyboardEvent): void {
-        const { editor, start, end } = this.context!;
         // remove marks from selection
         value = value.replace(/<mark>(.*?)<\/mark>/g, "$1");
+
+        const { editor, start, end } = this.context!;
         editor.replaceRange(value, start, end);
 
         const newCursorPos = {
-            line: end.line + 1,
-            ch: 0,
+            line: end.line,
+            ch: start.ch + value.length + 1,
         };
         editor.setCursor(newCursorPos);
     }

styles.css

@@ -10,7 +10,7 @@ div.dataview-suggestion-title {
   overflow-wrap: break-word;
 }
 
-div.dataview-suggestion-note p {
+div.dataview-suggestion-title p {
   margin-block: 0px;
 }
 
@@ -20,6 +20,7 @@ div.dataview-suggestion-note{
   width: 100%;
   flex-basis: 100%;
   overflow-wrap: break-word;
+  padding-left: 8px;
 }
 
 span.dataview-suggestion-highlight {