start of #187 and #184

Author: mProjectsCode

exampleVault/Button Example.md

@@ -210,6 +210,10 @@ actions:
 
 `BUTTON[count-decrement, count-reset, count-increment]` `VIEW[{count}]`
 
+## Button Templates
+
+`BUTTON[test-id]`
+
 ## Invalid Buttons
 
 ```meta-bind-button
@@ -234,4 +238,4 @@ actions:
   - type: command
     command: obsidian-meta-bind-plugin:open-help
 
-```
+```

src/EditorMenu.ts

@@ -49,13 +49,13 @@ export function createEditorMenu(menu: Menu, editor: Editor, plugin: MetaBindPlu
 		mbSubmenu.addItem(buttonItem => {
 			buttonItem.setTitle('Button');
 			buttonItem.onClick(() => {
-				new ButtonBuilderModal(
-					plugin,
-					config => {
+				new ButtonBuilderModal({
+					plugin: plugin,
+					onOkay: (config): void => {
 						insetAtCursor(editor, `\`\`\`meta-bind-button\n${stringifyYaml(config)}\n\`\`\``);
 					},
-					'Insert',
-				).open();
+					submitText: 'Insert',
+				}).open();
 			});
 		});
 	});

src/api/API.ts

@@ -351,7 +351,7 @@ export class API implements IAPI {
 			return this.createExcludedField(containerEl, filePath, component);
 		}
 
-		const button = new ButtonMDRC(containerEl, fullDeclaration, this.plugin, filePath, getUUID());
+		const button = new ButtonMDRC(containerEl, fullDeclaration, this.plugin, filePath, getUUID(), false);
 		component.addChild(button);
 
 		return button;

src/fields/button/ButtonActionRunner.ts

