feat: render markdown & HTML in choice names

re #415
chhoumann · Mar 17, 2023 · 21cfb8a · 21cfb8a
1 parent fcd09ea
commit 21cfb8a
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 54 deletions.
diff --git a/src/gui/choiceList/ChoiceListItem.svelte b/src/gui/choiceList/ChoiceListItem.svelte
@@ -1,58 +1,62 @@
 <script lang="ts">
-    import IChoice from "../../types/choices/IChoice";
-    import RightButtons from "./ChoiceItemRightButtons.svelte";
-    import {createEventDispatcher} from "svelte";
-
-    export let choice: IChoice;
-    export let dragDisabled: boolean;
-    let showConfigureButton: boolean = true;
-    const dispatcher = createEventDispatcher();
-
-    function deleteChoice() {
-        dispatcher('deleteChoice', {choice});
-    }
-
-    function configureChoice() {
-        dispatcher('configureChoice', {choice});
-    }
-
-    function toggleCommandForChoice() {
-        dispatcher('toggleCommand', {choice});
-    }
-
-    function duplicateChoice() {
-        dispatcher('duplicateChoice', {choice});
-    }
+	import IChoice from "../../types/choices/IChoice";
+	import RightButtons from "./ChoiceItemRightButtons.svelte";
+	import { createEventDispatcher } from "svelte";
+	import { Component, htmlToMarkdown, MarkdownRenderer } from "obsidian";
+
+	export let choice: IChoice;
+	export let dragDisabled: boolean;
+	let showConfigureButton: boolean = true;
+	const dispatcher = createEventDispatcher();
+
+	function deleteChoice() {
+		dispatcher("deleteChoice", { choice });
+	}
+
+	function configureChoice() {
+		dispatcher("configureChoice", { choice });
+	}
+
+	function toggleCommandForChoice() {
+		dispatcher("toggleCommand", { choice });
+	}
+
+	function duplicateChoice() {
+		dispatcher("duplicateChoice", { choice });
+	}
+
+	let nameElement: HTMLSpanElement;
+
+	$: {
+		if (nameElement) {
+			nameElement.innerHTML = "";
+			const nameHTML = htmlToMarkdown(choice.name);
+			MarkdownRenderer.renderMarkdown(
+				nameHTML,
+				nameElement,
+				"/",
+				null as unknown as Component
+			);
+		}
+	}
 </script>
 
 <div class="choiceListItem">
-    <span class="choiceListItemName">{choice.name}</span>
-
-    <RightButtons
-            on:mousedown
-            on:touchstart
-            on:deleteChoice={deleteChoice}
-            on:configureChoice={configureChoice}
-            on:toggleCommand={toggleCommandForChoice}
-            on:duplicateChoice={duplicateChoice}
-            bind:choiceName={choice.name}
-            bind:commandEnabled={choice.command}
-            bind:showConfigureButton
-            bind:dragDisabled
-            showDuplicateButton={true}
-    />
+	<span class="choiceListItemName" bind:this={nameElement} />
+
+	<RightButtons
+		on:mousedown
+		on:touchstart
+		on:deleteChoice={deleteChoice}
+		on:configureChoice={configureChoice}
+		on:toggleCommand={toggleCommandForChoice}
+		on:duplicateChoice={duplicateChoice}
+		bind:choiceName={choice.name}
+		bind:commandEnabled={choice.command}
+		bind:showConfigureButton
+		bind:dragDisabled
+		showDuplicateButton={true}
+	/>
 </div>
 
-<style>
-    .choiceListItem {
-        display: flex;
-        font-size: 16px;
-        align-items: center;
-        margin: 12px 0 0 0;
-        transition: 1000ms ease-in-out;
-    }
-
-    .choiceListItemName {
-        flex: 1 0 0;
-    }
-</style>
+<style></style>
diff --git a/src/gui/choiceList/MultiChoiceListItem.svelte b/src/gui/choiceList/MultiChoiceListItem.svelte
@@ -5,6 +5,7 @@
     import IMultiChoice from "../../types/choices/IMultiChoice";
     import RightButtons from "./ChoiceItemRightButtons.svelte";
     import {createEventDispatcher} from "svelte";
+	import { Component, htmlToMarkdown, MarkdownRenderer } from "obsidian";
 
     export let choice: IMultiChoice;
     export let collapseId: string;
@@ -28,14 +29,29 @@
     function duplicateChoice() {
         dispatcher('duplicateChoice', {choice});
     }
+
+	let nameElement: HTMLSpanElement;
+
+	$: {
+		if (nameElement) {
+			nameElement.innerHTML = "";
+			const nameHTML = htmlToMarkdown(choice.name);
+			MarkdownRenderer.renderMarkdown(
+				nameHTML,
+				nameElement,
+				"/",
+				null as unknown as Component
+			);
+		}
+	}
 </script>
 
 <div>
     <div class="multiChoiceListItem">
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="multiChoiceListItemName clickable" on:click={() => choice.collapsed = !choice.collapsed}>
             <Icon data={faChevronDown} style={`transform:rotate(${choice.collapsed ? -180 : 0}deg)`} />
-            <span>{choice.name}</span>
+            <span class="choiceListItemName" bind:this={nameElement} />
         </div>
 
         <RightButtons

diff --git a/src/gui/suggesters/choiceSuggester.ts b/src/gui/suggesters/choiceSuggester.ts
@@ -1,4 +1,4 @@
-import { FuzzySuggestModal } from "obsidian";
+import { FuzzyMatch, FuzzySuggestModal, MarkdownRenderer } from "obsidian";
 import type IChoice from "../../types/choices/IChoice";
 import { ChoiceExecutor } from "../../choiceExecutor";
 import { ChoiceType } from "../../types/choices/choiceType";
@@ -30,6 +30,12 @@ export default class ChoiceSuggester extends FuzzySuggestModal<IChoice> {
 		if (choiceExecutor) this.choiceExecutor = choiceExecutor;
 	}
 
+	renderSuggestion(item: FuzzyMatch<IChoice>, el: HTMLElement): void {
+		el.empty();
+		MarkdownRenderer.renderMarkdown(item.item.name, el, '', this.plugin);
+		el.classList.add("quickadd-choice-suggestion");
+	}
+
 	getItemText(item: IChoice): string {
 		return item.name;
 	}

diff --git a/src/styles.css b/src/styles.css
@@ -214,3 +214,27 @@
 .qaFileSuggestionItem .suggestion-sub-text {
 	font-style: italic;
 }
+
+/*  ChoiceListItem.svelte */
+.choiceListItem {
+	display: flex;
+	font-size: 16px;
+	align-items: center;
+	margin: 12px 0 0 0;
+	transition: 1000ms ease-in-out;
+}
+
+
+.choiceListItemName {
+	flex: 1 0 0;
+}
+
+.choiceListItemName p {
+	margin: 0;
+	display: inline;
+}
+
+/* ChoiceSuggester.ts */
+.quickadd-choice-suggestion p {
+	margin: 0;
+}