fix editor input clearing, improve performance, reduce input field notify events

Author: mProjectsCode

exampleVault/examples fg.md

@@ -3,30 +3,21 @@ rating: 31
 title: test title test test
 completed: false
 toggle1: true
-slider1: 71
+slider1: 17
 slider2: 8
 text1: Testa
 text_area1: test test test
 date1: Wednesday, July 20th 2022
-select: option b
+select: option c
 nested:
   object: dfgdf
 multi_select:
+  - option a
   - option b
+  - option c
 time1: 10:17
 suggest: test
-editor: |-
-  test **test**
-  [[other note]]
-
-  ## test
-
-  > [!INFO]
-  > this is an info
-
-  `INPUT[slider(addLabels):slider1]`
-
-  `$= dv.current().rating`
+editor: test **test**
 ---
 
 ## Components
@@ -93,10 +84,14 @@ option(option d)
 ```
 
 ### Suggester
-`INPUT[suggester(suggestOption(test), suggestOptionQuery(#test)):suggest]`
+```meta-bind
+INPUT[suggester(suggestOption(test), suggestOptionQuery(#test)):suggest]
+```
 
 ### Editor
-`INPUT[editor:editor]`
+```meta-bind
+INPUT[editor:editor]
+```
 
 ## In callouts
 > quote

exampleVault/other note.md

@@ -1,7 +1,7 @@
 ---
 tags: test
 title: "test test test "
-select: option d
+select: option c
 date: Tuesday, June 21st 2022
 time: 19:20
 multi-select:
@@ -10,4 +10,27 @@ multi-select:
 ---
 
 ## This is another note
-This note is to test syncing to another note.
+This note is to test syncing to another note.
+
+
+### Select
+Select
+```meta-bind
+INPUT[select(
+option(option a),
+option(option b),
+option(option c),
+option(option d)
+):select]
+```
+
+Select with title
+```meta-bind
+INPUT[select(
+title(select with title),
+option(option a),
+option(option b),
+option(option c),
+option(option d)
+):select]
+```

src/InputFieldMarkdownRenderChild.ts

@@ -5,7 +5,7 @@ import { InputFieldFactory } from './inputFields/InputFieldFactory';
 import { InputFieldArgumentType, InputFieldDeclaration, InputFieldDeclarationParser } from './parsers/InputFieldDeclarationParser';
 import { AbstractInputFieldArgument } from './inputFieldArguments/AbstractInputFieldArgument';
 import { ClassInputFieldArgument } from './inputFieldArguments/ClassInputFieldArgument';
-import { traverseObject, validatePath as validateObjectPath } from '@opd-libs/opd-metadata-lib/lib/Utils';
+import { parsePath, traverseObjectByPath } from '@opd-libs/opd-metadata-lib/lib/Utils';
 import { MetaBindBindTargetError, MetaBindInternalError } from './utils/MetaBindErrors';
 import { MetadataFileCache } from './MetadataManager';
 
@@ -26,7 +26,7 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 	fullDeclaration: string;
 	inputFieldDeclaration: InputFieldDeclaration | undefined;
 	bindTargetFile: TFile | undefined;
-	bindTargetMetadataField: string | undefined;
+	bindTargetMetadataPath: string[] | undefined;
 
 	intervalCounter: number;
 	metadataValueUpdateQueue: any[];
@@ -86,15 +86,13 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 		}
 
 		try {
-			validateObjectPath(bindTargetMetadataFieldName);
+			this.bindTargetMetadataPath = parsePath(bindTargetMetadataFieldName);
 		} catch (e) {
 			if (e instanceof Error) {
 				throw new MetaBindBindTargetError(`bind target parsing error: ${e?.message}`);
 			}
 		}
 
-		this.bindTargetMetadataField = bindTargetMetadataFieldName;
-
 		const files: TFile[] = this.plugin.getFilesByName(bindTargetFileName);
 		if (files.length === 0) {
 			throw new MetaBindBindTargetError('bind target file not found');
@@ -106,45 +104,45 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 	}
 
 	registerSelfToMetadataManager(): MetadataFileCache | undefined {
-		if (!this.inputFieldDeclaration?.isBound || !this.bindTargetFile || !this.bindTargetMetadataField) {
+		if (!this.inputFieldDeclaration?.isBound || !this.bindTargetFile || !this.bindTargetMetadataPath || this.bindTargetMetadataPath?.length === 0) {
 			return;
 		}
 
 		return this.plugin.metadataManager.register(
 			this.bindTargetFile,
-			metadata => {
+			value => {
 				if (!this.inputField) {
 					throw new MetaBindInternalError('inputField is undefined, can not update inputField');
 				}
 
-				const value = traverseObject(this.bindTargetMetadataField as string, metadata);
 				if (!this.inputField.isEqualValue(value)) {
 					this.inputField.setValue(value);
 				}
 			},
+			this.bindTargetMetadataPath,
 			this.uuid
 		);
 	}
 
 	unregisterSelfFromMetadataManager(): void {
-		if (!this.inputFieldDeclaration?.isBound || !this.bindTargetFile || !this.bindTargetMetadataField) {
+		if (!this.inputFieldDeclaration?.isBound || !this.bindTargetFile || !this.bindTargetMetadataPath || this.bindTargetMetadataPath?.length === 0) {
 			return;
 		}
 
 		this.plugin.metadataManager.unregister(this.bindTargetFile, this.uuid);
 	}
 
 	updateMetadataManager(value: any): void {
-		if (!this.inputFieldDeclaration?.isBound || !this.bindTargetFile || !this.bindTargetMetadataField) {
+		if (!this.inputFieldDeclaration?.isBound || !this.bindTargetFile || !this.bindTargetMetadataPath || this.bindTargetMetadataPath?.length === 0) {
 			return;
 		}
 
-		this.plugin.metadataManager.updatePropertyInMetadataFileCache(value, this.bindTargetMetadataField, this.bindTargetFile, this.uuid);
+		this.plugin.metadataManager.updatePropertyInMetadataFileCache(value, this.bindTargetMetadataPath, this.bindTargetFile, this.uuid);
 	}
 
 	getInitialValue(): any | undefined {
-		if (this.inputFieldDeclaration?.isBound && this.bindTargetMetadataField) {
-			const value = traverseObject(this.bindTargetMetadataField, this.metadataCache?.metadata);
+		if (this.inputFieldDeclaration?.isBound && this.bindTargetMetadataPath) {
+			const value = traverseObjectByPath(this.bindTargetMetadataPath, this.metadataCache?.metadata);
 			console.debug(`meta-bind | InputFieldMarkdownRenderChild >> setting initial value to ${value} (typeof ${typeof value}) for input field ${this.uuid}`);
 			return value ?? this.inputField?.getDefaultValue();
 		}

src/MetadataManager.ts

@@ -1,15 +1,17 @@
 import { CachedMetadata, TFile } from 'obsidian';
 import MetaBindPlugin from './main';
 import { setFrontmatterOfTFile } from '@opd-libs/opd-metadata-lib/lib/API';
-import { traverseObjectToParent } from '@opd-libs/opd-metadata-lib/lib/Utils';
+import { traverseObjectByPath } from '@opd-libs/opd-metadata-lib/lib/Utils';
 import { Internal } from '@opd-libs/opd-metadata-lib/lib/Internal';
+import { arrayEquals, traverseObjectToParentByPath } from './utils/Utils';
 import getMetaDataFromFileContent = Internal.getMetaDataFromFileContent;
 
 export interface MetadataFileCache {
 	file: TFile;
 	metadata: Record<string, any>;
 	listeners: {
-		onCacheUpdate: (metadata: Record<string, any>) => void;
+		onCacheUpdate: (value: any | undefined) => void;
+		metadataPath: string[];
 		uuid: string;
 	}[];
 	cyclesSinceLastUpdate: number;
@@ -32,24 +34,25 @@ export class MetadataManager {
 		this.interval = window.setInterval(() => this.update(), this.plugin.settings.syncInterval);
 	}
 
-	register(file: TFile, onCacheUpdate: (metadata: Record<string, any>) => void, uuid: string): MetadataFileCache {
+	register(file: TFile, onCacheUpdate: (value: any) => void, metadataPath: string[], uuid: string): MetadataFileCache {
 		const fileCache = this.getCacheForFile(file);
 		if (fileCache) {
-			console.debug(`meta-bind | MetadataManager >> registered ${uuid} to existing file cache ${file.path}`);
-			fileCache.listeners.push({ onCacheUpdate, uuid });
+			console.debug(`meta-bind | MetadataManager >> registered ${uuid} to existing file cache ${file.path} -> ${metadataPath}`);
+			fileCache.listeners.push({ onCacheUpdate, metadataPath, uuid });
 			return fileCache;
 		} else {
-			console.debug(`meta-bind | MetadataManager >> registered ${uuid} to newly created file cache ${file.path}`);
+			console.debug(`meta-bind | MetadataManager >> registered ${uuid} to newly created file cache ${file.path} -> ${metadataPath}`);
 			const c: MetadataFileCache = {
 				file: file,
 				metadata: {},
-				listeners: [{ onCacheUpdate, uuid }],
+				listeners: [{ onCacheUpdate, metadataPath, uuid }],
 				cyclesSinceLastUpdate: 0,
 				changed: false,
 			};
 
 			this.plugin.app.vault.cachedRead(file).then(value => {
 				c.metadata = getMetaDataFromFileContent(value);
+				console.log(`meta-bind | MetadataManager >> loaded metadata for file ${file.path}`, c.metadata);
 				this.notifyListeners(c);
 			});
 
@@ -106,28 +109,34 @@ export class MetadataManager {
 		fileCache.metadata = metadata;
 		fileCache.cyclesSinceLastUpdate = 0;
 
-		this.notifyListeners(fileCache, uuid);
+		this.notifyListeners(fileCache, undefined, uuid);
 	}
 
-	updatePropertyInMetadataFileCache(value: any, path: string, file: TFile, uuid?: string | undefined): void {
-		console.debug(`meta-bind | MetadataManager >> updating ${path} in ${file.path} metadata cache to`, value);
+	updatePropertyInMetadataFileCache(value: any, pathParts: string[], file: TFile, uuid?: string | undefined): void {
+		console.debug(`meta-bind | MetadataManager >> updating ${pathParts} in ${file.path} metadata cache to`, value);
+		console.trace();
 
 		const fileCache = this.getCacheForFile(file);
 		if (!fileCache) {
 			return;
 		}
 
-		const { parent, child } = traverseObjectToParent(path, fileCache.metadata);
+		const { parent, child } = traverseObjectToParentByPath(pathParts, fileCache.metadata);
 
 		if (parent.value === undefined) {
-			throw Error(`The parent of "${path}" does not exist in Object, please create the parent first`);
+			throw Error(`The parent of "${pathParts}" does not exist in Object, please create the parent first`);
+		}
+
+		if (child.value === value) {
+			console.debug(`meta-bind | MetadataManager >> skipping redundant update of ${pathParts} in ${file.path} metadata cache`, value);
+			return;
 		}
 
 		parent.value[child.key] = value;
 		fileCache.cyclesSinceLastUpdate = 0;
 		fileCache.changed = true;
 
-		this.notifyListeners(fileCache, uuid);
+		this.notifyListeners(fileCache, pathParts, uuid);
 	}
 
 	updateMetadataFileCacheOnFrontmatterUpdate(file: TFile, data: string, cache: CachedMetadata): void {
@@ -152,13 +161,26 @@ export class MetadataManager {
 		this.notifyListeners(fileCache);
 	}
 
-	notifyListeners(fileCache: MetadataFileCache, exceptUuid?: string | undefined): void {
+	notifyListeners(fileCache: MetadataFileCache, metadataPath?: string[] | undefined, exceptUuid?: string | undefined): void {
+		let value;
+		if (metadataPath) {
+			value = traverseObjectByPath(metadataPath, fileCache.metadata);
+		}
+
 		for (const listener of fileCache.listeners) {
 			if (exceptUuid && exceptUuid === listener.uuid) {
 				continue;
 			}
-			console.debug(`meta-bind | MetadataManager >> notifying input field ${listener.uuid} of updated metadata`);
-			listener.onCacheUpdate(fileCache.metadata);
+
+			if (metadataPath) {
+				if (arrayEquals(metadataPath, listener.metadataPath)) {
+					console.debug(`meta-bind | MetadataManager >> notifying input field ${listener.uuid} of updated metadata`);
+					listener.onCacheUpdate(value);
+				}
+			} else {
+				console.debug(`meta-bind | MetadataManager >> notifying input field ${listener.uuid} of updated metadata`);
+				listener.onCacheUpdate(traverseObjectByPath(listener.metadataPath, fileCache.metadata));
+			}
 		}
 	}
 }

src/inputFields/DatePicker/DatePickerInputField.ts

@@ -82,9 +82,8 @@ export class DatePickerInputField extends AbstractInputField {
 			props: {
 				dateFormat: this.inputFieldMarkdownRenderChild.plugin.settings.preferredDateFormat,
 				showDatePicker: () => this.showDatePicker(),
+				selectedDate: this.date,
 			},
 		});
-
-		this.component.updateValue(this.date);
 	}
 }

src/inputFields/Editor/EditorInput.svelte

@@ -5,8 +5,8 @@
 
 	export let onValueChange: (value: any) => void;
 	export let editorInput: EditorInputField;
+	export let value: string;
 
-	let value: string;
 	let focus: boolean = false;
 	let renderEl: HTMLElement;
 	let inputEl: HTMLElement;
@@ -20,18 +20,17 @@
 
 	export function updateValue(v: string): void {
 		value = v;
-		renderEl.innerHTML = '';
 		render();
 	}
 
-	function render() {
+	export function render() {
+		renderEl.innerHTML = '';
 		MarkdownRenderer.renderMarkdown(value, renderEl, editorInput.inputFieldMarkdownRenderChild.filePath, editorInput.inputFieldMarkdownRenderChild);
 	}
 
 	function focusOut(event: MouseEvent) {
 		renderEl.toggleVisibility(true);
 		inputEl.toggleVisibility(false);
-		renderEl.innerHTML = '';
 		render();
 	}
 
@@ -41,18 +40,15 @@
 		inputEl.toggleVisibility(true);
 		inputEl.focus();
 	}
-
-	function log() {
-		console.log('focus');
-	}
 </script>
 
 <style>
 	.editor-input {
-		width:    100%;
-		height:   500px;
-		padding:  0;
-		position: relative;
+		background: var(--background-secondary);
+		width:      100%;
+		height:     500px;
+		padding:    0;
+		position:   relative;
 	}
 
 	.editor-input > textarea {

src/inputFields/Editor/EditorInputField.ts

@@ -4,6 +4,7 @@ import { InputFieldMarkdownRenderChild } from '../../InputFieldMarkdownRenderChi
 import { MetaBindInternalError } from '../../utils/MetaBindErrors';
 
 export class EditorInputField extends AbstractInputField {
+	static allowInlineCodeBlock: boolean = false;
 	container: HTMLDivElement | undefined;
 	component: EditorInput | undefined;
 	value: string;
@@ -51,9 +52,10 @@ export class EditorInputField extends AbstractInputField {
 			props: {
 				onValueChange: this.onValueChange.bind(this),
 				editorInput: this,
+				value: this.value,
 			},
 		});
 
-		this.component.updateValue(this.value);
+		this.component.render();
 	}
 }