metadata button action

Author: mProjectsCode

exampleVault/Button Example.md

@@ -1,3 +1,6 @@
+---
+count: 3
+---
 Meta Bind is getting Buttons
 
 text `BUTTON[docs-button]` text
@@ -153,6 +156,48 @@ actions:
 
 ```
 
+### Modifying Front-matter
+
+```meta-bind-button
+label: "+1"
+hidden: true
+id: "count-increment"
+style: default
+actions:
+  - type: updateMetadata
+    bindTarget: count
+    evaluate: true
+    value: x + 1
+
+```
+
+```meta-bind-button
+label: "-1"
+hidden: true
+id: "count-decrement"
+style: default
+actions:
+  - type: updateMetadata
+    bindTarget: count
+    evaluate: true
+    value: x - 1
+
+```
+
+```meta-bind-button
+label: "Reset"
+hidden: true
+id: "count-reset"
+style: default
+actions:
+  - type: updateMetadata
+    bindTarget: count
+    evaluate: false
+    value: "0"
+
+```
+
+`BUTTON[count-decrement, count-reset, count-increment]` `VIEW[{count}]`
 
 ## Invalid Buttons
 
@@ -167,4 +212,4 @@ actions:
   - type: command
     command: obsidian-meta-bind-plugin:open-help
 
-```
+```

src/config/ButtonConfig.ts

@@ -12,6 +12,7 @@ export enum ButtonActionType {
 	INPUT = 'input',
 	SLEEP = 'sleep',
 	TEMPLATER_CREATE_NOTE = 'templaterCreateNote',
+	UPDATE_METADATA = 'updateMetadata',
 }
 
 export interface CommandButtonAction {
@@ -47,13 +48,21 @@ export interface TemplaterCreateNoteButtonAction {
 	openNote?: boolean;
 }
 
+export interface UpdateMetadataButtonAction {
+	type: ButtonActionType.UPDATE_METADATA;
+	bindTarget: string;
+	evaluate: boolean;
+	value: string;
+}
+
 export type ButtonAction =
 	| CommandButtonAction
 	| JSButtonAction
 	| OpenButtonAction
 	| InputButtonAction
 	| SleepButtonAction
-	| TemplaterCreateNoteButtonAction;
+	| TemplaterCreateNoteButtonAction
+	| UpdateMetadataButtonAction;
 
 export interface ButtonConfig {
 	label: string;

src/config/ButtonConfigValidators.ts

@@ -11,39 +11,45 @@ import {
 	type OpenButtonAction,
 	type SleepButtonAction,
 	type TemplaterCreateNoteButtonAction,
+	type UpdateMetadataButtonAction,
 } from './ButtonConfig';
 
-export const ButtonConfigValidators = schemaForType<CommandButtonAction>()(
+export const V_CommandButtonAction = schemaForType<CommandButtonAction>()(
 	z.object({
 		type: z.literal(ButtonActionType.COMMAND),
 		command: z.string(),
 	}),
 );
-export const JSButtonActionValidator = schemaForType<JSButtonAction>()(
+
+export const V_JSButtonAction = schemaForType<JSButtonAction>()(
 	z.object({
 		type: z.literal(ButtonActionType.JS),
 		file: z.string(),
 	}),
 );
-export const OpenButtonActionValidator = schemaForType<OpenButtonAction>()(
+
+export const V_OpenButtonAction = schemaForType<OpenButtonAction>()(
 	z.object({
 		type: z.literal(ButtonActionType.OPEN),
 		link: z.string(),
 	}),
 );
-export const InputButtonActionValidator = schemaForType<InputButtonAction>()(
+
+export const V_InputButtonAction = schemaForType<InputButtonAction>()(
 	z.object({
 		type: z.literal(ButtonActionType.INPUT),
 		str: z.string(),
 	}),
 );
-export const SleepButtonActionValidator = schemaForType<SleepButtonAction>()(
+
+export const V_SleepButtonAction = schemaForType<SleepButtonAction>()(
 	z.object({
 		type: z.literal(ButtonActionType.SLEEP),
 		ms: z.number(),
 	}),
 );
-export const TemplaterCreateNoteButtonActionValidator = schemaForType<TemplaterCreateNoteButtonAction>()(
+
+export const V_TemplaterCreateNoteButtonAction = schemaForType<TemplaterCreateNoteButtonAction>()(
 	z.object({
 		type: z.literal(ButtonActionType.TEMPLATER_CREATE_NOTE),
 		templateFile: z.string(),
@@ -52,28 +58,40 @@ export const TemplaterCreateNoteButtonActionValidator = schemaForType<TemplaterC
 		openNote: z.boolean().optional(),
 	}),
 );
-export const ButtonActionValidator = schemaForType<ButtonAction>()(
+export const V_UpdateMetadataButtonAction = schemaForType<UpdateMetadataButtonAction>()(
+	z.object({
+		type: z.literal(ButtonActionType.UPDATE_METADATA),
+		bindTarget: z.coerce.string(),
+		evaluate: z.boolean(),
+		value: z.coerce.string(),
+	}),
+);
+
+export const V_ButtonAction = schemaForType<ButtonAction>()(
 	z.union([
-		ButtonConfigValidators,
-		JSButtonActionValidator,
-		OpenButtonActionValidator,
-		InputButtonActionValidator,
-		SleepButtonActionValidator,
-		TemplaterCreateNoteButtonActionValidator,
+		V_CommandButtonAction,
+		V_JSButtonAction,
+		V_OpenButtonAction,
+		V_InputButtonAction,
+		V_SleepButtonAction,
+		V_TemplaterCreateNoteButtonAction,
+		V_UpdateMetadataButtonAction,
 	]),
 );
-export const ButtonStyleValidator = z.nativeEnum(ButtonStyleType);
-export const ButtonConfigValidator = schemaForType<ButtonConfig>()(
+
+export const V_ButtonStyleType = z.nativeEnum(ButtonStyleType);
+
+export const V_ButtonConfig = schemaForType<ButtonConfig>()(
 	z
 		.object({
 			label: z.string(),
-			style: ButtonStyleValidator,
+			style: V_ButtonStyleType,
 			class: z.string().optional(),
 			tooltip: z.string().optional(),
 			id: z.string().optional(),
 			hidden: z.boolean().optional(),
-			action: ButtonActionValidator.optional(),
-			actions: ButtonActionValidator.array().optional(),
+			action: V_ButtonAction.optional(),
+			actions: V_ButtonAction.array().optional(),
 		})
 		.superRefine(oneOf('action', 'actions')),
 );

src/fields/button/ButtonActionRunner.ts

@@ -8,10 +8,12 @@ import {
 	type OpenButtonAction,
 	type SleepButtonAction,
 	type TemplaterCreateNoteButtonAction,
+	type UpdateMetadataButtonAction,
 } from '../../config/ButtonConfig';
 import { MDLinkParser } from '../../parsers/MarkdownLinkParser';
 import { type IPlugin } from '../../IPlugin';
-import { openURL } from '../../utils/Utils';
+import { getUUID, openURL } from '../../utils/Utils';
+import { Signal } from '../../utils/Signal';
 
 export class ButtonActionRunner {
 	plugin: IPlugin;
@@ -58,6 +60,13 @@ export class ButtonActionRunner {
 				fileName: '',
 				openNote: true,
 			} satisfies TemplaterCreateNoteButtonAction;
+		} else if (type === ButtonActionType.UPDATE_METADATA) {
+			return {
+				type: ButtonActionType.UPDATE_METADATA,
+				bindTarget: '',
+				evaluate: false,
+				value: '',
+			} satisfies UpdateMetadataButtonAction;
 		}
 
 		throw new Error(`Unknown button action type: ${type}`);
@@ -82,6 +91,9 @@ export class ButtonActionRunner {
 		} else if (action.type === ButtonActionType.TEMPLATER_CREATE_NOTE) {
 			await this.runTemplaterCreateNoteAction(action);
 			return;
+		} else if (action.type === ButtonActionType.UPDATE_METADATA) {
+			await this.runUpdateMetadataAction(action, filePath);
+			return;
 		}
 
 		throw new Error(`Unknown button action type`);
@@ -120,4 +132,16 @@ export class ButtonActionRunner {
 	async runTemplaterCreateNoteAction(_action: TemplaterCreateNoteButtonAction): Promise<void> {
 		throw new Error('Not supported');
 	}
+
+	async runUpdateMetadataAction(action: UpdateMetadataButtonAction, filePath: string): Promise<void> {
+		const bindTarget = this.plugin.api.bindTargetParser.parseAndValidateBindTarget(action.bindTarget, filePath);
+		const uuid = getUUID();
+		const signal = new Signal<unknown>(undefined);
+		const subscription = this.plugin.metadataManager.subscribe(uuid, signal, bindTarget, () => {});
+		subscription.applyUpdate({
+			value: action.value,
+			evaluate: action.evaluate,
+		});
+		subscription.unsubscribe();
+	}
 }

src/fields/button/ButtonBuilderModalComponent.svelte

@@ -24,6 +24,8 @@
 	let buttonConfig: ButtonConfig = {
 		label: 'This is a button',
 		hidden: false,
+		class: '',
+		tooltip: '',
 		id: '',
 		style: ButtonStyleType.DEFAULT,
 		actions: [],
@@ -92,6 +94,8 @@
 			return 'Sleep for Some Time';
 		} else if (actionType === ButtonActionType.TEMPLATER_CREATE_NOTE) {
 			return 'Create a New Note Using Templater';
+		} else if (actionType === ButtonActionType.UPDATE_METADATA) {
+			return 'Update Metadata';
 		}
 
 		return 'CHANGE ME';
@@ -112,6 +116,20 @@
 	</select>
 </SettingComponent>
 
+<SettingComponent
+	name="CSS Classes"
+	description="A list of CSS classes to add to the button. Multiple classes should be separated by a space."
+>
+	<input type="text" bind:value={buttonConfig.class} />
+</SettingComponent>
+
+<SettingComponent
+	name="Tooltip"
+	description="A tooltip to show when hovering the button. If not set, the button label will be shown instead."
+>
+	<input type="text" bind:value={buttonConfig.tooltip} />
+</SettingComponent>
+
 <SettingComponent name="ID" description="An ID that allows the button to be referenced in inline buttons.">
 	<input type="text" bind:value={buttonConfig.id} />
 </SettingComponent>
@@ -186,12 +204,7 @@ Add action of type
 	{/if}
 
 	{#if action.type === ButtonActionType.TEMPLATER_CREATE_NOTE}
-		<p>
-			Remove Action
-			<Button variant="destructive" on:click={() => removeAction(i)}>
-				<Icon iconName="x"></Icon>
-			</Button>
-		</p>
+		<Button variant="destructive" on:click={() => removeAction(i)}>Remove Action</Button>
 
 		<SettingComponent
 			name="Template File: {action.templateFile || 'none'}"
@@ -217,6 +230,22 @@ Add action of type
 			<Toggle bind:checked={action.openNote}></Toggle>
 		</SettingComponent>
 	{/if}
+
+	{#if action.type === ButtonActionType.UPDATE_METADATA}
+		<Button variant="destructive" on:click={() => removeAction(i)}>Remove Action</Button>
+
+		<SettingComponent name="Metadata Property" description="The metadata property in form of a bind target.">
+			<input type="text" bind:value={action.bindTarget} placeholder="some value" />
+		</SettingComponent>
+
+		<SettingComponent name="Value" description="The new value.">
+			<input type="text" bind:value={action.value} placeholder="some value" />
+		</SettingComponent>
+
+		<SettingComponent name="Evaluate" description="Whether to evaluate the value as a JS expression.">
+			<Toggle bind:checked={action.evaluate}></Toggle>
+		</SettingComponent>
+	{/if}
 {/each}
 
 <h4>Preview</h4>

src/fields/button/ButtonField.ts

@@ -1,9 +1,10 @@
 import { type ButtonConfig } from '../../config/ButtonConfig';
 import ButtonComponent from '../../utils/components/ButtonComponent.svelte';
 import { type IPlugin } from '../../IPlugin';
-import { ButtonConfigValidator } from '../../config/ButtonConfigValidators';
+import { V_ButtonConfig } from '../../config/ButtonConfigValidators';
 import { ErrorLevel, MetaBindButtonError } from '../../utils/errors/MetaBindErrors';
 import { DocsUtils } from '../../utils/DocsUtils';
+import { isTruthy } from '../../utils/Utils';
 
 export class ButtonField {
 	plugin: IPlugin;
@@ -33,7 +34,7 @@ export class ButtonField {
 			props: {
 				variant: config.style,
 				label: config.label,
-				tooltip: config.tooltip ?? config.label,
+				tooltip: isTruthy(config.tooltip) ? config.tooltip : config.label,
 				onClick: async (): Promise<void> => {
 					await this.plugin.api.buttonActionRunner.runButtonAction(config, this.filePath);
 				},
@@ -44,7 +45,7 @@ export class ButtonField {
 	public mount(container: HTMLElement): void {
 		container.empty();
 		container.addClass('mb-button', this.inline ? 'mb-button-inline' : 'mb-button-block');
-		const validationResult = ButtonConfigValidator.safeParse(this.unvalidatedConfig);
+		const validationResult = V_ButtonConfig.safeParse(this.unvalidatedConfig);
 
 		if (!validationResult.success) {
 			throw new MetaBindButtonError({
@@ -68,7 +69,7 @@ export class ButtonField {
 		}
 
 		if (this.config.class) {
-			container.addClass(...this.config.class.split(' '));
+			container.addClass(...this.config.class.split(' ').filter(x => x !== ''));
 		}
 
 		this.renderButton(container);

src/fields/inputFields/AbstractInputField.ts

@@ -156,7 +156,7 @@ export abstract class AbstractInputField<MetadataValueType, ComponentValueType>
 	}
 
 	public unmount(): void {
-		this.computedSignal.listeners = [];
+		this.computedSignal.unregisterAllListeners();
 		this.metadataSubscription?.unsubscribe();
 
 		this.inputFieldComponent.unmount();

src/fields/inputFields/InputFieldComponent.ts

@@ -55,7 +55,7 @@ export class InputFieldComponent<Value> extends Notifier<Value, Listener<Value>>
 	 * This unmounts the component.
 	 */
 	public unmount(): void {
-		this.listeners = [];
+		this.unregisterAllListeners();
 		this.svelteComponentInstance?.$destroy();
 
 		this.mounted = false;