fix #193

Author: mProjectsCode

exampleVault/View Fields/View Field.md

@@ -11,14 +11,13 @@ list:
 object:
   key: value
 file: Example Note with Embeds
-image: Other/Images/img_butterfly.webp
+image: Other/Images/subfolder/img_frozen_branch.jpg
 someInputValue: 1
 someComputedValue: 2
 images:
   - Other/Images/img_flower.webp
   - Other/Images/img_butterfly.webp
   - Other/Images/subfolder/img_frozen_branch.jpg
-  - Other/Images/img_drops.jpg
 ---
 
 `INPUT[number:number1]`
@@ -62,20 +61,10 @@ Self Loop Error: `VIEW[**{computed}**][text():computed]`
 INPUT[imageSuggester(optionQuery("Other/Images")):image]
 ```
 
-`VIEW[!\[\[{image}\]\]][text(renderMarkdown)]`
 `VIEW[{image}][image]`
 
 ```meta-bind
-INPUT[imageSuggester(optionQuery("Other/Images")):images[0]]
-```
-```meta-bind
-INPUT[imageSuggester(optionQuery("Other/Images")):images[1]]
-```
-```meta-bind
-INPUT[imageSuggester(optionQuery("Other/Images")):images[2]]
-```
-```meta-bind
-INPUT[imageSuggester(optionQuery("Other/Images")):images[3]]
+INPUT[imageListSuggester(optionQuery("Other/Images")):images]
 ```
 
 `VIEW[{images}][image]`

packages/core/src/api/InternalAPI.ts

@@ -1,6 +1,6 @@
 import { type DatePickerIPF } from 'packages/core/src/fields/inputFields/fields/DatePicker/DatePickerIPF';
-import { type ImageSuggesterIPF } from 'packages/core/src/fields/inputFields/fields/ImageSuggester/ImageSuggesterIPF';
 import {
+	type ImageSuggesterLikeIPF,
 	type SuggesterLikeIFP,
 	type SuggesterOption,
 } from 'packages/core/src/fields/inputFields/fields/Suggester/SuggesterHelper';
@@ -67,7 +67,7 @@ export abstract class InternalAPI<Plugin extends IPlugin> {
 	 *
 	 * @param inputField
 	 */
-	abstract getImageSuggesterOptions(inputField: ImageSuggesterIPF): SuggesterOption<string>[];
+	abstract getImageSuggesterOptions(inputField: ImageSuggesterLikeIPF): SuggesterOption<string>[];
 
 	/**
 	 * Get the options for the suggester input field.
@@ -248,7 +248,7 @@ export abstract class InternalAPI<Plugin extends IPlugin> {
 		this.createSearchModal(new SuggesterSelectModal(this.plugin, selectCallback, inputField)).open();
 	}
 
-	openImageSuggesterModal(inputField: ImageSuggesterIPF, selectCallback: (selected: string) => void): void {
+	openImageSuggesterModal(inputField: ImageSuggesterLikeIPF, selectCallback: (selected: string) => void): void {
 		this.createModal(
 			new SvelteModalContent((modal, targetEl) => {
 				return new ImageSuggesterModalComponent({

packages/core/src/config/FieldConfigs.ts

@@ -34,6 +34,7 @@ export enum InputFieldType {
 	LIST_SUGGESTER = 'listSuggester',
 	INLINE_LIST_SUGGESTER = 'inlineListSuggester',
 	INLINE_LIST = 'inlineList',
+	IMAGE_LIST_SUGGESTER = 'imageListSuggester',
 
 	INVALID = 'invalid',
 }
@@ -162,6 +163,11 @@ export const InputFieldConfigs: Record<InputFieldType, InputFieldConfig> = {
 		allowInBlock: true,
 		allowInline: true,
 	},
+	[InputFieldType.IMAGE_LIST_SUGGESTER]: {
+		type: InputFieldType.IMAGE_LIST_SUGGESTER,
+		allowInBlock: true,
+		allowInline: false,
+	},
 	[InputFieldType.INVALID]: {
 		type: InputFieldType.INVALID,
 		allowInBlock: false,
@@ -301,6 +307,7 @@ export const InputFieldArgumentConfigs: Record<InputFieldArgumentType, InputFiel
 			InputFieldType.INLINE_SELECT,
 			InputFieldType.LIST_SUGGESTER,
 			InputFieldType.INLINE_LIST_SUGGESTER,
+			InputFieldType.IMAGE_LIST_SUGGESTER,
 		],
 		values: [
 			[
@@ -332,6 +339,7 @@ export const InputFieldArgumentConfigs: Record<InputFieldArgumentType, InputFiel
 			InputFieldType.IMAGE_SUGGESTER,
 			InputFieldType.LIST_SUGGESTER,
 			InputFieldType.INLINE_LIST_SUGGESTER,
+			InputFieldType.IMAGE_LIST_SUGGESTER,
 		],
 		values: [
 			[

packages/core/src/fields/inputFields/InputFieldFactory.ts

@@ -27,6 +27,8 @@ import { TimeIPF } from 'packages/core/src/fields/inputFields/fields/Time/TimeIP
 import { ToggleIPF } from 'packages/core/src/fields/inputFields/fields/Toggle/ToggleIPF';
 import { DocsUtils } from 'packages/core/src/utils/DocsUtils';
 import { ErrorLevel, MetaBindParsingError } from 'packages/core/src/utils/errors/MetaBindErrors';
+import { expectType } from 'packages/core/src/utils/Utils';
+import { ImageListSuggesterIPF } from 'packages/core/src/fields/inputFields/fields/ImageListSuggester/ImageListSuggesterIPF';
 
 export type InputField =
 	| ToggleIPF
@@ -47,7 +49,8 @@ export type InputField =
 	| DateIPF
 	| TimeIPF
 	| InlineListSuggesterIPF
-	| InlineListIPF;
+	| InlineListIPF
+	| ImageListSuggesterIPF;
 
 export class InputFieldFactory {
 	plugin: IPlugin;
@@ -104,8 +107,12 @@ export class InputFieldFactory {
 			return new InlineListSuggesterIPF(base);
 		} else if (type === InputFieldType.INLINE_LIST) {
 			return new InlineListIPF(base);
+		} else if (type === InputFieldType.IMAGE_LIST_SUGGESTER) {
+			return new ImageListSuggesterIPF(base);
 		}
 
+		expectType<InputFieldType.INVALID>(type);
+
 		return undefined;
 	}
 

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

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import Icon from '../../../../utils/components/Icon.svelte';
+	import Button from '../../../../utils/components/Button.svelte';
+	import { IPlugin } from '../../../../IPlugin';
+	import { ContextMenuItemDefinition } from 'packages/core/src/utils/IContextMenu';
+	import { ButtonStyleType } from 'packages/core/src/config/ButtonConfig';
+
+	export let plugin: IPlugin;
+	export let value: string[];
+	export let showSuggester: () => void;
+	export let onValueChange: (value: string[]) => void;
+
+	export function setValue(v: string[]): void {
+		value = v;
+	}
+
+	export function addValue(v: string): void {
+		value.push(v);
+
+		value = value;
+	}
+
+	function remove(i: number) {
+		value.splice(i, 1);
+		// call with copy of array
+		onValueChange(value);
+		// tell svelte to update
+		value = value;
+	}
+
+	function suggestKey(event: KeyboardEvent): void {
+		if (event.key === ' ') {
+			showSuggester();
+		}
+	}
+
+	function openContextMenuForElement(e: MouseEvent, index: number) {
+		const menuActions: ContextMenuItemDefinition[] = [];
+
+		if (index > 0) {
+			menuActions.push({
+				name: 'Move left',
+				icon: 'arrow-left',
+				onclick: () => {
+					const temp = value[index - 1];
+					value[index - 1] = value[index];
+					value[index] = temp;
+					onValueChange(value);
+				},
+			});
+		}
+
+		if (index < value.length - 1) {
+			menuActions.push({
+				name: 'Move right',
+				icon: 'arrow-right',
+				onclick: () => {
+					const temp = value[index + 1];
+					value[index + 1] = value[index];
+					value[index] = temp;
+					onValueChange(value);
+				},
+			});
+		}
+
+		menuActions.push({
+			name: 'Remove',
+			icon: 'x',
+			warning: true,
+			onclick: () => remove(index),
+		});
+
+		plugin.internal.createContextMenu(menuActions).showWithEvent(e);
+	}
+</script>
+
+<div class="mb-image-card-grid">
+	{#each value as image, i}
+		<div class="mb-image-card">
+			<img class="mb-image-card-image" src={plugin.internal.imagePathToUri(image)} alt={image} />
+			<div class="mb-image-card-footer">
+				<span>{image}</span>
+				<Button variant={ButtonStyleType.PLAIN} on:click={e => openContextMenuForElement(e, i)}>
+					<Icon iconName="more-vertical" plugin={plugin} />
+				</Button>
+			</div>
+		</div>
+	{/each}
+</div>
+<div class="mb-list-input">
+	<Button variant={ButtonStyleType.DEFAULT} on:click={() => showSuggester()}>Add new image</Button>
+</div>

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

@@ -0,0 +1,41 @@
+import { AbstractInputField } from 'packages/core/src/fields/inputFields/AbstractInputField';
+import ImageListSuggesterComponent from 'packages/core/src/fields/inputFields/fields/ImageListSuggester/ImageListSuggesterComponent.svelte';
+import { type MBLiteral, parseUnknownToLiteralArray, stringifyLiteral } from 'packages/core/src/utils/Literal';
+import { type SvelteComponent } from 'svelte';
+
+export class ImageListSuggesterIPF extends AbstractInputField<MBLiteral[], string[]> {
+	protected filterValue(value: unknown): MBLiteral[] | undefined {
+		return parseUnknownToLiteralArray(value);
+	}
+
+	protected getFallbackDefaultValue(): string[] {
+		return [];
+	}
+
+	protected getSvelteComponent(): typeof SvelteComponent {
+		// @ts-ignore
+		return ImageListSuggesterComponent;
+	}
+
+	protected rawMapValue(value: string[]): MBLiteral[] {
+		return value;
+	}
+
+	protected rawReverseMapValue(value: MBLiteral[]): string[] | undefined {
+		return value.map(v => stringifyLiteral(v)).filter(v => v !== undefined);
+	}
+
+	protected getMountArgs(): Record<string, unknown> {
+		return {
+			showSuggester: () => this.openModal(),
+		};
+	}
+
+	openModal(): void {
+		this.base.plugin.internal.openImageSuggesterModal(this, (selected: string) => {
+			const value = this.getInternalValue();
+			value.push(selected);
+			this.setInternalValue(value);
+		});
+	}
+}

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

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import { IPlugin } from 'packages/core/src/IPlugin';
+	import Button from '../../../../utils/components/Button.svelte';
+	import { ButtonStyleType } from '../../../../config/ButtonConfig';
+	import Icon from 'packages/core/src/utils/components/Icon.svelte';
 
 	export let plugin: IPlugin;
 
@@ -14,20 +17,16 @@
 	function openSuggester(event: MouseEvent) {
 		showSuggester();
 	}
-
-	function openSuggesterOnKey(event: KeyboardEvent) {
-		if (event.key === ' ') {
-			showSuggester();
-		}
-	}
 </script>
 
-<div class="mb-image-suggest-input">
+<div class="mb-image-card">
 	{#if value}
-		<img class="mb-image-suggest-image" src={plugin.internal.imagePathToUri(value)} alt={value} />
+		<img class="mb-image-card-image" src={plugin.internal.imagePathToUri(value)} alt={value} />
 	{/if}
-	<div class="mb-image-suggest-footer">
-		<span class="mb-image-suggest-footer-text">{value || 'no image selected'}</span>
-		<button class="btn btn-active" on:click={openSuggester} on:keydown={openSuggesterOnKey}> Change Image</button>
+	<div class="mb-image-card-footer">
+		<span>{value || 'no image selected'}</span>
+		<Button variant={ButtonStyleType.PLAIN} on:click={openSuggester}>
+			<Icon iconName="pencil" plugin={plugin} />
+		</Button>
 	</div>
 </div>

packages/core/src/fields/inputFields/fields/Suggester/SuggesterHelper.ts

@@ -1,9 +1,13 @@
 import { type InlineListSuggesterIPF } from 'packages/core/src/fields/inputFields/fields/InlineListSuggester/InlineListSuggesterIPF';
 import { type ListSuggesterIPF } from 'packages/core/src/fields/inputFields/fields/ListSuggester/ListSuggesterIPF';
 import { type SuggesterIPF } from 'packages/core/src/fields/inputFields/fields/Suggester/SuggesterIPF';
+import { type ImageSuggesterIPF } from 'packages/core/src/fields/inputFields/fields/ImageSuggester/ImageSuggesterIPF';
+import { type ImageListSuggesterIPF } from 'packages/core/src/fields/inputFields/fields/ImageListSuggester/ImageListSuggesterIPF';
 
 export type SuggesterLikeIFP = SuggesterIPF | ListSuggesterIPF | InlineListSuggesterIPF;
 
+export type ImageSuggesterLikeIPF = ImageSuggesterIPF | ImageListSuggesterIPF;
+
 export class SuggesterOption<T> {
 	value: T;
 	displayValue: string;