feat: render suggestions similar to dataview render

src/DataviewSuggester.ts

@@ -70,52 +70,54 @@ export class DataviewSuggester extends EditorSuggest<String> {
         return [];
     }
 
-    renderSuggestion(value: string, el: HTMLElement): void {
+    renderMarkdownSuggestion(value: string, el: HTMLElement): void {
-        // Split the value into parts based on the <mark> tags and their content
+        // 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("(") ? ")" : "]"
+        
+        MarkdownRenderer.render(
+            this.app,
+            htmlToMarkdown(suggestionText),
+            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);
-
-        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" });
+                el.createEl("span", { text, cls: "dataview-suggestion-highlight" });
             } else {
-                titleDiv.appendText(textPart);
+                el.appendText(textPart);
             }
         });
+    }
 
-        if (value.indexOf("[[") !== -1 || value.indexOf("]]") !== -1 || value.indexOf("](") !== -1) {
+    renderSuggestion(value: string, el: HTMLElement): void {
-            const noteDiv = container.createDiv("dataview-suggestion-note");
+        const container = el.createDiv("dataview-suggestion-content");
-            let suggestionText = "";
+        const titleDiv = container.createDiv("dataview-suggestion-title");
-            parts.forEach((textPart) => {
+        const noteDiv = container.createDiv("dataview-suggestion-note");
-                if (textPart.startsWith("<mark>") && textPart.endsWith("</mark>")) {
+
-                    const text = textPart.slice(6, -7); // Remove <mark> and </mark>
+        this.renderMarkdownSuggestion(value, titleDiv);
-                    suggestionText += text;
+        this.renderSourceSuggestion(value, noteDiv);
-                } else {
-                    suggestionText += textPart;
-                }
-            });
-            MarkdownRenderer.render(
-                this.app,
-                htmlToMarkdown(suggestionText),
-                noteDiv,
-                this.context!.file.path,
-                this.app.workspace.getActiveViewOfType(MarkdownView)!,
-            );
-        }
     }
 
     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,
+            line: end.line,
-            ch: 0,
+            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 {