victor HF Staff commited on
Commit
234c161
·
1 Parent(s): 1335ef7

Add ESC key handler to close HTML preview modal

Browse files

Introduces 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]">