list input field

Author: mProjectsCode

exampleVault/Input Fields/List.md

@@ -0,0 +1,12 @@
+---
+list:
+  - apple
+  - banana
+  - berries
+---
+
+
+```meta-bind
+INPUT[list:list]
+```
+

exampleVault/View Fields/Advanced Example/Note 1.md

@@ -0,0 +1,24 @@
+---
+added:
+  - "1"
+  - "2"
+removed:
+  - "1"
+---
+# Added
+
+```meta-bind
+INPUT[list:added]
+```
+
+# Removed
+
+```meta-bind
+INPUT[list:removed]
+```
+
+# Total
+
+```meta-bind-js
+asdasd
+```

exampleVault/View Fields/Advanced Example/Note 2.md

@@ -0,0 +1,25 @@
+---
+added:
+  - "3"
+  - "4"
+removed:
+  - "2"
+  - "3"
+---
+# Added
+
+```meta-bind
+INPUT[list:added]
+```
+
+# Removed
+
+```meta-bind
+INPUT[list:removed]
+```
+
+# Total
+
+```meta-bind-js
+asdasd
+```

exampleVault/View Fields/Advanced Example/Note 3.md

@@ -0,0 +1,25 @@
+---
+added:
+  - "5"
+  - "4"
+removed:
+  - "4"
+---
+
+# Added
+
+```meta-bind
+INPUT[list:added]
+```
+
+# Removed
+
+```meta-bind
+INPUT[list:removed]
+```
+
+# Total
+
+```meta-bind-js
+asdasd
+```

package-lock.json

@@ -45,7 +45,10 @@
 		"@codemirror/language": "https://github.com/lishid/cm-language",
 		"@opd-libs/opd-metadata-lib": "0.0.4",
 		"@opd-libs/opd-utils-lib": "0.0.2",
+		"@popperjs/core": "^2.11.8",
 		"esbuild-plugin-conditional-build": "^1.0.2",
-		"mathjs": "^11.8.0"
+		"mathjs": "^11.8.0",
+		"obsidian-svelte": "^0.1.9",
+		"svelte-portal": "^2.2.0"
 	}
 }

package.json

@@ -130,7 +130,7 @@ export function createMarkdownRenderChildWidgetEditorPlugin(plugin: MetaBindPlug
 			}
 
 			/**
-			 * reads the node, returning it's content and widgetType.
+			 * reads the node, returning its content and widgetType.
 			 *
 			 * @param view
 			 * @param from

src/cm6/Cm6_ViewPlugin.ts

@@ -9,7 +9,7 @@ export abstract class AbstractInputField {
 	constructor(inputFieldMDRC: InputFieldMDRC) {
 		this.renderChild = inputFieldMDRC;
 
-		this.onValueChange = (value: any) => {
+		this.onValueChange = (value: any): void => {
 			console.debug(`meta-bind | input field on value change`, value);
 			this.renderChild.readSignal.set(value);
 		};

src/inputFields/AbstractInputField.ts

@@ -1,23 +1,24 @@
-import { ToggleInputField } from './ToggleInputField';
+import { ToggleInputField } from './fields/ToggleInputField';
 import { InputFieldMDRC, RenderChildType } from '../renderChildren/InputFieldMDRC';
-import { TextInputField } from './TextInputField';
-import { SliderInputField } from './SliderInputField';
-import { TextAreaInputField } from './TextAreaInputField';
-import { SelectInputField } from './SelectInputField';
-import { MultiSelectInputField } from './MultiSelectInputField';
-import { DateInputField } from './DateInputField';
-import { TimeInputField } from './TimeInputField';
+import { TextInputField } from './fields/TextInputField';
+import { SliderInputField } from './fields/SliderInputField';
+import { TextAreaInputField } from './fields/TextAreaInputField';
+import { SelectInputField } from './fields/SelectInputField';
+import { MultiSelectInputField } from './fields/MultiSelectInputField';
+import { DateInputField } from './fields/DateInputField';
+import { TimeInputField } from './fields/TimeInputField';
 import { AbstractInputField } from './AbstractInputField';
 import { InputFieldType } from '../parsers/InputFieldDeclarationParser';
-import { DatePickerInputField } from './DatePicker/DatePickerInputField';
-import { NumberInputField } from './NumberInputField';
-import { SuggestInputField } from './Suggest/SuggestInputField';
+import { DatePickerInputField } from './fields/DatePicker/DatePickerInputField';
+import { NumberInputField } from './fields/NumberInputField';
+import { SuggestInputField } from './fields/Suggest/SuggestInputField';
 import { ErrorLevel, MetaBindParsingError } from '../utils/errors/MetaBindErrors';
-import { EditorInputField } from './Editor/EditorInputField';
-import { ImageSuggestInputField } from './ImageSuggest/ImageSuggestInputField';
+import { EditorInputField } from './fields/Editor/EditorInputField';
+import { ImageSuggestInputField } from './fields/ImageSuggest/ImageSuggestInputField';
 import MetaBindPlugin from '../main';
-import { ProgressBarInputField } from './ProgressBar/ProgressBarInputField';
-import { InlineSelectInputField } from './InlineSelectInputField';
+import { ProgressBarInputField } from './fields/ProgressBar/ProgressBarInputField';
+import { InlineSelectInputField } from './fields/InlineSelectInputField';
+import { ListInputField } from './fields/List/ListInputField';
 
 export class InputFieldFactory {
 	static allowCodeBlockMap: Record<string, { block: boolean; inline: boolean }> = {
@@ -81,6 +82,10 @@ export class InputFieldFactory {
 			block: InlineSelectInputField.allowBlock,
 			inline: InlineSelectInputField.allowInline,
 		},
+		[InputFieldType.LIST]: {
+			block: ListInputField.allowBlock,
+			inline: ListInputField.allowInline,
+		},
 	};
 
 	static createInputField(inputFieldType: InputFieldType, args: { renderChildType: RenderChildType; inputFieldMDRC: InputFieldMDRC }): AbstractInputField | undefined {
@@ -118,6 +123,8 @@ export class InputFieldFactory {
 			return new ProgressBarInputField(args.inputFieldMDRC);
 		} else if (inputFieldType === InputFieldType.INLINE_SELECT) {
 			return new InlineSelectInputField(args.inputFieldMDRC);
+		} else if (inputFieldType === InputFieldType.LIST) {
+			return new ListInputField(args.inputFieldMDRC);
 		}
 
 		return undefined;

src/inputFields/InputFieldFactory.ts

@@ -1,8 +1,8 @@
-import { AbstractInputField } from './AbstractInputField';
+import { AbstractInputField } from '../AbstractInputField';
 import { DropdownComponent, moment, TextComponent } from 'obsidian';
-import { DateParser } from '../parsers/DateParser';
-import { ErrorLevel, MetaBindInternalError, MetaBindValueError } from '../utils/errors/MetaBindErrors';
-import { InputFieldMDRC } from '../renderChildren/InputFieldMDRC';
+import { DateParser } from '../../parsers/DateParser';
+import { ErrorLevel, MetaBindInternalError, MetaBindValueError } from '../../utils/errors/MetaBindErrors';
+import { InputFieldMDRC } from '../../renderChildren/InputFieldMDRC';
 
 export class DateInputField extends AbstractInputField {
 	container: HTMLDivElement | undefined;