1.0 release prep

mProjectsCode · mProjectsCode · commit 9fd934c00789 · 2024-03-30T17:11:50.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,42 @@
 # Obsidian Meta Bind Changelog
 
+# 1.0.0
+
+New Features
+
+-   Added new input field `imageListSuggester`, a list variant of the `imageSuggester` input field [#193](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/193)
+-   Added new input field `dateTime`, a combined date and time input field, using the native obsidian data time input [#193](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/193)
+-   Added new input field argument `multiLine` to add multi line support to the `list` input field [#232](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/242)
+-   Added new input field argument `allowOther` to allow non suggester values to the `suggester`, `listSuggester` and `inlineListSuggester` input fields [#234](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/234)
+-   Added new view field `ìmage` to display images in the note, it functions similar to the link view field [#246](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/246)
+-   Added new view field argument `class` to all view fields to add custom classes to the view field, similar to the `class` input field argument [#260](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/260)
+-   Added new button action `createNote` to create a new note [#206](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/206)
+-   Added new button action `replaceInNote` to replace lines in the note of the button [#206](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/206)
+-   Added new button action `regexpReplaceInNote` to replace run a regular expression replace in the note of the button [#206](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/206)
+-   Added new button action `insertIntoNote` to insert text at a specified line in the note of the button [#206](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/206)
+-   Added new button action `replaceSelf` to replace the button with a string or templater template [#206](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/206)
+-   Added new button action `inlineJS` to run a JavaScript snippet
+-   Added the option to add icons to buttons [#273](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/273)
+-   Added a command to easily copy command IDs to the clipboard [#247](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/247)
+-   Added support for reordering in all list type input fields
+-   Added support for editing in some list type input fields
+
+Changes
+
+-   **BREAKING** Completely reworked the plugins JavaScript API
+-   Restyled the following input fields: `list`, `listSuggester`, `inlineList`, `inlineListSuggester`, `imageSuggester`, `imageListSuggester`, `select` and `multiSelect` to be more in line with Obsidian's design
+-   Changed the date and time input fields to use the native obsidian date and time inputs
+-   Added the ability for the `open` button action to open the link in a new tab
+-   Added the button config and args as available variables in the JS button action [#242](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/242)
+-   Added view field examples into the FAQ [#186](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/186)
+-   Major restructuring of the plugin codebase to allow for easier development on the publish version of the plugin
+
+Bug Fixes
+
+-   Fixed FAQ not opening [#230](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/230)
+-   Fixed an issue with settings reverting when using a sync service [#235](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/235)
+-   Fixed in issue where the plugin would sometimes incorrectly complain about duplicate button ids
+
 # 0.12.5
 
 Bug Fixes
diff --git a/bun.lockb b/bun.lockb
diff --git a/exampleVault/Buttons/Button Example.md b/exampleVault/Buttons/Button Example.md
@@ -185,6 +185,20 @@ actions:
 
 ```
 
+```meta-bind-button
+label: Inline Js
+icon: "file-code"
+hidden: false
+class: ""
+tooltip: ""
+id: ""
+style: default
+actions:
+  - type: inlineJS
+    code: console.log("Hello world")
+
+```
+
 ### Modifying Front-matter
 
 ```meta-bind-button
diff --git a/exampleVault/Input Fields/Suggester.md b/exampleVault/Input Fields/Suggester.md
@@ -29,6 +29,9 @@ showcase
 ### Suggester with Dataview
 
 Note, that this will error, if dataview is not enabled. 
+
+`INPUT[suggester(optionQuery(#example-note)):fileSuggest]`
+
 ```meta-bind
 INPUT[suggester(optionQuery(#example-note), showcase):fileSuggest]
 ```
diff --git a/package.json b/package.json
@@ -29,10 +29,10 @@
 	"license": "GPL-3.0",
 	"devDependencies": {
 		"@happy-dom/global-registrator": "^13.10.1",
-		"@tsconfig/svelte": "^5.0.3",
-		"@types/bun": "^1.0.10",
-		"@typescript-eslint/eslint-plugin": "^7.3.1",
-		"@typescript-eslint/parser": "^7.3.1",
+		"@tsconfig/svelte": "^5.0.4",
+		"@types/bun": "^1.0.11",
+		"@typescript-eslint/eslint-plugin": "^7.4.0",
+		"@typescript-eslint/parser": "^7.4.0",
 		"builtin-modules": "^3.3.0",
 		"elysia": "^0.8.17",
 		"esbuild": "^0.20.2",
diff --git a/packages/core/src/api/InternalAPI.ts b/packages/core/src/api/InternalAPI.ts
@@ -126,11 +126,17 @@ export abstract class InternalAPI<Plugin extends IPlugin> {
 	 *
 	 * @param code
 	 * @param callingFilePath
+	 * @param contextOverrides
 	 * @param container
 	 *
 	 * @returns Cleanup callback.
 	 */
-	abstract jsEngineRunCode(code: string, callingFilePath: string, container?: HTMLElement): Promise<() => void>;
+	abstract jsEngineRunCode(
+		code: string,
+		callingFilePath: string,
+		contextOverrides: Record<string, unknown>,
+		container?: HTMLElement,
+	): Promise<() => void>;
 
 	/**
 	 * Creates a js renderer, used for the js view field.
diff --git a/packages/core/src/config/ButtonConfig.ts b/packages/core/src/config/ButtonConfig.ts
@@ -18,6 +18,7 @@ export enum ButtonActionType {
 	REGEXP_REPLACE_IN_NOTE = 'regexpReplaceInNote',
 	REPLACE_SELF = 'replaceSelf',
 	INSERT_INTO_NOTE = 'insertIntoNote',
+	INLINE_JS = 'inlineJS',
 }
 
 export interface CommandButtonAction {
@@ -96,6 +97,11 @@ export interface InsertIntoNoteButtonAction {
 	templater?: boolean;
 }
 
+export interface InlineJsButtonAction {
+	type: ButtonActionType.INLINE_JS;
+	code: string;
+}
+
 export type ButtonAction =
 	| CommandButtonAction
 	| JSButtonAction
@@ -108,10 +114,12 @@ export type ButtonAction =
 	| ReplaceInNoteButtonAction
 	| ReplaceSelfButtonAction
 	| RegexpReplaceInNoteButtonAction
-	| InsertIntoNoteButtonAction;
+	| InsertIntoNoteButtonAction
+	| InlineJsButtonAction;
 
 export interface ButtonConfig {
 	label: string;
+	icon?: string;
 	style: ButtonStyleType;
 	class?: string;
 	tooltip?: string;
diff --git a/packages/core/src/config/ButtonConfigValidators.ts b/packages/core/src/config/ButtonConfigValidators.ts
@@ -5,6 +5,7 @@ import {
 	ButtonStyleType,
 	type CommandButtonAction,
 	type CreateNoteButtonAction,
+	type InlineJsButtonAction,
 	type InputButtonAction,
 	type InsertIntoNoteButtonAction,
 	type JSButtonAction,
@@ -118,6 +119,13 @@ export const V_InsertIntoNoteButtonAction = schemaForType<InsertIntoNoteButtonAc
 	}),
 );
 
+export const V_InlineJsButtonAction = schemaForType<InlineJsButtonAction>()(
+	z.object({
+		type: z.literal(ButtonActionType.INLINE_JS),
+		code: z.string(),
+	}),
+);
+
 export const V_ButtonAction = schemaForType<ButtonAction>()(
 	z.union([
 		V_CommandButtonAction,
@@ -132,6 +140,7 @@ export const V_ButtonAction = schemaForType<ButtonAction>()(
 		V_ReplaceSelfButtonAction,
 		V_RegexpReplaceInNoteButtonAction,
 		V_InsertIntoNoteButtonAction,
+		V_InlineJsButtonAction,
 	]),
 );
 
@@ -141,6 +150,7 @@ export const V_ButtonConfig = schemaForType<ButtonConfig>()(
 	z
 		.object({
 			label: z.string(),
+			icon: z.string().optional(),
 			style: V_ButtonStyleType,
 			class: z.string().optional(),
 			tooltip: z.string().optional(),
diff --git a/packages/core/src/fields/button/ButtonActionRunner.ts b/packages/core/src/fields/button/ButtonActionRunner.ts
@@ -6,6 +6,7 @@ import {
 	ButtonStyleType,
 	type CommandButtonAction,
 	type CreateNoteButtonAction,
+	type InlineJsButtonAction,
 	type InputButtonAction,
 	type InsertIntoNoteButtonAction,
 	type JSButtonAction,
@@ -33,6 +34,7 @@ export class ButtonActionRunner {
 	createDefaultButtonConfig(): ButtonConfig {
 		return {
 			label: 'This is a button',
+			icon: '',
 			hidden: false,
 			class: '',
 			tooltip: '',
@@ -137,6 +139,11 @@ export class ButtonActionRunner {
 				line: 0,
 				value: 'Some text',
 			} satisfies InsertIntoNoteButtonAction;
+		} else if (type === ButtonActionType.INLINE_JS) {
+			return {
+				type: ButtonActionType.INLINE_JS,
+				code: 'console.log("Hello world")',
+			} satisfies InlineJsButtonAction;
 		}
 
 		expectType<never>(type);
@@ -197,6 +204,9 @@ export class ButtonActionRunner {
 		} else if (action.type === ButtonActionType.INSERT_INTO_NOTE) {
 			await this.runInsertIntoNoteAction(action, filePath);
 			return;
+		} else if (action.type === ButtonActionType.INLINE_JS) {
+			await this.runInlineJsAction(config, action, filePath);
+			return;
 		}
 
 		expectType<never>(action);
@@ -210,8 +220,8 @@ export class ButtonActionRunner {
 
 	async runJSAction(config: ButtonConfig | undefined, action: JSButtonAction, filePath: string): Promise<void> {
 		const configOverrides: Record<string, unknown> = {
-			buttonConfig: config,
-			args: action.args,
+			buttonConfig: structuredClone(config),
+			args: structuredClone(action.args),
 		};
 		const unloadCallback = await this.plugin.internal.jsEngineRunFile(action.file, filePath, configOverrides);
 		unloadCallback();
@@ -333,4 +343,16 @@ export class ButtonActionRunner {
 
 		await this.plugin.internal.writeFilePath(filePath, splitContent.join('\n'));
 	}
+
+	async runInlineJsAction(
+		config: ButtonConfig | undefined,
+		action: InlineJsButtonAction,
+		filePath: string,
+	): Promise<void> {
+		const configOverrides: Record<string, unknown> = {
+			buttonConfig: structuredClone(config),
+		};
+		const unloadCallback = await this.plugin.internal.jsEngineRunCode(action.code, filePath, configOverrides);
+		unloadCallback();
+	}
 }
diff --git a/packages/core/src/fields/button/ButtonField.ts b/packages/core/src/fields/button/ButtonField.ts
@@ -56,6 +56,8 @@ export class ButtonField extends Mountable {
 		this.buttonComponent = new ButtonComponent({
 			target: targetEl,
 			props: {
+				plugin: this.plugin,
+				icon: this.config.icon,
 				variant: this.config.style,
 				label: this.config.label,
 				tooltip: isTruthy(this.config.tooltip) ? this.config.tooltip : this.config.label,
diff --git a/packages/core/src/fields/button/ButtonGroupField.ts b/packages/core/src/fields/button/ButtonGroupField.ts
@@ -39,6 +39,7 @@ export class ButtonGroupField extends Mountable {
 		return new ButtonComponent({
 			target: element,
 			props: {
+				plugin: this.plugin,
 				variant: ButtonStyleType.DEFAULT,
 				label: 'Button ID not Found',
 				tooltip: `No button with id '${buttonId}' found`,
diff --git a/packages/core/src/fields/inputFields/fields/List/ListComponent.svelte b/packages/core/src/fields/inputFields/fields/List/ListComponent.svelte
@@ -11,7 +11,6 @@
 	export let value: MBLiteral[];
 	export let limit: number | undefined;
 	export let placeholder: string;
-	// TODO: implement multiLine support
 	export let multiLine: boolean;
 	export let onValueChange: (value: MBLiteral[]) => void;
 
diff --git a/packages/core/src/modals/modalContents/buttonBuilder/ButtonBuilderModalComponent.svelte b/packages/core/src/modals/modalContents/buttonBuilder/ButtonBuilderModalComponent.svelte
@@ -22,10 +22,10 @@
 	import RegexpReplaceInNoteActionSettings from 'packages/core/src/modals/modalContents/buttonBuilder/RegexpReplaceInNoteActionSettings.svelte';
 	import ReplaceSelfActionSettings from 'packages/core/src/modals/modalContents/buttonBuilder/ReplaceSelfActionSettings.svelte';
 	import InsertIntoNoteActionSettings from 'packages/core/src/modals/modalContents/buttonBuilder/InsertIntoNoteActionSettings.svelte';
-	import FlexRow from '../../../utils/components/FlexRow.svelte';
-	import Icon from '../../../utils/components/Icon.svelte';
+	import InlineJsActionSettings from 'packages/core/src/modals/modalContents/buttonBuilder/InlineJsActionSettings.svelte';
+	import FlexRow from 'packages/core/src/utils/components/FlexRow.svelte';
+	import Icon from 'packages/core/src/utils/components/Icon.svelte';
 	import { ContextMenuItemDefinition } from 'packages/core/src/utils/IContextMenu';
-	import { MBLiteral, stringifyLiteral } from 'packages/core/src/utils/Literal';
 
 	export let plugin: IPlugin;
 	export let modal: ButtonBuilderModal;
@@ -90,6 +90,8 @@
 			return 'Replace Button with Text';
 		} else if (actionType === ButtonActionType.INSERT_INTO_NOTE) {
 			return 'Insert Text into the Note';
+		} else if (actionType === ButtonActionType.INLINE_JS) {
+			return 'Run JavaScript Code';
 		}
 
 		return 'CHANGE ME';
@@ -149,6 +151,10 @@
 	<input type="text" bind:value={buttonConfig.label} />
 </SettingComponent>
 
+<SettingComponent name="Icon" description="The icon shown on the button. If left empty, no icon will show">
+	<input type="text" bind:value={buttonConfig.icon} />
+</SettingComponent>
+
 <SettingComponent name="Style" description="The style variant of the button">
 	<select class="dropdown" bind:value={buttonConfig.style}>
 		{#each Object.values(ButtonStyleType) as option}
@@ -251,6 +257,10 @@ Add action of type
 	{#if action.type === ButtonActionType.INSERT_INTO_NOTE}
 		<InsertIntoNoteActionSettings action={action} plugin={plugin}></InsertIntoNoteActionSettings>
 	{/if}
+
+	{#if action.type === ButtonActionType.INLINE_JS}
+		<InlineJsActionSettings action={action} plugin={plugin}></InlineJsActionSettings>
+	{/if}
 {/each}
 
 <h4>Preview</h4>
diff --git a/packages/core/src/modals/modalContents/buttonBuilder/InlineJsActionSettings.svelte b/packages/core/src/modals/modalContents/buttonBuilder/InlineJsActionSettings.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { InlineJsButtonAction } from 'packages/core/src/config/ButtonConfig';
+	import SettingComponent from 'packages/core/src/utils/components/SettingComponent.svelte';
+	import { IPlugin } from 'packages/core/src/IPlugin';
+
+	export let action: InlineJsButtonAction;
+	export let plugin: IPlugin;
+</script>
+
+<SettingComponent name="JS Code" description="The JavaScript code to run."></SettingComponent>
+
+<div class="meta-bind-full-width meta-bind-high">
+	<textarea bind:value={action.code}></textarea>
+</div>
diff --git a/packages/core/src/modals/modalContents/buttonBuilder/OpenActionSettings.svelte b/packages/core/src/modals/modalContents/buttonBuilder/OpenActionSettings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { ButtonStyleType, OpenButtonAction } from 'packages/core/src/config/ButtonConfig';
-	import Icon from 'packages/core/src/utils/components/Icon.svelte';
-	import Button from 'packages/core/src/utils/components/Button.svelte';
+	import { OpenButtonAction } from 'packages/core/src/config/ButtonConfig';
 	import SettingComponent from 'packages/core/src/utils/components/SettingComponent.svelte';
 	import { IPlugin } from 'packages/core/src/IPlugin';
+	import Toggle from 'packages/core/src/utils/components/Toggle.svelte';
 
 	export let action: OpenButtonAction;
 	export let plugin: IPlugin;
@@ -12,3 +11,7 @@
 <SettingComponent name="Link" description="The link to open.">
 	<input type="text" bind:value={action.link} placeholder="[[Some Note]] or https://www.example.com" />
 </SettingComponent>
+
+<SettingComponent name="New Tab" description="Whether to open the link in a new tab.">
+	<Toggle bind:checked={action.newTab}></Toggle>
+</SettingComponent>
diff --git a/packages/core/src/utils/components/ButtonComponent.svelte b/packages/core/src/utils/components/ButtonComponent.svelte
@@ -2,11 +2,15 @@
 
 <script lang="ts">
 	import { ButtonStyleType } from 'packages/core/src/config/ButtonConfig';
+	import Icon from 'packages/core/src/utils/components/Icon.svelte';
+	import { IPlugin } from 'packages/core/src/IPlugin';
 
+	export let plugin: IPlugin;
 	export let variant: ButtonStyleType = ButtonStyleType.DEFAULT;
 	export let disabled: boolean = false;
 	export let tooltip: string = '';
 	export let label: string = '';
+	export let icon: string = '';
 	export let error: boolean = false;
 	export let onClick: () => Promise<void> = async () => {};
 
@@ -35,13 +39,16 @@
 	on:click={() => click()}
 	disabled={disabled}
 >
+	{#if icon}
+		<Icon plugin={plugin} iconName={icon}></Icon>
+	{/if}
 	{label}
 </button>
 
 <style>
 	button {
 		/* Add a gap between text and icons. */
-		gap: var(--size-4-1);
+		gap: var(--size-4-2);
 	}
 
 	.mod-plain {
diff --git a/packages/obsidian/src/ObsidianInternalAPI.ts b/packages/obsidian/src/ObsidianInternalAPI.ts
diff --git a/packages/publish/src/PublishInternalAPI.ts b/packages/publish/src/PublishInternalAPI.ts
diff --git a/tests/__mocks__/TestInternalAPI.ts b/tests/__mocks__/TestInternalAPI.ts
diff --git a/tests/fields/Button.test.ts b/tests/fields/Button.test.ts
