prompt improvements

Author: mProjectsCode

jsEngine/api/PromptAPI.ts

@@ -63,9 +63,28 @@ export interface InputPromptOptions extends ModalPromptOptions {
 	 */
 	content?: string;
 	/**
-	 * The placeholder text for the input field.
+	 * The placeholder text for the input field. This will show when the input field is empty.
 	 */
 	placeholder?: string;
+	/**
+	 * The initial value of the input field that is pre-filled when the modal is opened.
+	 */
+	initialValue?: string;
+}
+
+export interface NumberInputPromptOptions extends ModalPromptOptions {
+	/**
+	 * Text content to display in the modal.
+	 */
+	content?: string;
+	/**
+	 * The placeholder text for the input field. This will show when the input field is empty.
+	 */
+	placeholder?: string;
+	/**
+	 * The initial value of the input field that is pre-filled when the modal is opened.
+	 */
+	initialValue?: number;
 }
 
 export class PromptAPI {
@@ -225,6 +244,7 @@ export class PromptAPI {
 	/**
 	 * Prompts the user with a text input dialog.
 	 * Returns the value of the input field, or undefined if the user closes the modal.
+	 * While the input field is focused, the user can use `enter` to submit the value and `esc` to cancel and close the modal.
 	 *
 	 * @example
 	 * ```typescript
@@ -263,6 +283,7 @@ export class PromptAPI {
 	/**
 	 * Prompts the user with a textarea input dialog.
 	 * Returns the value of the input field, or undefined if the user closes the modal.
+	 * While the input field is focused, the user can use `esc` to cancel and close the modal.
 	 *
 	 * @example
 	 * ```typescript
@@ -302,6 +323,7 @@ export class PromptAPI {
 	/**
 	 * Prompts the user with a number input dialog.
 	 * Returns the value of the input field, or undefined if the user closes the modal.
+	 * While the input field is focused, the user can use `enter` to submit the value and `esc` to cancel and close the modal.
 	 *
 	 * @example
 	 * ```typescript
@@ -313,7 +335,7 @@ export class PromptAPI {
 	 * });
 	 * ```
 	 */
-	public number(options: InputPromptOptions): Promise<number | undefined> {
+	public number(options: NumberInputPromptOptions): Promise<number | undefined> {
 		return new Promise<number | undefined>((resolve, reject) => {
 			try {
 				new SvelteModal<AnySvelteComponent, unknown>(

jsEngine/api/prompts/InputModalComponent.svelte

@@ -1,30 +1,46 @@
 <script lang="ts">
 	import Button from 'jsEngine/utils/Button.svelte';
-	import type { InputPromptOptions } from '../PromptAPI';
+	import type { InputPromptOptions, NumberInputPromptOptions } from '../PromptAPI';
 	import type { SvelteModal } from './SvelteModal';
 	import { ButtonStyleType } from 'jsEngine/utils/Util';
 
 	const {
 		options,
 		modal,
 		inputType,
-	}: {
-		options: InputPromptOptions;
-		modal: SvelteModal<any, unknown>;
-		inputType: 'text' | 'number' | 'textarea';
-	} = $props();
+	}:
+		| {
+				options: InputPromptOptions;
+				modal: SvelteModal<any, unknown>;
+				inputType: 'text' | 'textarea';
+		  }
+		| {
+				options: NumberInputPromptOptions;
+				modal: SvelteModal<any, unknown>;
+				inputType: 'number';
+		  } = $props();
 
-	let value = $state();
+	let value = $state(options.initialValue);
+
+	function onKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' && inputType !== 'textarea') {
+			modal.submit(value);
+		}
+		if (event.key === 'Escape') {
+			modal.submit(undefined);
+		}
+	}
 </script>
 
 <p>{options.content}</p>
 
 {#if inputType === 'textarea'}
-	<textarea style="width: 100%; resize: vertical; height: 200px" bind:value={value} placeholder={options.placeholder ?? 'Text here...'}></textarea>
+	<textarea style="width: 100%; resize: vertical; height: 200px" bind:value={value} placeholder={options.placeholder ?? 'Text here...'} onkeydown={onKeydown}
+	></textarea>
 {:else if inputType === 'text'}
-	<input style="width: 100%;" type="text" bind:value={value} placeholder={options.placeholder ?? 'Text here...'} />
+	<input style="width: 100%;" type="text" bind:value={value} placeholder={options.placeholder ?? 'Text here...'} onkeydown={onKeydown} />
 {:else}
-	<input style="width: 100%;" type="number" bind:value={value} placeholder={options.placeholder ?? 'Number here...'} />
+	<input style="width: 100%;" type="number" bind:value={value} placeholder={options.placeholder ?? 'Number here...'} onkeydown={onKeydown} />
 {/if}
 
 <div class="modal-button-container">