add #131 and #137

Author: mProjectsCode

exampleVault/Input Fields/List.md

@@ -11,6 +11,12 @@ list3:
   - Example Note with Image
   - Example Note with Callouts
   - something
+list4:
+  - Example Note with Callouts
+  - Example Note with Embeds
+  - Example Note with Embeds
+list5:
+  - this is an element
 ---
 
 
@@ -26,7 +32,12 @@ INPUT[listSuggester(optionQuery(#example-note), option(something, other), showca
 INPUT[listSuggester(optionQuery(#example-note), option(something, other), useLinks(false), showcase):list3]
 ```
 
-
 ```meta-bind
-INPUT[listsuggester(optionQuery(#example-note), option(something, other), useLinks(false), showcase):list3]
-```
+INPUT[inlineListSuggester(optionQuery(#example-note), option(something, other), useLinks(false), showcase):list4]
+```
+
+
+Some text: `INPUT[inlineListSuggester(optionQuery(#example-note), option(something, other), useLinks(false)):list4]` some more text
+
+
+Some text: `INPUT[inlineList:list5]` some more text

exampleVault/Other/Images/img_drops.jpg

@@ -20,6 +20,8 @@ import { DateIPF } from './fields/Date/DateIPF';
 import { TimeIPF } from './fields/Time/TimeIPF';
 import { type InputFieldConfig, InputFieldConfigs, InputFieldType } from '../parsers/GeneralConfigs';
 import { DocsHelper } from '../utils/DocsHelper';
+import { InlineListSuggesterIPF } from './fields/InlineListSuggester/InlineListSuggesterIPF';
+import { InlineListIPF } from './fields/InlineList/InlineListIPF';
 
 export type NewInputField =
 	| ToggleIPF
@@ -38,7 +40,9 @@ export type NewInputField =
 	| ListIPF
 	| ListSuggesterIPF
 	| DateIPF
-	| TimeIPF;
+	| TimeIPF
+	| InlineListSuggesterIPF
+	| InlineListIPF;
 
 export class InputFieldFactory {
 	plugin: IPlugin;
@@ -94,6 +98,10 @@ export class InputFieldFactory {
 			return new DateIPF(renderChild);
 		} else if (type === InputFieldType.TIME) {
 			return new TimeIPF(renderChild);
+		} else if (type === InputFieldType.INLINE_LIST_SUGGESTER) {
+			return new InlineListSuggesterIPF(renderChild);
+		} else if (type === InputFieldType.INLINE_LIST) {
+			return new InlineListIPF(renderChild);
 		}
 
 		return undefined;

exampleVault/Other/Images/img_frozen_branch.jpg renamed to exampleVault/Other/Images/subfolder/img_frozen_branch.jpg

@@ -1,21 +1,45 @@
 <script lang="ts">
 	import ImageSuggesterCard from './ImageSuggesterCard.svelte';
 	import { SuggesterOption } from '../Suggester/SuggesterHelper';
+	import {TextInput} from 'obsidian-svelte';
+	import {prepareFuzzySearch} from 'obsidian';
 
 	export let options: SuggesterOption<string>[];
 	export let onSelect: (item: string) => void;
+
+	let search = '';
+	let filteredOptions: SuggesterOption<string>[];
+
+	$: runSearch(search);
+
+	function runSearch(search: string): void {
+		if (!search) {
+			filteredOptions = options;
+			return;
+		}
+
+		const searchFn = prepareFuzzySearch(search);
+
+		let x: SuggesterOption<string>[] = []
+		for (const option of options) {
+			if (searchFn(option.value)?.score !== undefined) {
+				x.push(option);
+			}
+		}
+
+		filteredOptions = x;
+	}
 </script>
 
+<div class="mb-image-search-container">
+	<TextInput bind:value={search} placeholder="Search Images..."></TextInput>
+</div>
 <div class="mb-image-card-grid">
-	{#each options as option}
+	{#each filteredOptions as option}
 		<ImageSuggesterCard image={option.value} onSelect={onSelect}></ImageSuggesterCard>
 	{/each}
 </div>
 
 <style>
-	.mb-image-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
-		gap: var(--size-4-4);
-	}
+
 </style>

src/inputFields/InputFieldFactory.ts

@@ -22,6 +22,9 @@
 
 	.image-card-image {
 		width: 100%;
+		height: fit-content;
+		max-height: 500px;
+		object-fit: contain;
 	}
 
 	.image-card-text {

src/inputFields/fields/ImageSuggester/ImageSuggestModalComponent.svelte

@@ -41,6 +41,9 @@
 
 	.mb-image-suggest-image {
 		width: 100%;
+		height: fit-content;
+		max-height: 500px;
+		object-fit: contain;
 	}
 
 	.mb-image-suggest-footer {

src/inputFields/fields/ImageSuggester/ImageSuggesterCard.svelte

@@ -9,6 +9,19 @@ import { type ImageSuggesterIPF } from './ImageSuggesterIPF';
 import { InputFieldArgumentType } from '../../../parsers/GeneralConfigs';
 import { stringifyLiteral } from '../../../utils/Literal';
 
+function recSearchFolder(folder: TFolder): SuggesterOption<string>[] {
+	const ret = [];
+	for (const child of folder.children) {
+		if (child instanceof TFile && isImageExtension(child.extension)) {
+			ret.push(new SuggesterOption(child.path, child.name));
+		}
+		if (child instanceof TFolder) {
+			ret.push(...recSearchFolder(child));
+		}
+	}
+	return ret;
+}
+
 export function getImageSuggesterOptions(
 	optionArgs: OptionInputFieldArgument[],
 	optionQueryArgs: OptionQueryInputFieldArgument[],
@@ -54,11 +67,7 @@ export function getImageSuggesterOptions(
 			continue;
 		}
 
-		for (const child of folder.children) {
-			if (child instanceof TFile && isImageExtension(child.extension)) {
-				options.push(new SuggesterOption(child.path, child.name));
-			}
-		}
+		options.push(...recSearchFolder(folder));
 	}
 
 	for (const optionArg of optionArgs) {

src/inputFields/fields/ImageSuggester/ImageSuggesterComponent.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import Icon from '../../../utils/Icon.svelte';
+	import { isMdLink, parseMdLink } from '../../../parsers/MarkdownLinkParser';
+	import LinkComponent from '../../../utils/LinkComponent.svelte';
+	import { MBLiteral } from '../../../utils/Literal';
+
+	export let value: MBLiteral[];
+	export let showInput: () => void;
+	export let onValueChange: (value: MBLiteral[]) => void;
+
+	export function setValue(v: MBLiteral[]): void {
+		value = v;
+	}
+
+	export function addValue(v: MBLiteral): 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 input(event: MouseEvent): void {
+		// don't fire the event if user clicked on the link
+		if (!(event.target instanceof HTMLAnchorElement)) {
+			showInput();
+		}
+	}
+
+	function inputKey(event: KeyboardEvent): void {
+		if (event.key === ' ') {
+			showInput();
+		}
+	}
+</script>
+
+<div class="mb-inline-list">
+	{#each value as entry, i}
+		<div class="mb-inline-list-item">
+			{#if isMdLink(`${entry}`)}
+				<span>
+					<LinkComponent mdLink={parseMdLink(`${entry}`)}></LinkComponent>
+				</span>
+			{:else}
+				<span>{entry}</span>
+			{/if}
+			<button class="mb-inline-list-item-button" on:click={() => remove(i)}>
+				<Icon iconName="x" />
+			</button>
+		</div>
+	{/each}
+	<div class="mb-inline-list-add" on:click={input} on:keydown={inputKey} role="button" tabindex="0">
+		<!-- Alignment hack with zero width space -->
+		<span>&#x200B;</span>
+		<Icon iconName="plus" />
+	</div>
+</div>

src/inputFields/fields/ImageSuggester/ImageSuggesterHelper.ts

@@ -0,0 +1,54 @@
+import { AbstractInputField } from '../../AbstractInputField';
+import { MBLiteral, parseUnknownToLiteralArray } from '../../../utils/Literal';
+import { InputFieldMDRC } from '../../../renderChildren/InputFieldMDRC';
+import { SvelteComponent } from 'svelte';
+import InlineListComponent from './InlineListComponent.svelte';
+import { TextPromptModal } from '../../../utils/TextPromptModal';
+
+export class InlineListIPF extends AbstractInputField<MBLiteral[], MBLiteral[]> {
+	constructor(renderChild: InputFieldMDRC) {
+		super(renderChild);
+	}
+
+	protected filterValue(value: unknown): MBLiteral[] | undefined {
+		return parseUnknownToLiteralArray(value);
+	}
+
+	protected getFallbackDefaultValue(): MBLiteral[] {
+		return [];
+	}
+
+	protected getSvelteComponent(): typeof SvelteComponent {
+		return InlineListComponent;
+	}
+
+	protected rawMapValue(value: MBLiteral[]): MBLiteral[] {
+		return value;
+	}
+
+	protected rawReverseMapValue(value: MBLiteral[]): MBLiteral[] | undefined {
+		return value;
+	}
+
+	protected getMountArgs(): Record<string, unknown> {
+		return {
+			showInput: () => this.openModal(),
+		};
+	}
+
+	openModal(): void {
+		new TextPromptModal(
+			this.renderChild.plugin.app,
+			'',
+			'Meta Bind List',
+			'New List Element',
+			'',
+			newElement => {
+				const value = this.getInternalValue();
+				value.push(newElement);
+				this.setInternalValue(value);
+			},
+			() => {},
+		).open();
+	}
+}