feat: improve editable props UX (#206)

ignatiusmb · web-flow · commit 11f576f0c3f8 · 2024-04-25T20:55:22.000+07:00
diff --git a/workspace/extension/src/lib/panel/Editable.svelte b/workspace/extension/src/lib/panel/Editable.svelte
@@ -45,12 +45,19 @@
 
 {#if editing}
 	<input
+		autofocus
 		value={value === null ? 'null' : value === undefined ? 'undefined' : value}
 		onblur={({ target }) => {
 			// @ts-expect-error - target and value exists
 			update(target.value);
 		}}
-		onkeydown={({ key, target }) => {
+		onkeydown={(event) => {
+			const { key, target } = event;
+			if (key === 'Escape') {
+				event.preventDefault();
+				editing = false;
+				return;
+			}
 			if (key !== 'Enter') return;
 			// @ts-expect-error - target and value exists
 			update(target.value);
