the fixing part 1

exampleVault/Input Fields/Select and Multi Select.md

@@ -1,9 +1,10 @@
 ---
-select: 2
+select: 1
 multiSelect:
   - option 1
   - option 3
-select2: 1
+select2: false
+select3: 3
 ---
 
 ### Select
@@ -25,6 +26,16 @@ showcase
 ):select2]
 ```
 
+```meta-bind
+INPUT[select(
+option(1, option 1), 
+option(2, option 2), 
+option(3, option 3), 
+option(3, option 3), 
+option(2, option 2), 
+showcase
+):select3]
+```
 
 ### Multi Select
 ```meta-bind

src/api/IAPI.ts

@@ -12,6 +12,4 @@ export interface IAPI {
 	readonly inputFieldParser: InputFieldDeclarationParser;
 	readonly viewFieldParser: ViewFieldDeclarationParser;
 	readonly bindTargetParser: BindTargetParser;
-
-	readonly inputFieldFactory: NewInputFieldFactory;
 }

src/cm6/Cm6_Widgets.ts

@@ -50,7 +50,7 @@ export class ViewFieldWidget extends MarkdownRenderChildWidget<ViewFieldMDRC> {
 
 export class InputFieldWidget extends MarkdownRenderChildWidget<InputFieldMDRC> {
 	public createRenderChild(container: HTMLElement, component: Component): InputFieldMDRC | ExcludedMDRC {
-		return this.plugin.api.createInputFieldFromString(this.content, RenderChildType.INLINE, this.filePath, container, component);
+		return this.plugin.api.createInputFieldFromString(this.content, RenderChildType.INLINE, this.filePath, container, component, undefined);
 	}
 }
 

src/inputFields/_new/NewInputFieldFactory.ts

@@ -5,8 +5,10 @@ import { IPlugin } from '../../IPlugin';
 import { Toggle } from './fields/Toggle/Toggle';
 import { Text } from './fields/Text/Text';
 import { Slider } from './fields/Slider/Slider';
+import { TextArea } from './fields/TextArea/TextArea';
+import { Select } from './fields/Select/Select';
 
-export type NewInputField = Toggle | Slider | Text;
+export type NewInputField = Toggle | Slider | Text | TextArea | Select;
 
 export class NewInputFieldFactory {
 	plugin: IPlugin;
@@ -26,6 +28,12 @@ export class NewInputFieldFactory {
 			return new Slider(renderChild);
 		} else if (type === InputFieldType.TEXT) {
 			return new Text(renderChild);
+		} else if (type === InputFieldType.TEXT_AREA) {
+			return new TextArea(renderChild);
+		} else if (type === InputFieldType.TEXT_AREA_DEPRECATED) {
+			return new TextArea(renderChild);
+		} else if (type === InputFieldType.SELECT) {
+			return new Select(renderChild);
 		}
 
 		return undefined;

src/inputFields/_new/fields/Select/Select.ts

@@ -0,0 +1,43 @@
+import { NewAbstractInputField } from '../../NewAbstractInputField';
+import { isLiteral, MBLiteral, stringifyLiteral } from '../../../../utils/Utils';
+import { InputFieldMDRC } from '../../../../renderChildren/InputFieldMDRC';
+import { SvelteComponent } from 'svelte';
+import SelectComponent from './SelectComponent.svelte';
+import { OptionInputFieldArgument } from '../../../../inputFieldArguments/arguments/OptionInputFieldArgument';
+import { InputFieldArgumentType } from '../../../InputFieldConfigs';
+
+export class Select extends NewAbstractInputField<MBLiteral, MBLiteral> {
+	options: OptionInputFieldArgument[];
+
+	constructor(renderChild: InputFieldMDRC) {
+		super(renderChild);
+
+		this.options = this.renderChild.getArguments(InputFieldArgumentType.OPTION) as OptionInputFieldArgument[];
+	}
+
+	protected filterValue(value: any): MBLiteral | undefined {
+		return isLiteral(value) ? value : undefined;
+	}
+
+	protected getFallbackDefaultValue(): MBLiteral {
+		return null;
+	}
+
+	protected getSvelteComponent(): typeof SvelteComponent {
+		return SelectComponent;
+	}
+
+	protected rawMapValue(value: MBLiteral): MBLiteral {
+		return value;
+	}
+
+	protected rawReverseMapValue(value: MBLiteral): MBLiteral | undefined {
+		return value;
+	}
+
+	protected getMountArgs(): Record<string, any> {
+		return {
+			options: this.options,
+		};
+	}
+}

src/inputFields/_new/fields/Select/SelectComponent.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import {MBLiteral, stringifyLiteral} from '../../../../utils/Utils';
+	import {OptionInputFieldArgument} from '../../../../inputFieldArguments/arguments/OptionInputFieldArgument';
+
+	export let value: MBLiteral;
+	export let options: OptionInputFieldArgument[];
+	export let onValueChange: (value: MBLiteral) => void;
+
+	export function setValue(v: MBLiteral): void {
+		value = v;
+	}
+
+	function selectOption(option: MBLiteral) {
+		value = option;
+		onValueChange(value);
+	}
+
+	function selectOptionOnKey(event: KeyboardEvent, option: MBLiteral) {
+		if (event.key === ' ') {
+			selectOption(option);
+		}
+	}
+</script>
+
+{#each options as option}
+    <div
+        class="mb-select-input-element"
+        class:is-selected={option.value === value}
+        role="button"
+        tabindex="0"
+        on:click={() => selectOption(option.value)}
+        on:keypress={(event) => selectOptionOnKey(event, option.value)}
+    >
+        {option.name}
+    </div>
+{/each}

src/inputFields/_new/fields/TextArea/TextArea.ts

@@ -0,0 +1,38 @@
+import { NewAbstractInputField } from '../../NewAbstractInputField';
+import { InputFieldMDRC } from '../../../../renderChildren/InputFieldMDRC';
+import { isLiteral } from '../../../../utils/Utils';
+import { SvelteComponent } from 'svelte';
+import TextAreaComponent from './TextAreaComponent.svelte';
+import { InputFieldArgumentType } from '../../../InputFieldConfigs';
+
+export class TextArea extends NewAbstractInputField<string, string> {
+	constructor(renderChild: InputFieldMDRC) {
+		super(renderChild);
+	}
+
+	protected filterValue(value: any): string | undefined {
+		return isLiteral(value) ? value?.toString() : undefined;
+	}
+
+	protected getFallbackDefaultValue(): string {
+		return '';
+	}
+
+	protected getSvelteComponent(): typeof SvelteComponent {
+		return TextAreaComponent;
+	}
+
+	protected rawReverseMapValue(value: string): string | undefined {
+		return value;
+	}
+
+	protected rawMapValue(value: string): string {
+		return value;
+	}
+
+	protected getMountArgs(): Record<string, any> {
+		return {
+			placeholder: this.renderChild.getArgument(InputFieldArgumentType.PLACEHOLDER)?.value ?? 'Text',
+		};
+	}
+}

src/inputFields/_new/fields/TextArea/TextAreaComponent.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	export let value: string;
+	export let placeholder: string;
+	export let onValueChange: (value: string) => void;
+
+	export function setValue(v: string): void {
+		value = v;
+	}
+</script>
+
+<textarea tabindex="0" placeholder={placeholder} bind:value={value} on:input={() => onValueChange(value)}></textarea>

src/inputFields/_new/fields/Toggle/ToggleComponent.svelte

@@ -13,7 +13,7 @@
 	}
 
 	function toggleValueOnKey(event: KeyboardEvent) {
-		if (event.code === ' ') {
+		if (event.key === ' ') {
 			toggleValue();
 		}
 	}