diff --git a/src/suggest/suggest.ts b/src/suggest/suggest.ts index 55c4a07..3b5af08 100644 --- a/src/suggest/suggest.ts +++ b/src/suggest/suggest.ts @@ -1,8 +1,16 @@ -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); } @@ -10,26 +18,31 @@ abstract class AdmonitionOrCalloutSuggester extends EditorSuggest<[string, Admon 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