Add ESC key handler to close HTML preview modal
Browse filesIntroduces a global keydown event listener that closes the HtmlPreviewModal when the Escape key is pressed, improving accessibility and user experience.
src/lib/components/HtmlPreviewModal.svelte
CHANGED
|
@@ -117,8 +117,18 @@
|
|
| 117 |
|
| 118 |
let copied = $state(false);
|
| 119 |
let copyTimer: ReturnType<typeof setTimeout>;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 120 |
</script>
|
| 121 |
|
|
|
|
|
|
|
| 122 |
<Modal width="max-w-[90dvw]" closeButton onclose={() => onclose?.()}>
|
| 123 |
<div class="p-4">
|
| 124 |
<div class="relative h-[90dvh] w-[80dvw]">
|
|
|
|
| 117 |
|
| 118 |
let copied = $state(false);
|
| 119 |
let copyTimer: ReturnType<typeof setTimeout>;
|
| 120 |
+
|
| 121 |
+
function handleKeydown(event: KeyboardEvent) {
|
| 122 |
+
// Close preview on ESC key
|
| 123 |
+
if (event.key === "Escape") {
|
| 124 |
+
event.preventDefault();
|
| 125 |
+
onclose?.();
|
| 126 |
+
}
|
| 127 |
+
}
|
| 128 |
</script>
|
| 129 |
|
| 130 |
+
<svelte:window on:keydown={handleKeydown} />
|
| 131 |
+
|
| 132 |
<Modal width="max-w-[90dvw]" closeButton onclose={() => onclose?.()}>
|
| 133 |
<div class="p-4">
|
| 134 |
<div class="relative h-[90dvh] w-[80dvw]">
|