Release v0.1.3

webui/src/features/campaigns/components/MessagePreviewOverlay.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { useEffect, type ReactNode } from "react";
 import { ArrowBigLeft, ArrowBigLeftDash, ArrowBigRight, ArrowBigRightDash } from "lucide-react";
 import { Button, MessageDisplayPanel, type MessageDisplayAttachment } from "@govoplan/core-webui";
 
@@ -59,6 +59,34 @@ export default function CampaignMessagePreviewOverlay({
   const shownSubject = subject?.trim() || "No subject";
   const fields = metaItems.map((item) => ({ label: item.label, value: item.value }));
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isEditableTarget(event.target)) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+        return;
+      }
+      if (!navigation) return;
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        if (navigation.index > 0) navigation.onPrevious();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        if (navigation.index < navigation.total - 1) navigation.onNext();
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        if (navigation.index > 0) navigation.onFirst();
+      } else if (event.key === "End") {
+        event.preventDefault();
+        if (navigation.index < navigation.total - 1) navigation.onLast();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [navigation, onClose]);
+
   return (
     <div className="overlay-backdrop" role="dialog" aria-modal="true" aria-labelledby="message-preview-title">
       <div className="modal-panel template-preview-modal message-preview-modal">
@@ -109,6 +137,11 @@ export default function CampaignMessagePreviewOverlay({
   );
 }
 
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || ["INPUT", "SELECT", "TEXTAREA"].includes(target.tagName);
+}
+
 
 export type MessagePreviewAttachment = CampaignMessagePreviewAttachment;
 export type MessagePreviewMetaItem = CampaignMessagePreviewMetaItem;