add highlighting and suggestion note

src/DataviewSuggester.ts

@@ -5,12 +5,16 @@ import {
     EditorSuggest,
     EditorSuggestContext,
     EditorSuggestTriggerInfo,
+    htmlToMarkdown,
+    MarkdownRenderer,
+    MarkdownView,
     TFile,
 } from "obsidian";
 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,16 +75,37 @@ export class DataviewSuggester extends EditorSuggest<String> {
         // Split the value into parts based on the <mark> tags and their content
         const parts = value.split(/(<mark>.*?<\/mark>)/g);
 
-        // We cannot use inner HTML; Create a span for each part
+        const container = el.createDiv("dataview-suggestion-content");
-        parts.forEach((part) => {
+        const titleDiv = container.createDiv("dataview-suggestion-title");
-            if (part.startsWith("<mark>") && part.endsWith("</mark>")) {
+
-                const text = part.slice(6, -7); // Remove <mark> and </mark>
+        parts.forEach((textPart) => {
-                el.createEl("span", { text, cls: "suggestion-highlight" });
+            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 {
-                // For normal text, create a text node or <span>
+                titleDiv.appendText(textPart);
-                el.createEl("span", { text: part });
             }
         });
+
+        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,
+                this.context!.file.path,
+                this.app.workspace.getActiveViewOfType(MarkdownView)!,
+            );
+        }
     }
 
     selectSuggestion(value: string, evt: MouseEvent | KeyboardEvent): void {

styles.css

@@ -1,3 +1,28 @@
-span.suggestion-highlight {
+div.dataview-suggestion-content {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-inline-end: auto;
+}
+
+div.dataview-suggestion-title {
+  overflow-wrap: break-word;
+}
+
+div.dataview-suggestion-note p {
+  margin-block: 0px;
+}
+
+div.dataview-suggestion-note{
+  font-size: 0.8em;
+  color: var(--text-muted);
+  width: 100%;
+  flex-basis: 100%;
+  overflow-wrap: break-word;
+}
+
+span.dataview-suggestion-highlight {
   font-weight: bold;
 }
+