update image suggester styling and allow it inline

Author: mProjectsCode

exampleVault/Buttons/Button Example.md

@@ -33,6 +33,8 @@ label: Run Custom JS
 action:
   type: js
   file: testJsFile.js
+  args: 
+    greeting: "Meta Bind User"
 ```
 
 And open internal and external links

exampleVault/Examples.md

@@ -1,5 +1,5 @@
 ---
-slider1: 7
+slider1: 3
 suggest: test
 toggle1: false
 Domestic_tasks:
@@ -13,7 +13,7 @@ inlineSelect: 1
 nested:
   object: test
 number1: 2
-number2: 14
+number2: 4
 time: 
 ---
 

exampleVault/Input Fields/Image Suggester.md

@@ -1,5 +1,5 @@
 ---
-image: Other/Images/img_flower.webp
+image: Other/Images/img_butterfly.webp
 ---
 
 ```meta-bind

exampleVault/Input Fields/Inline Select.md

@@ -2,6 +2,7 @@
 select: b
 select2: 1
 select3: 2 hours
+select4: 
 ---
 
 ```meta-bind
@@ -15,3 +16,7 @@ INPUT[inlineSelect(option(1, a), option(2, b), showcase):select2]
 ```meta-bind
 INPUT[inlineSelect(option(1 hour, a), option(2 hours, b), showcase):select3]
 ```
+
+```meta-bind
+INPUT[inlineSelect(option(null, nothing), option(foo, something), showcase):select4]
+```

exampleVault/testJsFile.js

@@ -1,2 +1,2 @@
-console.log(`Hello World from ${context.file.path}!`);
+console.log(`Hello ${context.args.greeting} from ${context.file.path}!`);
 throw new Error('This is an error');

packages/core/src/config/FieldConfigs.ts

@@ -144,7 +144,7 @@ export const InputFieldConfigs: Record<InputFieldType, InputFieldConfig> = {
 	[InputFieldType.IMAGE_SUGGESTER]: {
 		type: InputFieldType.IMAGE_SUGGESTER,
 		allowInBlock: true,
-		allowInline: false,
+		allowInline: true,
 	},
 	[InputFieldType.PROGRESS_BAR]: {
 		type: InputFieldType.PROGRESS_BAR,

packages/core/src/fields/inputFields/fields/ImageSuggester/ImageSuggesterComponent.svelte

@@ -21,12 +21,19 @@
 
 <div class="mb-image-card">
 	{#if value}
-		<img class="mb-image-card-image" src={props.plugin.internal.imagePathToUri(value)} alt={value} />
+		<img
+			class="mb-image-card-image"
+			src={props.plugin.internal.imagePathToUri(value)}
+			alt={value}
+			aria-label={value}
+		/>
 	{/if}
-	<div class="mb-image-card-footer">
-		<span>{value || 'no image selected'}</span>
-		<Button variant={ButtonStyleType.PLAIN} onclick={openSuggester}>
-			<Icon iconName="pencil" plugin={props.plugin} />
-		</Button>
-	</div>
+	<Button
+		variant={ButtonStyleType.PLAIN}
+		onclick={openSuggester}
+		classes="mb-image-card-button"
+		tooltip="Change image"
+	>
+		<Icon iconName="pencil" plugin={props.plugin} />
+	</Button>
 </div>

packages/core/src/utils/components/Button.svelte

@@ -8,19 +8,21 @@
 		variant = ButtonStyleType.DEFAULT,
 		disabled = false,
 		tooltip = '',
+		classes = '',
 		onclick = () => {},
 		children,
 	}: {
 		variant?: ButtonStyleType;
 		disabled?: boolean;
 		tooltip?: string;
+		classes?: string;
 		onclick?: (e: MouseEvent) => void | Promise<void>;
 		children: Snippet;
 	} = $props();
 </script>
 
 <button
-	class="mb-button-inner"
+	class="mb-button-inner {classes}"
 	class:mod-cta={variant === ButtonStyleType.PRIMARY}
 	class:mod-warning={variant === ButtonStyleType.DESTRUCTIVE}
 	class:mod-plain={variant === ButtonStyleType.PLAIN}

packages/obsidian/src/cm6/Cm6_ViewPlugin.ts

@@ -37,6 +37,9 @@ export function createMarkdownRenderChildWidgetEditorPlugin(plugin: MetaBindPlug
 					while (parent !== null) {
 						if (parent.classList.contains('mb-input')) {
 							e.stopPropagation();
+							// Uncommenting this will fix #403
+							// but it will break date and time inputs
+							// e.preventDefault();
 							break;
 						}
 

styles.css

@@ -443,6 +443,10 @@ div.mb-view-wrapper {
 	gap: var(--size-4-4);
 }
 
+.mb-image-card {
+	position: relative;
+}
+
 .mb-image-suggester-modal {
 	width: 80%;
 }
@@ -474,6 +478,18 @@ div.mb-view-wrapper {
 	}
 }
 
+.mb-image-card-button {
+	position: absolute;
+	opacity: 0;
+	top: var(--size-4-2);
+	right: var(--size-4-2);
+	transition: opacity 0.2s ease-in-out;
+}
+
+.mb-image-card:hover .mb-image-card-button {
+	opacity: 1;
+}
+
 .mb-image-suggest-input {
 	background: var(--background-secondary);
 	border-radius: var(--mb-border-radius);