@@ -2,6 +2,7 @@ import {
 	type ButtonAction,
 	ButtonActionType,
 	type ButtonConfig,
+	ButtonStyleType,
 	type CommandButtonAction,
 	type InputButtonAction,
 	type JSButtonAction,
@@ -22,6 +23,18 @@ export class ButtonActionRunner {
 		this.plugin = plugin;
 	}
 
+	createDefaultButtonConfig(): ButtonConfig {
+		return {
+			label: 'This is a button',
+			hidden: false,
+			class: '',
+			tooltip: '',
+			id: '',
+			style: ButtonStyleType.DEFAULT,
+			actions: [],
+		};
+	}
+
 	async runButtonAction(buttonConfig: ButtonConfig, filePath: string): Promise<void> {
 		try {
 			if (buttonConfig.action) {

src/fields/button/ButtonBuilderModal.ts

@@ -3,17 +3,26 @@ import type MetaBindPlugin from '../../main';
 import ButtonBuilderModalComponent from './ButtonBuilderModalComponent.svelte';
 import { type ButtonConfig } from '../../config/ButtonConfig';
 
+export interface ButtonBuilderModalOptions {
+	plugin: MetaBindPlugin;
+	onOkay: (config: ButtonConfig) => void;
+	submitText: string;
+	config?: ButtonConfig;
+}
+
 export class ButtonBuilderModal extends Modal {
 	plugin: MetaBindPlugin;
 	component?: ButtonBuilderModalComponent;
 	onOkay: (config: ButtonConfig) => void;
 	submitText: string;
+	config?: ButtonConfig;
 
-	constructor(plugin: MetaBindPlugin, onOkay: (config: ButtonConfig) => void, submitText: string) {
-		super(plugin.app);
-		this.plugin = plugin;
-		this.onOkay = onOkay;
-		this.submitText = submitText;
+	constructor(options: ButtonBuilderModalOptions) {
+		super(options.plugin.app);
+		this.plugin = options.plugin;
+		this.onOkay = options.onOkay;
+		this.submitText = options.submitText;
+		this.config = options.config;
 	}
 
 	public onOpen(): void {
@@ -26,6 +35,7 @@ export class ButtonBuilderModal extends Modal {
 			target: this.contentEl,
 			props: {
 				modal: this,
+				buttonConfig: this.config ?? this.plugin.api.buttonActionRunner.createDefaultButtonConfig(),
 			},
 		});
 	}

src/fields/button/ButtonBuilderModalComponent.svelte

@@ -21,15 +21,8 @@
 	import Toggle from '../../utils/components/Toggle.svelte';
 
 	export let modal: ButtonBuilderModal;
-	let buttonConfig: ButtonConfig = {
-		label: 'This is a button',
-		hidden: false,
-		class: '',
-		tooltip: '',
-		id: '',
-		style: ButtonStyleType.DEFAULT,
-		actions: [],
-	};
+	export let buttonConfig: ButtonConfig;
+
 	let buttonEl: HTMLElement;
 	let buttonMDRC: ButtonMDRC;
 	let addActionType: ButtonActionType;
@@ -44,7 +37,7 @@
 		buttonMDRC?.unload();
 		if (el) {
 			el.empty();
-			buttonMDRC = new ButtonMDRC(el, stringifyYaml(config), modal.plugin, '', getUUID());
+			buttonMDRC = new ButtonMDRC(el, stringifyYaml(config), modal.plugin, '', getUUID(), true);
 			buttonMDRC.load();
 		}
 	}

src/fields/button/ButtonField.ts

@@ -14,13 +14,15 @@ export class ButtonField {
 	inline: boolean;
 	buttonComponent?: ButtonComponent;
 	config: ButtonConfig | undefined;
+	isPreview: boolean;
 
-	constructor(plugin: IPlugin, config: unknown, filePath: string, inline: boolean) {
+	constructor(plugin: IPlugin, config: unknown, filePath: string, inline: boolean, isPreview: boolean) {
 		this.plugin = plugin;
 		this.unvalidatedConfig = config;
 		this.filePath = filePath;
 		this.inline = inline;
 		this.config = undefined;
+		this.isPreview = isPreview;
 	}
 
 	private renderButton(container: HTMLElement): void {
@@ -66,7 +68,7 @@ export class ButtonField {
 
 		this.config = validationResult.data;
 
-		if (!this.inline) {
+		if (!this.inline && !this.isPreview) {
 			if (this.config.id) {
 				this.plugin.api.buttonManager.addButton(this.filePath, this.config);
 			}

src/fields/button/ButtonManager.ts

@@ -1,13 +1,54 @@
 import { type ButtonConfig } from '../../config/ButtonConfig';
 import { getUUID } from '../../utils/Utils';
+import { ErrorCollection } from '../../utils/errors/ErrorCollection';
+import { ErrorLevel, MetaBindButtonError } from '../../utils/errors/MetaBindErrors';
 
 export class ButtonManager {
 	buttons: Map<string, Map<string, ButtonConfig>>;
 	buttonLoadListeners: Map<string, Map<string, Map<string, (config: ButtonConfig) => void>>>;
+	buttonTemplates: Map<string, ButtonConfig>;
 
 	constructor() {
 		this.buttons = new Map();
 		this.buttonLoadListeners = new Map();
+		this.buttonTemplates = new Map();
+	}
+
+	public setButtonTemplates(buttonTemplates: ButtonConfig[]): ErrorCollection {
+		const idSet = new Set<string>();
+
+		const errorCollection = new ErrorCollection('ButtonManager');
+
+		this.buttonTemplates.clear();
+
+		for (const buttonTemplate of buttonTemplates) {
+			if (buttonTemplate.id === undefined || buttonTemplate.id === '') {
+				errorCollection.add(
+					new MetaBindButtonError({
+						errorLevel: ErrorLevel.ERROR,
+						cause: `Button with label "${buttonTemplate.label}" has no id, but button templates must have an id.`,
+						effect: 'Button templates could not be saved.',
+					}),
+				);
+			} else if (idSet.has(buttonTemplate.id)) {
+				errorCollection.add(
+					new MetaBindButtonError({
+						errorLevel: ErrorLevel.ERROR,
+						cause: `Button id "${buttonTemplate.id}" is not unique. The same id is used by multiple buttons.`,
+						effect: 'Button templates could not be saved.',
+					}),
+				);
+			} else {
+				idSet.add(buttonTemplate.id);
+				this.buttonTemplates.set(buttonTemplate.id, buttonTemplate);
+			}
+		}
+
+		if (errorCollection.hasErrors()) {
+			this.buttonTemplates.clear();
+		}
+
+		return errorCollection;
 	}
 
 	public registerButtonLoadListener(
@@ -81,16 +122,24 @@ export class ButtonManager {
 	}
 
 	public addButton(filePath: string, button: ButtonConfig): void {
-		if (button.id === undefined) {
+		if (button.id === undefined || button.id === '') {
 			throw new Error('ButtonManager | button id is undefined');
 		}
 
+		if (this.buttonTemplates.has(button.id)) {
+			throw new Error(`ButtonManager | button with id "${button.id}" already exists in the button templates`);
+		}
+
 		if (!this.buttons.has(filePath)) {
 			this.buttons.set(filePath, new Map());
 		}
 
 		const fileButtons = this.buttons.get(filePath)!;
 
+		if (fileButtons.has(button.id)) {
+			throw new Error(`ButtonManager | button with id "${button.id}" already exists`);
+		}
+
 		fileButtons.set(button.id, button);
 		this.notifyButtonLoadListeners(filePath, button.id);
 	}
@@ -100,6 +149,10 @@ export class ButtonManager {
 	}
 
 	public getButton(filePath: string, buttonId: string): ButtonConfig | undefined {
+		if (this.buttonTemplates.has(buttonId)) {
+			return this.buttonTemplates.get(buttonId);
+		}
+
 		const fileButtons = this.buttons.get(filePath);
 		if (fileButtons) {
 			return fileButtons.get(buttonId);

src/fields/button/InlineButtonField.ts

@@ -48,7 +48,7 @@ export class InlineButtonField {
 				buttonId,
 				(buttonConfig: ButtonConfig) => {
 					initialButton?.$destroy();
-					button = new ButtonField(this.plugin, buttonConfig, this.filePath, true);
+					button = new ButtonField(this.plugin, buttonConfig, this.filePath, true, false);
 					button.mount(element);
 				},
 			);

src/main.ts

@@ -14,7 +14,6 @@ import { EMBED_MAX_DEPTH, EmbedMDRC } from './renderChildren/EmbedMDRC';
 import { getUUID } from './utils/Utils';
 import { ObsidianAPIAdapter } from './api/internalApi/ObsidianAPIAdapter';
 import { RenderChildType } from './config/FieldConfigs';
-import { ButtonMDRC } from './renderChildren/ButtonMDRC';
 import { ButtonBuilderModal } from './fields/button/ButtonBuilderModal';
 import { InlineMDRCType, InlineMDRCUtils } from './utils/InlineMDRCUtils';
 import { registerCm5HLModes } from './cm6/Cm5_Modes';
@@ -57,7 +56,6 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 
 		// settings
 		await this.loadSettings();
-		await this.saveSettings();
 		this.addSettingTab(new MetaBindSettingTab(this.app, this));
 
 		// check dependencies
@@ -184,8 +182,7 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 		}
 
 		this.registerMarkdownCodeBlockProcessor('meta-bind-button', (source, el, ctx) => {
-			const button = new ButtonMDRC(el, source, this, ctx.sourcePath, getUUID());
-			ctx.addChild(button);
+			this.api.createButtonFromString(source, ctx.sourcePath, el, ctx);
 		});
 	}
 
@@ -218,15 +215,15 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 			id: 'open-button-builder',
 			name: 'Open Button Builder',
 			callback: () => {
-				new ButtonBuilderModal(
-					this,
-					config => {
+				new ButtonBuilderModal({
+					plugin: this,
+					onOkay: (config): void => {
 						void window.navigator.clipboard.writeText(
 							`\`\`\`meta-bind-button\n${stringifyYaml(config)}\n\`\`\``,
 						);
 					},
-					'Copy to Clipboard',
-				).open();
+					submitText: 'Copy to Clipboard',
+				}).open();
 			},
 		});
 	}
@@ -248,11 +245,18 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 	}
 
 	loadTemplates(): void {
-		const templateParseErrorCollection = this.api.inputFieldParser.parseTemplates(
+		const inputFieldTemplateParseErrorCollection = this.api.inputFieldParser.parseTemplates(
 			this.settings.inputFieldTemplates,
 		);
-		if (templateParseErrorCollection.hasErrors()) {
-			console.warn('meta-bind | failed to parse templates', templateParseErrorCollection);
+		if (inputFieldTemplateParseErrorCollection.hasErrors()) {
+			console.warn('meta-bind | failed to parse input field templates', inputFieldTemplateParseErrorCollection);
+		}
+
+		const buttonTemplateParseErrorCollection = this.api.buttonManager.setButtonTemplates(
+			this.settings.buttonTemplates,
+		);
+		if (buttonTemplateParseErrorCollection.hasErrors()) {
+			console.warn('meta-bind | failed to parse button templates', buttonTemplateParseErrorCollection);
 		}
 	}
 
@@ -270,11 +274,9 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 	async loadSettings(): Promise<void> {
 		console.log(`meta-bind | Main >> settings load`);
 
-		let loadedSettings = (await this.loadData()) as MetaBindPluginSettings;
+		const loadedSettings = (await this.loadData()) as MetaBindPluginSettings;
 
-		loadedSettings = this.applyTemplatesMigration(Object.assign({}, DEFAULT_SETTINGS, loadedSettings));
-
-		this.settings = loadedSettings;
+		this.settings = Object.assign({}, DEFAULT_SETTINGS, loadedSettings);
 
 		await this.saveSettings();
 	}
@@ -289,11 +291,6 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 		await this.saveData(this.settings);
 	}
 
-	// TODO: move to internal API
-	applyTemplatesMigration(oldSettings: MetaBindPluginSettings): MetaBindPluginSettings {
-		return oldSettings;
-	}
-
 	// TODO: move to internal API
 	async activateView(viewType: string): Promise<void> {
 		const { workspace } = this.app;