Skip to content

Commit

Permalink
Merge pull request #422 from chhoumann/md-choice-name
Browse files Browse the repository at this point in the history
feat: render markdown & HTML in choice names
  • Loading branch information
chhoumann authored Mar 17, 2023
2 parents fcd09ea + 21cfb8a commit 655e7ae
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 54 deletions.
108 changes: 56 additions & 52 deletions src/gui/choiceList/ChoiceListItem.svelte
Original file line number Diff line number Diff line change
@@ -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>
18 changes: 17 additions & 1 deletion src/gui/choiceList/MultiChoiceListItem.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down
8 changes: 7 additions & 1 deletion src/gui/suggesters/choiceSuggester.ts
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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;
}
Expand Down
24 changes: 24 additions & 0 deletions src/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

1 comment on commit 655e7ae

@vercel
Copy link

@vercel vercel bot commented on 655e7ae Mar 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

quickadd – ./

quickadd.obsidian.guide
quickadd-git-master-chrisbbh.vercel.app
quickadd-chrisbbh.vercel.app

Please sign in to comment.