update readme + bump metadata lib

Author: mProjectsCode

README.md

@@ -1,73 +1,22 @@
 # Obsidian Meta Bind Plugin
 
-This plugin can create input fields inside your notes and bind them to metadata fields.
+This plugin can create input fields inside your notes and bind them to metadata fields, syncing their contents.
+Allowing you to create things like checkboxes inside your notes that change a metadata field e.g. `done` when checked.
+Or creating a slider inside your movie notes, that syncs up with a metadata field named `rating`.
 
-### New docs
+### Demo
 
-I am currently working on new docs for this plugin.
-https://mprojectscode.github.io/obsidian-meta-bind-plugin-docs
+![](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/tree/master/images/meta-bind-plugin-demo-3.mp4)
 
-### How to use
+### Docs
 
-To create an input field you have to write an inline code block or normal code block starting with `INPUT`. Then in square brackets the type of input field, in round brackets arguments and finally behind a colon the metadata field to bind to.
-
-#### Examples:
-
--   `INPUT[toggle]` will create an unbound toggle
--   `INPUT[slider:rating]` will create a slider bound to the metadata field `rating` of this note
--   `INPUT[text:task#completedOn]` will create a text input bound to the metadata field `completedOn` of the note with the name `task`
-
-The plugin also allows further customization with arguments. So the complete syntax looks like this:
-
-```
-INPUT[input_type(argument_name(argument_value), argument_name_2, ...):file_name_or_path#metadata_field]
-```
-
-For more examples see the `exampleVault` folder.
-
-#### Input field types
-
--   `slider` a slider from 0 to 100 (custom ranges can be set using `minValue` and `maxValue`, see below)
--   `toggle` a toggle element
--   `text` a text field
--   `text_area` a bigger text field
--   `select` a select input field, only for code blocks
--   `multi_select` a multi-select input field, only for code blocks
--   `date` a date input field
--   `date_picker` a date picker
-
-#### Arguments
-
--   `class(class_name)` adds a css class to the input field
--   `addLabels` only for slider, adds labels for the min and max values
--   `minValue(value)` only for slider, sets the min value
--   `maxValue(value)` only for slider, sets the max value
--   `option(value)` only for (multi-)selects, adds an option to the select
--   `title(value)` only for (multi-)selects, adds a title to the select input
--   `alignRight` only for date picker, aligns the date picker popup to the right of the input field
-
-### How to install
-
-You can eiter download it directly through Obsidian's plugin page or you can manually download the zip archive from the latest release here on GitHub.  
-After downloading, extract the archive into the `.obsidian/plugins` folder in your vault.
-
-The folder structure should look like this:
-
-```
-[path to your vault]
-|_ .obsidian
-   |_ plugins
-      |_ obsidian-meta-bind-plugin
-         |_ main.js
-         |_ manifest.json
-         |_ styles.css
-```
+The docs are available [here](https://mprojectscode.github.io/obsidian-meta-bind-plugin-docs).
 
 ### Problems, unexpected behavior or improvement suggestions?
 
 You are more than welcome to open an issue on [GitHub](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues).
 
-#### The sync seems laggy
+#### The sync seems laggy / It takes half a second for the changes to sync
 
 This is intentional. To reduce the load on your hard drive the plugin ony syncs about 5 times a second.
 There is a setting to change the sync interval, but I don't recommend changing it.

exampleVault/.obsidian/plugins/obsidian-meta-bind-plugin/main.js

@@ -1,6 +1,6 @@
-:root {
-	--meta-bind-plugin-border-width: 1px;
-	--meta-bind-plugin-border-radius: 5px;
+body {
+	--meta-bind-plugin-border-width: var(--border-width);
+	--meta-bind-plugin-border-radius: var(--input-radius);
 	--meta-bind-plugin-slider-spacing: 5px;
 	--meta-bind-plugin-select-element-border-width: 5px;
 	--meta-bind-plugin-date-input-year-input-width: 80px;
@@ -87,39 +87,24 @@
 	height: unset;
 	align-self: stretch;
 }
-.meta-bind-plugin-date-input-year-input[type='number']:focus {
-	width: calc(var(--meta-bind-plugin-date-input-year-input-width) + var(--meta-bind-plugin-border-width));
-	height: unset;
-	align-self: stretch;
-}
 
 .meta-bind-plugin-input-element-group {
 }
 
-.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:first-child {
-	border-radius: var(--meta-bind-plugin-border-radius) 0 0 var(--meta-bind-plugin-border-radius);
+.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:focus {
+	z-index: 10;
 }
 
-.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:not(:first-child):not(:last-child):not(:focus) {
-	border-radius: 0;
-	border-left: 0;
+.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:first-child {
+	border-radius: var(--meta-bind-plugin-border-radius) 0 0 var(--meta-bind-plugin-border-radius);
 }
 
-.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:not(:first-child):not(:last-child):focus {
+.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:not(:first-child):not(:last-child) {
 	border-radius: 0;
-	margin-left: calc(var(--meta-bind-plugin-border-width) * -1);
-	z-index: 10;
 }
 
-.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:last-child:not(:focus) {
+.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:last-child {
 	border-radius: 0 var(--meta-bind-plugin-border-radius) var(--meta-bind-plugin-border-radius) 0;
-	border-left: 0;
-}
-
-.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:last-child:focus {
-	border-radius: 0 var(--meta-bind-plugin-border-radius) var(--meta-bind-plugin-border-radius) 0;
-	margin-left: calc(var(--meta-bind-plugin-border-width) * -1);
-	z-index: 10;
 }
 
 .meta-bind-full-width {

exampleVault/.obsidian/plugins/obsidian-meta-bind-plugin/styles.css

@@ -8,7 +8,7 @@ slider2: 6
 text1: Test asdasd
 text_area1: Test teasd
 date1: 2022-05-28
-select: ""
+select: option b
 multi_select:
   - option a
   - option c

exampleVault/examples fg.md

@@ -1,19 +1,9 @@
 ---
-title: >-
-  This is an example of how the meta bind
-  abababababababababababababababababaabbababababababababababababababababab
-
-  asdasdkahjbd
-   adjsnbf o
-  asdoasdasdfm
-
-  asodfnsopdnfosndflskxn slsdf
-
-  sdf sdjfpsdjfpsodjfpsodjfspodjfspodfjspodfspodfjspdofjspdofpsodfj
+title: This is an example of how the meta bind
 select: option a
-multi_select:
-  - option a
-  - option c
-date: Monday, June 20th 2022
+date: Tuesday, June 14th 2022
 time: 19:20
+multi-select:
+  - option b
+  - option c
 ---

exampleVault/other note.md

@@ -34,6 +34,6 @@
 		"typescript": "^4.7.4"
 	},
 	"dependencies": {
-		"@opd-libs/opd-metadata-lib": "^0.0.2"
+		"@opd-libs/opd-metadata-lib": "0.0.3"
 	}
 }

images/meta-bind-plugin-demo-3.mp4

@@ -7,9 +7,7 @@ import { InputFieldArgumentType, InputFieldDeclaration, InputFieldDeclarationPar
 import { MetaBindBindTargetError, MetaBindInternalError } from './utils/Utils';
 import { AbstractInputFieldArgument } from './inputFieldArguments/AbstractInputFieldArgument';
 import { ClassInputFieldArgument } from './inputFieldArguments/ClassInputFieldArgument';
-import { updateOrInsertFieldInTFile } from '@opd-libs/opd-metadata-lib/lib/API';
-import { Internal } from '@opd-libs/opd-metadata-lib/lib/Internal';
-import getMetadataFromFileCache = Internal.getMetadataFromFileCache;
+import { getFrontmatterOfTFile, updateOrInsertFieldInTFile } from '@opd-libs/opd-metadata-lib/lib/API';
 import { validatePath as validateObjectPath } from '@opd-libs/opd-metadata-lib/lib/Utils';
 
 export enum InputFieldMarkdownRenderChildType {
@@ -55,8 +53,7 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 
 			if (this.inputFieldDeclaration.isBound) {
 				this.parseBindTarget();
-				// @ts-ignore `parseBindTarget` sets `bindTargetFile` and `bindTargetMetadataField` or throws an error.
-				this.metaData = getMetadataFromFileCache(this.bindTargetFile, this.plugin);
+				this.metaData = getFrontmatterOfTFile(this.bindTargetFile as TFile, this.plugin);
 			}
 
 			this.inputField = InputFieldFactory.createInputField(this.inputFieldDeclaration.inputFieldType, {

package-lock.json

@@ -5,8 +5,7 @@ import { getFileName, isPath, removeFileEnding } from './utils/Utils';
 import { Logger } from './utils/Logger';
 import { DateParser } from './parsers/DateParser';
 import { InputFieldDeclarationParser } from './parsers/InputFieldDeclarationParser';
-import { Internal } from '@opd-libs/opd-metadata-lib/lib/Internal';
-import getMetadataFromFileCache = Internal.getMetadataFromFileCache;
+import { getFrontmatterOfTFile } from '@opd-libs/opd-metadata-lib/lib/API';
 
 export default class MetaBindPlugin extends Plugin {
 	// @ts-ignore defined in `onload`
@@ -17,8 +16,6 @@ export default class MetaBindPlugin extends Plugin {
 	// @ts-ignore defined in `onload`
 	markDownInputFieldIndex: number;
 
-	frontMatterRexExpPattern = '^(---)\\n[\\s\\S]*?\\n---';
-
 	async onload(): Promise<void> {
 		await this.loadSettings();
 
@@ -96,7 +93,7 @@ export default class MetaBindPlugin extends Plugin {
 
 			if (activeMarkdownInputField.bindTargetFile.path === file.path) {
 				if (metadata === undefined) {
-					metadata = getMetadataFromFileCache(file, this);
+					metadata = getFrontmatterOfTFile(file, this);
 				}
 				activeMarkdownInputField.pushToInputFieldValueUpdateQueue(metadata[activeMarkdownInputField.bindTargetMetadataField]);
 			}