emailing html now for formatted messages

components/SendEmail.tsx

@@ -2,17 +2,20 @@
 
 import { useEffect, useRef, useState } from "react";
 import { sendEmailAction, type ApiResponse, type EmailRequest } from "/app/actions/sendEmail";
-import { Button, Field, Input, Textarea } from "@/components/ui/form";
+import { Button, Field, Input } from "@/components/ui/form";
+import RichTextEditor from "@/components/ui/RichTextEditor";
 
 export default function SendEmailForm(): JSX.Element {
   const [result, setResult] = useState<
-    ApiResponse<EmailRequest> | { error: string } | null
+      ApiResponse<EmailRequest> | { error: string } | null
   >(null);
   const [submitting, setSubmitting] = useState(false);
 
   const [showSuccess, setShowSuccess] = useState(false);
   const successTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  const [bodyHtml, setBodyHtml] = useState<string>("");
+
   useEffect(() => {
     return () => {
       if (successTimerRef.current) clearTimeout(successTimerRef.current);
@@ -30,7 +33,7 @@ export default function SendEmailForm(): JSX.Element {
 
     const recipient = String(form.get("recipient") ?? "");
     const subject = String(form.get("subject") ?? "");
-    const body = String(form.get("body") ?? "");
+    const body = String(form.get("body") ?? ""); // HTML from hidden input
 
     try {
       setSubmitting(true);
@@ -42,7 +45,7 @@ export default function SendEmailForm(): JSX.Element {
 
         successTimerRef.current = setTimeout(() => {
           setShowSuccess(false);
-          setResult(null); // clear the response panel too
+          setResult(null);
         }, 2000);
       }
     } catch (err) {
@@ -54,64 +57,69 @@ export default function SendEmailForm(): JSX.Element {
   }
 
   return (
-    <div className="mx-auto w-full max-w-xl px-4 py-10 text-zinc-50">
-      <h1 className="text-2xl font-semibold tracking-tight">
-        Send <span className="text-amber-300">Email</span>
-      </h1>
-      <p className="mt-2 text-sm text-zinc-400">
-        Compose a message and send it from the admin panel.
-      </p>
+      <div className="mx-auto w-full max-w-xl px-4 py-10 text-zinc-50">
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Send <span className="text-amber-300">Email</span>
+        </h1>
+        <p className="mt-2 text-sm text-zinc-400">
+          Compose a message and send it from the admin panel.
+        </p>
 
-      <form onSubmit={onSubmit} className="mt-6 space-y-4">
-        {result && "error" in result && (
-          <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
-            {result.error}
-          </div>
-        )}
+        <form onSubmit={onSubmit} className="mt-6 space-y-4">
+          {result && "error" in result && (
+              <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+                {result.error}
+              </div>
+          )}
 
-        <Field label="Recipient" htmlFor="recipient">
-          <Input
-            id="recipient"
-            name="recipient"
-            type="email"
-            placeholder="user@example.com"
-            defaultValue="user@example.com"
-            required
-          />
-        </Field>
+          <Field label="Recipient" htmlFor="recipient">
+            <Input
+                id="recipient"
+                name="recipient"
+                type="email"
+                placeholder="user@example.com"
+                defaultValue="user@example.com"
+                required
+            />
+          </Field>
 
-        <Field label="Subject" htmlFor="subject">
-          <Input
-            id="subject"
-            name="subject"
-            placeholder="Test subject"
-            defaultValue="Test subject"
-            required
-          />
-        </Field>
+          <Field label="Subject" htmlFor="subject">
+            <Input
+                id="subject"
+                name="subject"
+                placeholder="Subject…"
+                defaultValue="Test subject"
+                required
+            />
+          </Field>
 
-        <Field label="Body" htmlFor="body">
-          <Textarea
-            id="body"
-            name="body"
-            placeholder="Write your message…"
-            defaultValue="Test body"
-            rows={6}
-            required
-          />
-        </Field>
+          <Field
+              label="Body"
+              htmlFor="body"
+              hint="This will be sent as HTML."
+          >
+            {/* Hidden field so your existing FormData submit keeps working */}
+            <input type="hidden" id="body" name="body" value={bodyHtml} />
 
-        <Button type="submit" disabled={submitting}>
-          {submitting ? "Sending…" : showSuccess ? "Success" : "Send"}
-        </Button>
+            <RichTextEditor
+                value={bodyHtml}
+                onChange={setBodyHtml}
+                placeholder="Write your message…"
+                className="rounded-md border border-zinc-800 bg-zinc-950/60"
+            />
+          </Field>
 
-        <div className="rounded-md border border-zinc-800 bg-zinc-950/60 p-3">
-          <div className="text-xs font-medium text-zinc-400">Response</div>
-          <pre className="mt-2 overflow-x-auto text-xs text-zinc-200">
+          <Button type="submit" disabled={submitting}>
+            {submitting ? "Sending…" : showSuccess ? "Success" : "Send"}
+          </Button>
+
+          <div className="rounded-md border border-zinc-800 bg-zinc-950/60 p-3">
+            <div className="text-xs font-medium text-zinc-400">Response</div>
+            <pre className="mt-2 overflow-x-auto text-xs text-zinc-200">
             {result ? JSON.stringify(result, null, 2) : "No response yet."}
           </pre>
-        </div>
-      </form>
-    </div>
+          </div>
+        </form>
+      </div>
   );
 }