fix: Improves appearance of Editor suggester

javalent · May 23, 2024 · 7652ed0 · 7652ed0
1 parent 72c2bc3
commit 7652ed0
Showing 1 changed file with 38 additions and 19 deletions.
diff --git a/src/suggest/suggest.ts b/src/suggest/suggest.ts
@@ -1,35 +1,48 @@
-import {Editor, EditorPosition, EditorSuggest, EditorSuggestContext, EditorSuggestTriggerInfo} from "obsidian";
-import {Admonition} from "src/@types";
+import {
+    Editor,
+    EditorPosition,
+    EditorSuggest,
+    EditorSuggestContext,
+    EditorSuggestTriggerInfo
+} from "obsidian";
+import { Admonition } from "src/@types";
 import ObsidianAdmonition from "src/main";
 
-abstract class AdmonitionOrCalloutSuggester extends EditorSuggest<[string, Admonition]> {
+abstract class AdmonitionOrCalloutSuggester extends EditorSuggest<
+    [string, Admonition]
+> {
     constructor(public plugin: ObsidianAdmonition) {
         super(plugin.app);
     }
     getSuggestions(ctx: EditorSuggestContext) {
         if (!ctx.query?.length) return Object.entries(this.plugin.admonitions);
 
         return Object.entries(this.plugin.admonitions).filter((p) =>
-            p[0].toLowerCase().contains(ctx.query.toLowerCase()));
+            p[0].toLowerCase().contains(ctx.query.toLowerCase())
+        );
     }
-    renderSuggestion([text, item]: [text: string, item: Admonition], el: HTMLElement) {
-        el.addClass("admonition-suggester-item")
-        el.style.setProperty("--callout-color", item.color)
-        el.createSpan({ text })
-        const iconDiv = createDiv("suggestion-flair admonition-suggester-icon");
+    renderSuggestion(
+        [text, item]: [text: string, item: Admonition],
+        el: HTMLElement
+    ) {
+        el.addClasses(["admonition-suggester-item", "mod-complex"]);
+        el.style.setProperty("--callout-color", item.color);
+        el.createSpan({ text });
+        const iconDiv = el.createDiv("suggestion-aux").createDiv({
+            cls: "suggestion-flair",
+            attr: {
+                style: `color: rgb(var(--callout-color))`
+            }
+        });
         let iconEl = this.plugin.iconManager.getIconNode(item.icon);
         // Unpack the icon if it's an Obsidian one, as they're wrapped with an extra <div>
         if (iconEl instanceof HTMLDivElement && iconEl.childElementCount == 1)
-            iconEl = iconEl.firstElementChild
+            iconEl = iconEl.firstElementChild;
         else if (iconEl !== null) {
-            iconEl.removeClass("svg-inline--fa")
-            iconEl.addClass("svg-icon")
-            iconEl.addClass("svg-icon")
+            iconEl.removeClass("svg-inline--fa");
+            iconEl.addClass("svg-icon");
         }
-        iconDiv
-            .appendChild(iconEl ?? createDiv())
-
-        el.prepend(iconDiv);
+        iconDiv.appendChild(iconEl ?? createDiv());
     }
     onTrigger(
         cursor: EditorPosition,
@@ -70,7 +83,10 @@ abstract class AdmonitionOrCalloutSuggester extends EditorSuggest<[string, Admon
 
 export class CalloutSuggest extends AdmonitionOrCalloutSuggester {
     offset = 4;
-    selectSuggestion([text]: [text: string, item: Admonition], evt: MouseEvent | KeyboardEvent): void {
+    selectSuggestion(
+        [text]: [text: string, item: Admonition],
+        evt: MouseEvent | KeyboardEvent
+    ): void {
         if (!this.context) return;
 
         const line = this.context.editor
@@ -109,7 +125,10 @@ export class CalloutSuggest extends AdmonitionOrCalloutSuggester {
 }
 export class AdmonitionSuggest extends AdmonitionOrCalloutSuggester {
     offset = 6;
-    selectSuggestion([text]: [text: string, item: Admonition], evt: MouseEvent | KeyboardEvent): void {
+    selectSuggestion(
+        [text]: [text: string, item: Admonition],
+        evt: MouseEvent | KeyboardEvent
+    ): void {
         if (!this.context) return;
 
         this.context.editor.replaceRange(