placeholder argument

mProjectsCode · mProjectsCode · commit b251a21c1722 · 2023-09-22T20:07:32.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,31 @@
 # Obsidian Meta Bind Changelog
 
+# 0.6.0 - UNRELEASED
+
+New Features
+
+-   `list` input field
+-   `defaultValue` input field argument
+    -   lets you define a custom default value for an input field
+    -   works on any input field
+-   `placeholder` input field argument
+    -   lets you define a placeholder value to be displayed in the input field, if no value is set
+    -   works on the following input fields `text`, `textArea`, `number` and `list`
+
+Changes
+
+-   new parser for input fields, view fields and bind targets
+    -   input fields now display way better error messages
+    -   i tried not to introduce breaking changes, but some might have slipped through
+    -   this is also why the update took so long
+-   new API to create input field using code (e.g. using dataviewJS or [JS Engine](https://github.com/mProjectsCode/obsidian-js-engine-plugin))
+    -   this is a breaking change
+
+Bug Fixes
+
+-   fixed a bug with the metadata cache when the frontmatter was invalid
+-   fixed a bug with view fields that caused an error when referencing metadata from another file
+
 # 0.5.1
 
 Minor Changes
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
 		"jest": "^29.6.1",
 		"jest-environment-jsdom": "^28.1.1",
 		"obsidian": "latest",
-		"obsidian-dataview": "latest",
+		"obsidian-dataview": "0.5.56",
 		"prettier": "2.7.1",
 		"svelte": "^4.2.0",
 		"svelte-preprocess": "^5.0.4",
@@ -45,7 +45,7 @@
 	},
 	"dependencies": {
 		"@codemirror/language": "https://github.com/lishid/cm-language",
-		"@lemons_dev/parsinom": "^0.0.6",
+		"@lemons_dev/parsinom": "^0.0.8",
 		"@opd-libs/opd-metadata-lib": "0.0.4",
 		"@opd-libs/opd-utils-lib": "0.0.2",
 		"@popperjs/core": "^2.11.8",
diff --git a/src/inputFieldArguments/InputFieldArgumentFactory.ts b/src/inputFieldArguments/InputFieldArgumentFactory.ts
@@ -12,6 +12,7 @@ import { ShowcaseInputFieldArgument } from './arguments/ShowcaseInputFieldArgume
 import { OffValueInputFieldArgument } from './arguments/OffValueInputFieldArgument';
 import { OnValueInputFieldArgument } from './arguments/OnValueInputFieldArgument';
 import { DefaultValueInputFieldArgument } from './arguments/DefaultValueInputFieldArgument';
+import { PlaceholderInputFieldArgument } from './arguments/PlaceholderInputFieldArgument';
 
 export class InputFieldArgumentFactory {
 	static createInputFieldArgument(argumentIdentifier: string): AbstractInputFieldArgument {
@@ -37,6 +38,8 @@ export class InputFieldArgumentFactory {
 			return new OnValueInputFieldArgument();
 		} else if (argumentIdentifier === InputFieldArgumentType.DEFAULT_VALUE) {
 			return new DefaultValueInputFieldArgument();
+		} else if (argumentIdentifier === InputFieldArgumentType.PLACEHOLDER) {
+			return new PlaceholderInputFieldArgument();
 		} else {
 			throw new MetaBindParsingError(ErrorLevel.ERROR, 'can not crate input field argument', `unknown argument '${argumentIdentifier}'`);
 		}
diff --git a/src/inputFieldArguments/arguments/OptionInputFieldArgument.ts b/src/inputFieldArguments/arguments/OptionInputFieldArgument.ts
@@ -1,13 +1,13 @@
 import { AbstractInputFieldArgument } from '../AbstractInputFieldArgument';
 import { InputFieldArgumentType, InputFieldType } from '../../parsers/InputFieldDeclarationParser';
-import { ErrorLevel, MetaBindArgumentError } from '../../utils/errors/MetaBindErrors';
 import { MBLiteral, parseLiteral } from '../../utils/Utils';
 import { ParsingResultNode } from '../../parsers/newInputFieldParser/InputFieldDeclarationValidator';
 
 export class OptionInputFieldArgument extends AbstractInputFieldArgument {
 	identifier: InputFieldArgumentType = InputFieldArgumentType.OPTION;
 	allowedInputFields: InputFieldType[] = [
 		InputFieldType.SELECT,
+		InputFieldType.MULTI_SELECT_DEPRECATED,
 		InputFieldType.MULTI_SELECT,
 		InputFieldType.SUGGESTER,
 		InputFieldType.IMAGE_SUGGESTER,
diff --git a/src/inputFieldArguments/arguments/PlaceholderInputFieldArgument.ts b/src/inputFieldArguments/arguments/PlaceholderInputFieldArgument.ts
@@ -0,0 +1,22 @@
+import { AbstractInputFieldArgument } from '../AbstractInputFieldArgument';
+import { InputFieldArgumentType, InputFieldType } from '../../parsers/InputFieldDeclarationParser';
+import { ParsingResultNode } from '../../parsers/newInputFieldParser/InputFieldDeclarationValidator';
+
+export class PlaceholderInputFieldArgument extends AbstractInputFieldArgument {
+	identifier: InputFieldArgumentType = InputFieldArgumentType.PLACEHOLDER;
+	allowedInputFields: InputFieldType[] = [
+		InputFieldType.TEXT,
+		InputFieldType.TEXT_AREA,
+		InputFieldType.TEXT_AREA_DEPRECATED,
+		InputFieldType.NUMBER,
+		InputFieldType.LIST,
+	];
+	value: string = '';
+	valueLengthMin: number = 1;
+	valueLengthMax: number = 1;
+	allowMultiple: boolean = true;
+
+	_parseValue(value: ParsingResultNode[]): void {
+		this.value = value[0].value;
+	}
+}
diff --git a/src/inputFields/InputFieldConfigs.ts b/src/inputFields/InputFieldConfigs.ts
@@ -22,6 +22,11 @@ export const InputFieldConfigs: Record<InputFieldType, InputFieldConfig> = {
 		allowInBlock: true,
 		allowInline: true,
 	},
+	[InputFieldType.TEXT_AREA_DEPRECATED]: {
+		type: InputFieldType.TEXT_AREA_DEPRECATED,
+		allowInBlock: true,
+		allowInline: true,
+	},
 	[InputFieldType.TEXT_AREA]: {
 		type: InputFieldType.TEXT_AREA,
 		allowInBlock: true,
@@ -32,6 +37,11 @@ export const InputFieldConfigs: Record<InputFieldType, InputFieldConfig> = {
 		allowInBlock: true,
 		allowInline: false,
 	},
+	[InputFieldType.MULTI_SELECT_DEPRECATED]: {
+		type: InputFieldType.MULTI_SELECT_DEPRECATED,
+		allowInBlock: true,
+		allowInline: false,
+	},
 	[InputFieldType.MULTI_SELECT]: {
 		type: InputFieldType.MULTI_SELECT,
 		allowInBlock: true,
@@ -47,6 +57,11 @@ export const InputFieldConfigs: Record<InputFieldType, InputFieldConfig> = {
 		allowInBlock: true,
 		allowInline: true,
 	},
+	[InputFieldType.DATE_PICKER_DEPRECATED]: {
+		type: InputFieldType.DATE_PICKER_DEPRECATED,
+		allowInBlock: true,
+		allowInline: true,
+	},
 	[InputFieldType.DATE_PICKER]: {
 		type: InputFieldType.DATE_PICKER,
 		allowInBlock: true,
diff --git a/src/inputFields/InputFieldFactory.ts b/src/inputFields/InputFieldFactory.ts
@@ -36,16 +36,22 @@ export class InputFieldFactory {
 			return new SliderInputField(args.inputFieldMDRC);
 		} else if (inputFieldType === InputFieldType.TEXT) {
 			return new TextInputField(args.inputFieldMDRC);
+		} else if (inputFieldType === InputFieldType.TEXT_AREA_DEPRECATED) {
+			return new TextAreaInputField(args.inputFieldMDRC);
 		} else if (inputFieldType === InputFieldType.TEXT_AREA) {
 			return new TextAreaInputField(args.inputFieldMDRC);
 		} else if (inputFieldType === InputFieldType.SELECT) {
 			return new SelectInputField(args.inputFieldMDRC);
+		} else if (inputFieldType === InputFieldType.MULTI_SELECT_DEPRECATED) {
+			return new MultiSelectInputField(args.inputFieldMDRC);
 		} else if (inputFieldType === InputFieldType.MULTI_SELECT) {
 			return new MultiSelectInputField(args.inputFieldMDRC);
 		} else if (inputFieldType === InputFieldType.DATE) {
 			return new DateInputField(args.inputFieldMDRC);
 		} else if (inputFieldType === InputFieldType.TIME) {
 			return new TimeInputField(args.inputFieldMDRC);
+		} else if (inputFieldType === InputFieldType.DATE_PICKER_DEPRECATED) {
+			return new DatePickerInputField(args.inputFieldMDRC);
 		} else if (inputFieldType === InputFieldType.DATE_PICKER) {
 			return new DatePickerInputField(args.inputFieldMDRC);
 		} else if (inputFieldType === InputFieldType.NUMBER) {
diff --git a/src/inputFields/fields/ImageSuggest/ImageCard.svelte b/src/inputFields/fields/ImageSuggest/ImageCard.svelte
@@ -3,6 +3,12 @@
 
 	export let image: string;
 	export let onSelect: (item: string) => void;
+
+	function keySelect(event: KeyboardEvent, image: string): void {
+		if (event.key === ' ') {
+			onSelect(image);
+		}
+	}
 </script>
 
 <style>
@@ -21,7 +27,7 @@
 	}
 </style>
 
-<div class="image-card" on:click={() => onSelect(image)}>
+<div class="image-card" on:click={() => onSelect(image)} on:keydown={(event) => keySelect(event, image)} role="button" tabindex=0>
 	<img class="image-card-image" src={imagePathToUri(image)} alt={image}/>
 	<span class="image-card-text">{image}</span>
 </div>
diff --git a/src/inputFields/fields/List/ListInput.svelte b/src/inputFields/fields/List/ListInput.svelte
@@ -2,13 +2,16 @@
 	import {ListInputField} from './ListInputField';
 	import Icon from '../../../utils/Icon.svelte';
 	import {Button, TextInput} from 'obsidian-svelte';
+	import {InputFieldArgumentType} from '../../../parsers/InputFieldDeclarationParser';
 
 	export let value: string[] = [];
 	export let onValueChange: (value: any) => void;
 	export let listInput: ListInputField;
 
 	let addValue: string = '';
 
+	let placeholder = listInput.renderChild.getArgument(InputFieldArgumentType.PLACEHOLDER);
+
 	export function updateValue(v: string[]) {
 		value = v;
 	}
@@ -44,7 +47,7 @@
 	{/each}
 </div>
 <div class="mb-list-input">
-	<TextInput bind:value={addValue} placeholder="add entry..." width="100%"></TextInput>
+	<TextInput bind:value={addValue} placeholder="{placeholder?.value ?? 'add entry...'}" width="100%"></TextInput>
 	<Button on:click={() => add()} disabled="{!addValue}">
 		<Icon iconName="plus"/>
 	</Button>
diff --git a/src/inputFields/fields/NumberInputField.ts b/src/inputFields/fields/NumberInputField.ts
@@ -2,6 +2,7 @@ import { AbstractInputField } from '../AbstractInputField';
 import { TextComponent } from 'obsidian';
 import { MBExtendedLiteral, numberToString } from '../../utils/Utils';
 import { ErrorLevel, MetaBindInternalError } from '../../utils/errors/MetaBindErrors';
+import { InputFieldArgumentType } from '../../parsers/InputFieldDeclarationParser';
 
 type T = number;
 
@@ -53,13 +54,18 @@ export class NumberInputField extends AbstractInputField<T> {
 	render(container: HTMLDivElement): void {
 		console.debug(`meta-bind | NumberInputField >> render ${this.renderChild.uuid}`);
 
+		const placeholder = this.renderChild.getArgument(InputFieldArgumentType.PLACEHOLDER);
+
 		const component = new TextComponent(container);
 		component.inputEl.type = 'number';
 		component.setValue(numberToString(this.getInitialValue()));
 		component.onChange(value => {
 			const n = parseFloat(value);
 			this.onValueChange(isNaN(n) ? 0 : n);
 		});
+		if (placeholder !== undefined) {
+			component.setPlaceholder(placeholder.value);
+		}
 		this.numberComponent = component;
 	}
 
diff --git a/src/inputFields/fields/Suggest/SuggestInput.svelte b/src/inputFields/fields/Suggest/SuggestInput.svelte
@@ -58,7 +58,9 @@
 <div
 	class="suggest-input"
 	on:click={suggest}
-	on:keydown={suggestKey}>
+	on:keydown={suggestKey}
+	role="button"
+	tabindex=0>
 	<div class="suggest-text">
 		{#if isLink}
 			<LinkComponent bind:mdLink={mdLink}></LinkComponent>
diff --git a/src/inputFields/fields/Suggest/SuggestInputField.ts b/src/inputFields/fields/Suggest/SuggestInputField.ts
@@ -101,7 +101,7 @@ export class SuggestInputField extends AbstractInputField<T> {
 			}
 
 			for (const suggestOptionsQueryArgument of optionQueryArguments) {
-				const result: DataArray<Record<string, Literal>> = await dv.pages(suggestOptionsQueryArgument.value, this.renderChild.filePath);
+				const result: DataArray<Record<string, Literal>> = dv.pages(suggestOptionsQueryArgument.value, this.renderChild.filePath);
 				result.forEach((file: Record<string, Literal>) => {
 					try {
 						const tFile: TFile = file.file as TFile;
diff --git a/src/inputFields/fields/TextAreaInputField.ts b/src/inputFields/fields/TextAreaInputField.ts
@@ -2,6 +2,7 @@ import { AbstractInputField } from '../AbstractInputField';
 import { TextAreaComponent } from 'obsidian';
 import { ErrorLevel, MetaBindInternalError } from '../../utils/errors/MetaBindErrors';
 import { MBExtendedLiteral, stringifyLiteral } from '../../utils/Utils';
+import { InputFieldArgumentType } from '../../parsers/InputFieldDeclarationParser';
 
 type T = string;
 
@@ -47,9 +48,14 @@ export class TextAreaInputField extends AbstractInputField<T> {
 	render(container: HTMLDivElement): void {
 		console.debug(`meta-bind | TextAreaInputField >> render ${this.renderChild.uuid}`);
 
+		const placeholder = this.renderChild.getArgument(InputFieldArgumentType.PLACEHOLDER);
+
 		const component = new TextAreaComponent(container);
 		component.setValue(this.getInitialValue());
 		component.onChange(this.onValueChange);
+		if (placeholder !== undefined) {
+			component.setPlaceholder(placeholder.value);
+		}
 		this.textAreaComponent = component;
 	}
 
diff --git a/src/inputFields/fields/TextInputField.ts b/src/inputFields/fields/TextInputField.ts
@@ -2,6 +2,7 @@ import { AbstractInputField } from '../AbstractInputField';
 import { TextComponent } from 'obsidian';
 import { ErrorLevel, MetaBindInternalError } from '../../utils/errors/MetaBindErrors';
 import { MBExtendedLiteral, stringifyLiteral } from '../../utils/Utils';
+import { InputFieldArgumentType } from '../../parsers/InputFieldDeclarationParser';
 
 type T = string;
 
@@ -47,9 +48,14 @@ export class TextInputField extends AbstractInputField<T> {
 	render(container: HTMLDivElement): void {
 		console.debug(`meta-bind | TextInputField >> render ${this.renderChild.uuid}`);
 
+		const placeholder = this.renderChild.getArgument(InputFieldArgumentType.PLACEHOLDER);
+
 		const component = new TextComponent(container);
 		component.setValue(this.getInitialValue() ?? this.getDefaultValue());
 		component.onChange(this.onValueChange);
+		if (placeholder !== undefined) {
+			component.setPlaceholder(placeholder.value);
+		}
 		this.textComponent = component;
 	}
 
diff --git a/src/parsers/InputFieldDeclarationParser.ts b/src/parsers/InputFieldDeclarationParser.ts
@@ -6,12 +6,15 @@ export enum InputFieldType {
 	TOGGLE = 'toggle',
 	SLIDER = 'slider',
 	TEXT = 'text',
-	TEXT_AREA = 'text_area',
+	TEXT_AREA_DEPRECATED = 'text_area',
+	TEXT_AREA = 'textArea',
 	SELECT = 'select',
-	MULTI_SELECT = 'multi_select',
+	MULTI_SELECT_DEPRECATED = 'multi_select',
+	MULTI_SELECT = 'multiSelect',
 	DATE = 'date',
 	TIME = 'time',
-	DATE_PICKER = 'date_picker',
+	DATE_PICKER_DEPRECATED = 'date_picker',
+	DATE_PICKER = 'datePicker',
 	NUMBER = 'number',
 	SUGGESTER = 'suggester',
 	EDITOR = 'editor',
@@ -35,6 +38,7 @@ export enum InputFieldArgumentType {
 	ON_VALUE = 'onValue',
 	OFF_VALUE = 'offValue',
 	DEFAULT_VALUE = 'defaultValue',
+	PLACEHOLDER = 'placeholder',
 
 	INVALID = 'invalid',
 }
@@ -79,7 +83,7 @@ export interface InputFieldDeclaration {
  * @param declaration
  */
 export function getPublishDefaultValue(declaration: InputFieldDeclaration): unknown {
-	const placeholderString = 'placeholder';
+	const placeholderString: string = declaration.argumentContainer.get(InputFieldArgumentType.PLACEHOLDER)?.value ?? 'placeholder';
 
 	if (declaration.inputFieldType === InputFieldType.TOGGLE) {
 		const offArgument = declaration.argumentContainer.get(InputFieldArgumentType.OFF_VALUE);
@@ -89,19 +93,19 @@ export function getPublishDefaultValue(declaration: InputFieldDeclaration): unkn
 		return minArgument ? minArgument.value : 0;
 	} else if (declaration.inputFieldType === InputFieldType.TEXT) {
 		return placeholderString;
-	} else if (declaration.inputFieldType === InputFieldType.TEXT_AREA) {
+	} else if (declaration.inputFieldType === InputFieldType.TEXT_AREA_DEPRECATED || declaration.inputFieldType === InputFieldType.TEXT_AREA) {
 		return placeholderString;
 	} else if (declaration.inputFieldType === InputFieldType.SELECT) {
 		const firstOptionArgument = declaration.argumentContainer.get(InputFieldArgumentType.OPTION);
 		return firstOptionArgument ? firstOptionArgument.value : placeholderString;
-	} else if (declaration.inputFieldType === InputFieldType.MULTI_SELECT) {
+	} else if (declaration.inputFieldType === InputFieldType.MULTI_SELECT_DEPRECATED || declaration.inputFieldType === InputFieldType.MULTI_SELECT) {
 		const firstOptionArgument = declaration.argumentContainer.get(InputFieldArgumentType.OPTION);
 		return firstOptionArgument ? firstOptionArgument.value : placeholderString;
 	} else if (declaration.inputFieldType === InputFieldType.DATE) {
 		return '1970-01-01';
 	} else if (declaration.inputFieldType === InputFieldType.TIME) {
 		return '00:00';
-	} else if (declaration.inputFieldType === InputFieldType.DATE_PICKER) {
+	} else if (declaration.inputFieldType === InputFieldType.DATE_PICKER_DEPRECATED || declaration.inputFieldType === InputFieldType.DATE_PICKER) {
 		return '1970-01-01';
 	} else if (declaration.inputFieldType === InputFieldType.NUMBER) {
 		return 0;
diff --git a/src/parsers/ParsingError.ts b/src/parsers/ParsingError.ts
@@ -1,5 +1,6 @@
 import { ErrorLevel, ErrorType, MetaBindError } from '../utils/errors/MetaBindErrors';
 import { ParseFailure, ParsingRange } from '@lemons_dev/parsinom/lib/HelperTypes';
+import { innerMode } from 'codemirror';
 
 export class ParsingError extends MetaBindError {
 	str: string;
@@ -68,9 +69,20 @@ export class ParsingValidationError extends MetaBindError {
 
 			const linePrefix = `${this.position.from.line} |   `;
 			this.message += `\n${linePrefix}${failedLine}`;
-			this.message += `\n${' '.repeat(this.position.from.column - 1 + linePrefix.length)}${'^'.repeat(
-				(this.position.to.line === this.position.from.line ? this.position.to.index : failedLine.length) - this.position.from.index
-			)} (${this.cause})\n`;
+			this.message += `\n${this.getUnderline(linePrefix.length, failedLine.length)} (${this.cause})\n`;
 		}
 	}
+
+	private getUnderline(offset: number, lineLength: number): string {
+		if (this.position === undefined) {
+			return '';
+		}
+
+		const spacing = ' '.repeat(this.position.from.index - 1 + offset);
+		// highlight to the end if the end is on the same line. If the end is on a different line, highlight to the end of the line.
+		const toIndex = this.position.to.line === this.position.from.line ? this.position.to.index : lineLength;
+		const underline = '^'.repeat(toIndex - this.position.from.index);
+
+		return spacing + underline;
+	}
 }
diff --git a/src/parsers/newInputFieldParser/InputFieldDeclarationValidator.ts b/src/parsers/newInputFieldParser/InputFieldDeclarationValidator.ts
diff --git a/src/renderChildren/InputFieldMDRC.ts b/src/renderChildren/InputFieldMDRC.ts
