fix #501

Author: mProjectsCode

exampleVault/note1.md

@@ -267,23 +267,31 @@ export abstract class InternalAPI<Plugin extends IPlugin> {
 		this.createSearchModal(new SuggesterSelectModal(this.plugin, selectCallback, inputField)).open();
 	}
 
-	openImageSuggesterModal(inputField: ImageSuggesterLikeIPF, selectCallback: (selected: string) => void): void {
+	openImageSuggesterModal(
+		inputField: ImageSuggesterLikeIPF,
+		canSelectNone: boolean,
+		selectCallback: (selected: string | undefined) => void,
+	): void {
 		this.createModal(
 			new SvelteModalContent((modal, targetEl) => {
 				return mount(ImageSuggesterModalComponent, {
 					target: targetEl,
 					props: {
 						plugin: this.plugin,
 						options: this.getImageSuggesterOptions(inputField),
-						onSelect: (item: string): void => {
+						canSelectNone: canSelectNone,
+						onSelect: (item: string | undefined): void => {
 							selectCallback(item);
 							modal.closeModal();
 						},
+						onCancel: () => {
+							modal.closeModal();
+						},
 					},
 				});
 			}),
 			{
-				title: 'Meta Bind image suggester',
+				title: 'Select an image from your Vault',
 				classes: ['mb-image-suggester-modal'],
 			},
 		).open();

exampleVault/note2.md

@@ -85,10 +85,12 @@
 <div class="mb-image-card-grid">
 	{#each value as image, i}
 		<div class="mb-image-card" oncontextmenu={e => openContextMenuForElement(e, i)} role="listitem">
-			<img class="mb-image-card-image" src={props.plugin.internal.imagePathToUri(image)} alt={image} />
-			<div class="mb-image-card-footer">
-				<span>{image}</span>
-			</div>
+			<img
+				class="mb-image-card-image"
+				src={props.plugin.internal.imagePathToUri(image)}
+				alt={image}
+				aria-label={image}
+			/>
 		</div>
 	{/each}
 </div>

packages/core/src/api/InternalAPI.ts

@@ -37,8 +37,10 @@ export class ImageListSuggesterIPF extends AbstractInputField<MBLiteral[], strin
 	}
 
 	openModal(): void {
-		this.mountable.plugin.internal.openImageSuggesterModal(this, (selected: string) => {
-			this.svelteWrapper.getInstance()?.pushValue(selected);
+		this.mountable.plugin.internal.openImageSuggesterModal(this, false, (selected: string | undefined) => {
+			if (selected !== undefined) {
+				this.svelteWrapper.getInstance()?.pushValue(selected);
+			}
 		});
 	}
 }

packages/core/src/fields/inputFields/fields/ImageListSuggester/ImageListSuggesterComponent.svelte

@@ -3,37 +3,58 @@
 	import type { InputFieldSvelteProps } from 'packages/core/src/fields/inputFields/InputFieldSvelteWrapper';
 	import Button from 'packages/core/src/utils/components/Button.svelte';
 	import Icon from 'packages/core/src/utils/components/Icon.svelte';
+	import type { ContextMenuItemDefinition } from 'packages/core/src/utils/IContextMenu';
 
-	const props: InputFieldSvelteProps<string> & {
+	const props: InputFieldSvelteProps<string | undefined> & {
 		showSuggester: () => void;
+		clear: () => void;
 	} = $props();
 
 	let value = $state(props.value);
 
-	export function setValue(v: string): void {
+	export function setValue(v: string | undefined): void {
 		value = v;
 	}
 
-	function openSuggester(): void {
-		props.showSuggester();
+	function showContextMenu(e: MouseEvent): void {
+		const menuActions: ContextMenuItemDefinition[] = [];
+
+		menuActions.push({
+			name: 'Edit',
+			icon: 'pencil',
+			onclick: () => {
+				props.showSuggester();
+			},
+		});
+
+		menuActions.push({
+			name: 'Remove',
+			icon: 'x',
+			warning: true,
+			onclick: () => props.clear(),
+		});
+
+		props.plugin.internal.createContextMenu(menuActions).showWithEvent(e);
 	}
 </script>
 
-<div class="mb-image-card">
-	{#if value}
+{#if value}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="mb-image-card" oncontextmenu={e => showContextMenu(e)}>
 		<img
 			class="mb-image-card-image"
 			src={props.plugin.internal.imagePathToUri(value)}
 			alt={value}
 			aria-label={value}
 		/>
-	{/if}
-	<Button
-		variant={ButtonStyleType.PLAIN}
-		onclick={openSuggester}
-		classes="mb-image-card-button"
-		tooltip="Change image"
-	>
-		<Icon iconName="pencil" plugin={props.plugin} />
-	</Button>
-</div>
+		<Button variant={ButtonStyleType.PLAIN} onclick={e => showContextMenu(e)} classes="mb-image-card-button">
+			<Icon iconName="ellipsis-vertical" plugin={props.plugin} />
+		</Button>
+	</div>
+{:else}
+	<div class="mb-image-empty">
+		<Button variant={ButtonStyleType.PLAIN} onclick={() => props.showSuggester()} tooltip="Select image">
+			No image selected. Click to select.
+		</Button>
+	</div>
+{/if}

packages/core/src/fields/inputFields/fields/ImageListSuggester/ImageListSuggesterIPF.ts

@@ -4,16 +4,16 @@ import type { InputFieldSvelteComponent } from 'packages/core/src/fields/inputFi
 import type { MBLiteral } from 'packages/core/src/utils/Literal';
 import { isLiteral, stringifyLiteral } from 'packages/core/src/utils/Literal';
 
-export class ImageSuggesterIPF extends AbstractInputField<MBLiteral, string> {
+export class ImageSuggesterIPF extends AbstractInputField<MBLiteral, string | undefined> {
 	protected filterValue(value: unknown): MBLiteral | undefined {
 		return isLiteral(value) ? value : undefined;
 	}
 
-	protected getFallbackDefaultValue(): string {
-		return '';
+	protected getFallbackDefaultValue(): string | undefined {
+		return undefined;
 	}
 
-	protected getSvelteComponent(): InputFieldSvelteComponent<string> {
+	protected getSvelteComponent(): InputFieldSvelteComponent<string | undefined> {
 		// @ts-ignore
 		return ImageSuggesterComponent;
 	}
@@ -29,11 +29,12 @@ export class ImageSuggesterIPF extends AbstractInputField<MBLiteral, string> {
 	protected getMountArgs(): Record<string, unknown> {
 		return {
 			showSuggester: () => this.openModal(),
+			clear: () => this.setInternalValue(undefined),
 		};
 	}
 
 	openModal(): void {
-		this.mountable.plugin.internal.openImageSuggesterModal(this, (selected: string) =>
+		this.mountable.plugin.internal.openImageSuggesterModal(this, true, (selected: string | undefined) =>
 			this.setInternalValue(selected),
 		);
 	}

packages/core/src/fields/inputFields/fields/ImageSuggester/ImageSuggesterComponent.svelte

@@ -1,16 +1,23 @@
 <script lang="ts">
-	import ImageSuggesterCard from 'packages/core/src/fields/inputFields/fields/ImageSuggester/ImageSuggesterCard.svelte';
+	import ImageSuggesterCard from 'packages/core/src/modals/modalContents/ImageSuggesterModalCard.svelte';
 	import type { SuggesterOption } from 'packages/core/src/fields/inputFields/fields/Suggester/SuggesterHelper';
 	import type { IPlugin } from 'packages/core/src/IPlugin';
+	import Button from '../../utils/components/Button.svelte';
+	import { ButtonStyleType } from '../../config/ButtonConfig';
+	import ModalButtonGroup from '../../utils/components/ModalButtonGroup.svelte';
 
 	const {
 		plugin,
 		options,
+		canSelectNone,
 		onSelect,
+		onCancel,
 	}: {
 		plugin: IPlugin;
 		options: SuggesterOption<string>[];
-		onSelect: (item: string) => void;
+		canSelectNone: boolean;
+		onSelect: (item: string | undefined) => void;
+		onCancel: () => void;
 	} = $props();
 
 	let search = $state('');
@@ -27,11 +34,18 @@
 	});
 </script>
 
-<div class="mb-image-search-container">
+<div class="mb-image-modal-header">
 	<input type="text" bind:value={search} placeholder="Search images..." />
 </div>
 <div class="mb-image-card-grid">
 	{#each filteredOptions as option}
 		<ImageSuggesterCard plugin={plugin} image={option.value} onSelect={onSelect}></ImageSuggesterCard>
 	{/each}
 </div>
+
+<ModalButtonGroup>
+	{#if canSelectNone}
+		<Button variant={ButtonStyleType.PRIMARY} onclick={() => onSelect(undefined)}>Select none</Button>
+	{/if}
+	<Button onclick={() => onCancel()}>Cancel</Button>
+</ModalButtonGroup>

packages/core/src/fields/inputFields/fields/ImageSuggester/ImageSuggesterIPF.ts

@@ -439,7 +439,7 @@ div.mb-view-wrapper {
 }
 
 /* Image */
-.mb-image-search-container {
+.mb-image-modal-header {
 	margin-bottom: var(--size-4-4);
 }
 
@@ -504,6 +504,12 @@ div.mb-view-wrapper {
 	width: 100%;
 }
 
+.mb-image-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
 /* Time Input */
 
 .mb-input-type-time {