obsidian-plugin/maradotwebp_obsidian-avatar
1
0
Fork 0
mirror of https://github.com/maradotwebp/obsidian-avatar.git synced 2026-07-22 07:30:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

automatically place user in preview mode for the md description

Browse source
This commit is contained in:
froehlichA 2023-03-18 19:08:34 +01:00
parent 7168bad863
commit d92eebfb0e
1 changed files with 31 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/components/AvatarView.svelte
View file

@ -25,6 +25,9 @@
let initialDescription = state?.description;
let hoverOnImage: boolean = false;
let editMode: boolean = false;
let descriptionEditEl: HTMLElement;
let descriptionPreviewEl: HTMLElement;
$: inSourceMode = app ? isSourceMode(app) : false;
$: fallbackImage = `https://ui-avatars.com/api/?name=${ctx?.sourcePath.split("/").at(-1) ?? "::"}&size=240`;
@ -34,11 +37,22 @@
return view?.getMode() === "source";
}
function updateDescription() {
function enterEditMode() {
if(inSourceMode && !editMode) {
editMode = true;
queueMicrotask(() => {
descriptionEditEl.focus();
});
}
}
function updateDescription(evt: MouseEvent) {
editMode = false;
initialDescription = state.description;
setState((fm) => {
fm.description = state.description;
});
evt.stopPropagation();
}
function updateImage() {
@ -59,9 +73,8 @@
return src;
}
let mdEL: HTMLElement;
$: if(mdEL && plugin && state?.description) {
MarkdownRenderer.renderMarkdown(state.description, mdEL, "", plugin);
$: if(descriptionPreviewEl && plugin && state && state?.description) {
MarkdownRenderer.renderMarkdown(state.description, descriptionPreviewEl, "", plugin);
}
</script>
@ -79,13 +92,20 @@
</Fab>
{/if}
</div>
<div class="description">
{#if inSourceMode}
<span contenteditable="true" data-placeholder="Write your story..." bind:textContent={state.description}></span>
{:else}
<span data-placeholder="Write your story..." bind:this={mdEL}></span>
{/if}
{#if (initialDescription !== "" || state?.description !== "") && state?.description !== initialDescription}
<div class="description" on:click={enterEditMode}>
<span
bind:this={descriptionEditEl}
hidden={!editMode}
contenteditable="true"
data-placeholder="Write your story..."
bind:textContent={state.description}
></span>
<span
hidden={editMode}
bind:this={descriptionPreviewEl}
data-placeholder="Write your story..."
></span>
{#if editMode}
<Fab on:click={updateDescription}>
<ObsidianIcon id="save"></ObsidianIcon>
</Fab>