fix #184

Author: mProjectsCode

bun.lockb

@@ -30,11 +30,10 @@
 		"@codemirror/view": "6.22.0",
 		"@happy-dom/global-registrator": "^12.10.3",
 		"@tsconfig/svelte": "^5.0.0",
-		"@types/web": "^0.0.119",
+		"@types/bun": "^1.0.2",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"builtin-modules": "^3.3.0",
-		"bun-types": "1.0.15",
 		"esbuild": "^0.19.5",
 		"esbuild-plugin-copy-watch": "^2.0.0",
 		"esbuild-svelte": "^0.8.0",

package.json

@@ -9,8 +9,8 @@
 	let inputEl: HTMLElement;
 
 	onMount(() => {
-		renderEl.style.display = "block";
-		inputEl.style.display = "none";
+		renderEl.style.display = 'block';
+		inputEl.style.display = 'none';
 		render(renderEl, value);
 	});
 
@@ -20,15 +20,15 @@
 	}
 
 	function focusOut() {
-		renderEl.style.display = "block";
-		inputEl.style.display = "none";
+		renderEl.style.display = 'block';
+		inputEl.style.display = 'none';
 		render(renderEl, value);
 	}
 
 	function focusIn() {
 		// console.log('focus in');
-		renderEl.style.display = "none";
-		inputEl.style.display = "block";
+		renderEl.style.display = 'none';
+		inputEl.style.display = 'block';
 		inputEl.focus();
 	}
 

src/fields/inputFields/fields/Editor/EditorComponent.svelte

@@ -4,7 +4,7 @@
 	import Icon from '../../utils/components/Icon.svelte';
 	import { ButtonConfig, ButtonStyleType } from '../../config/ButtonConfig';
 	import FlexRow from '../../utils/components/FlexRow.svelte';
-	import { stringifyYaml } from 'obsidian';
+	import { Notice, stringifyYaml } from 'obsidian';
 	import { ButtonBuilderModal } from '../../fields/button/ButtonBuilderModal';
 	import MetaBindPlugin from '../../main';
 
@@ -29,6 +29,12 @@
 			config: template,
 		}).open();
 	}
+
+	function copyTemplate(): void {
+		const yaml = stringifyYaml(template);
+		void navigator.clipboard.writeText(yaml);
+		new Notice('meta-bind | Copied to Clipboard');
+	}
 </script>
 
 <div class="mb-card markdown-rendered">
@@ -37,6 +43,9 @@
 		<Button on:click={() => editTemplate()} variant={ButtonStyleType.PRIMARY} tooltip="Edit">
 			<Icon iconName="pen-line" />
 		</Button>
+		<Button on:click={() => copyTemplate()} variant={ButtonStyleType.DEFAULT} tooltip="Copy">
+			<Icon iconName="copy" />
+		</Button>
 		<Button on:click={() => dispatchDeleteEvent()} variant={ButtonStyleType.DESTRUCTIVE} tooltip="Delete">
 			<Icon iconName="x" />
 		</Button>

src/settings/buttonTemplateSetting/ButtonTemplateSettingComponent.svelte

@@ -6,6 +6,11 @@
 	import { ButtonConfig } from '../../config/ButtonConfig';
 	import { ButtonTemplatesSettingModal } from './ButtonTemplatesSettingModal';
 	import ButtonTemplateSettingComponent from './ButtonTemplateSettingComponent.svelte';
+	import { V_ButtonConfig } from '../../config/ButtonConfigValidators';
+	import { fromZodError } from 'zod-validation-error';
+	import { ErrorLevel, MetaBindButtonError } from '../../utils/errors/MetaBindErrors';
+	import { DocsUtils } from '../../utils/DocsUtils';
+	import { Notice, parseYaml } from 'obsidian';
 
 	export let buttonConfigs: ButtonConfig[];
 	export let modal: ButtonTemplatesSettingModal;
@@ -22,6 +27,49 @@
 		buttonConfigs = buttonConfigs;
 	}
 
+	async function addTemplateFromClipboard(): void {
+		let unvalidatedConfig: ButtonConfig | undefined;
+		try {
+			unvalidatedConfig = parseYaml(await navigator.clipboard.readText());
+		} catch (e) {
+			console.warn(e);
+			new Notice(
+				'meta-bind | Can not parse button config. Check your button syntax. See the console for more details.',
+			);
+			return;
+		}
+
+		const validationResult = V_ButtonConfig.safeParse(unvalidatedConfig);
+
+		if (!validationResult.success) {
+			const niceError = fromZodError(validationResult.error, {
+				unionSeparator: '\nOR ',
+				issueSeparator: ' AND ',
+				prefix: null,
+			});
+
+			console.warn(
+				new MetaBindButtonError({
+					errorLevel: ErrorLevel.ERROR,
+					effect: 'can not parse button config',
+					cause: 'zod validation failed. Check your button syntax',
+					positionContext: niceError.message,
+					docs: [DocsUtils.linkToButtonConfig()],
+				}),
+			);
+			console.warn(niceError);
+
+			new Notice(
+				'meta-bind | Can not parse button config. Check your button syntax. See the console for more details.',
+			);
+			return;
+		}
+
+		buttonConfigs.push(unvalidatedConfig as ButtonConfig);
+
+		buttonConfigs = buttonConfigs;
+	}
+
 	function save(): void {
 		errorCollection = modal.save(buttonConfigs);
 
@@ -36,6 +84,8 @@
 </script>
 
 <div>
+	<h2>Meta Bind Button Templates</h2>
+
 	{#each buttonConfigs as template}
 		<ButtonTemplateSettingComponent
 			plugin={modal.plugin}
@@ -45,6 +95,11 @@
 	{/each}
 
 	<Button on:click={() => addTemplate()} variant="primary" tooltip="Create New Template">Add Template</Button>
+	<Button
+		on:click={() => addTemplateFromClipboard()}
+		variant="default"
+		tooltip="Create New Template from YAML in Clipboard">Add Template from Clipboard</Button
+	>
 
 	{#if errorCollection}
 		<div>

src/settings/buttonTemplateSetting/ButtonTemplatesSettingComponent.svelte

@@ -12,7 +12,6 @@
 	const dispatch = createEventDispatcher();
 
 	function dispatchDeleteEvent(): void {
-		console.log('dispatch');
 		dispatch('delete-template', {
 			template: template,
 		});

src/settings/inputFieldTemplateSetting/InputFieldTemplateSettingComponent.svelte

@@ -39,6 +39,8 @@
 </script>
 
 <div>
+	<h2>Meta Bind Input Field Templates</h2>
+
 	{#each inputFieldTemplates as template}
 		<InputFieldTemplateSettingComponent
 			template={template}