feat(broadcast): add markdown preview and render markdown in emails

Add a write/preview tab toggle to the broadcast message input, mirroring
the pattern used on the event description field. The Go backend now
converts the markdown body to HTML via blackfriday before injecting it
into the email template, replacing the plain-text white-space:pre-line
approach.

Author: WaDadidou

app/(dashboard)/dashboard/event/[id]/(default)/broadcast/dashboard-broadcast-form.tsx

@@ -19,6 +19,10 @@ import { FormFieldCheckbox } from "@/components/widgets/form/form-field-checkbox
 import { ButtonWithChildren } from "@/components/widgets/buttons/button-with-children";
 import { Form } from "@/components/shadcn/form";
 import { captureException } from "@/lib/report";
+import { Tabs, TabsContent } from "@/components/shadcn/tabs";
+import TabsIconsList from "@/components/widgets/tabs/tabs-icons-list";
+import { getMarkdownEditorTabs } from "@/lib/markdown-editor";
+import { MarkdownPreview } from "@/components/widgets/markdown-preview";
 
 interface DashboardBroadcastFormProps {
   eventId: string;
@@ -37,19 +41,44 @@ function BroadcastEmailForm({
   isDisabled: boolean;
 } & React.ComponentProps<"form">) {
   const t = useTranslations("broadcast-email-form");
+  const message = form.watch("message");
 
   return (
     <form onSubmit={onSubmit} className={cn("flex flex-col gap-2", className)}>
-      <FormFieldTextArea
-        control={form.control}
-        name="message"
-        placeholder={t("message-input-placeholder")}
-        label={t("message-input-label")}
-        className="min-h-[100px] max-h-[500px]"
-        maxLength={5000}
-        wordCounter
-        disabled={isDisabled}
-      />
+      <Tabs defaultValue="write" className="w-full">
+        <div className="flex flex-row items-center justify-between mb-1">
+          <span className="text-sm font-medium">
+            {t("message-input-label")}
+          </span>
+          <TabsIconsList
+            tabs={getMarkdownEditorTabs({
+              writeLabel: t("write-tab"),
+              previewLabel: t("preview-tab"),
+            })}
+            className="rounded p-0 h-fit"
+          />
+        </div>
+        <TabsContent value="write" tabIndex={-1}>
+          <FormFieldTextArea
+            control={form.control}
+            name="message"
+            placeholder={t("message-input-placeholder")}
+            className="min-h-[100px] max-h-[500px]"
+            maxLength={5000}
+            wordCounter
+            disabled={isDisabled}
+          />
+        </TabsContent>
+        <TabsContent value="preview">
+          {message.trim() === "" ? (
+            <div className="w-full h-32 flex items-center justify-center text-sm text-muted-foreground">
+              {t("preview-empty")}
+            </div>
+          ) : (
+            <MarkdownPreview markdownString={message} />
+          )}
+        </TabsContent>
+      </Tabs>
       <div className="mb-4">
         <FormFieldCheckbox
           control={form.control}

app/i18n/messages/en.json

@@ -640,7 +640,10 @@
     "attach-ticket-label": "Attach ticket to the message",
     "toast-email-sent-success": "Email sent !",
     "toast-email-sent-error": "Error while trying to send the email",
-    "no-participant-error": "You can't send any message because nobody is going to your event yet"
+    "no-participant-error": "You can't send any message because nobody is going to your event yet",
+    "write-tab": "Write",
+    "preview-tab": "Preview",
+    "preview-empty": "Nothing to preview"
   },
   "event-community-section": {
     "organized-by": "Organized by community"

app/i18n/messages/es.json

@@ -639,7 +639,10 @@
     "attach-ticket-label": "Adjuntar entrada al mensaje",
     "toast-email-sent-success": "¡Email enviado!",
     "toast-email-sent-error": "Error al intentar enviar el email",
-    "no-participant-error": "No puedes enviar ningún mensaje porque nadie asiste a tu evento todavía"
+    "no-participant-error": "No puedes enviar ningún mensaje porque nadie asiste a tu evento todavía",
+    "write-tab": "Escribir",
+    "preview-tab": "Vista previa",
+    "preview-empty": "Nada que mostrar"
   },
   "event-community-section": {
     "organized-by": "Organizado por la comunidad"

app/i18n/messages/fr.json

@@ -640,7 +640,10 @@
     "attach-ticket-label": "Joindre le billet au message",
     "toast-email-sent-success": "Email envoyé !",
     "toast-email-sent-error": "Erreur lors de l'envoi de l'email",
-    "no-participant-error": "Vous ne pouvez envoyer aucun message car personne ne participe encore à votre événement"
+    "no-participant-error": "Vous ne pouvez envoyer aucun message car personne ne participe encore à votre événement",
+    "write-tab": "Écrire",
+    "preview-tab": "Aperçu",
+    "preview-empty": "Rien à afficher"
   },
   "event-community-section": {
     "organized-by": "Organisé par la communauté"

backend/mail_templates.go

@@ -8,6 +8,7 @@ import (
 	texttemplate "text/template"
 	"time"
 
+	"github.com/russross/blackfriday/v2"
 	"github.com/samouraiworld/zenao/backend/zeni"
 )
 
@@ -232,15 +233,15 @@ func formatAmountMinor(amountMinor int64, currencyCode string) string {
 type eventBroadcast struct {
 	EventName string
 	ImageURL  string
-	Message   string
+	Message   template.HTML
 	EventURL  string
 }
 
 func eventBroadcastMailContent(event *zeni.Event, message string) (string, string, error) {
 	data := eventBroadcast{
 		ImageURL:  web2URL(event.ImageURI) + "?img-width=960&img-height=540&img-fit=cover&dpr=2",
 		EventName: event.Title,
-		Message:   message,
+		Message:   template.HTML(blackfriday.Run([]byte(message))),
 		EventURL:  eventPublicURL(event.ID),
 	}
 

backend/mails/html/event-broadcast-message.tmpl.html

@@ -1 +1 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="{{.ImageURL}}"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/></head><body style="background-color:#ffffff"><!--$--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="background-color:#ffffff;color:#000000;font-family:&quot;Helvetica Neue&quot;,-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Roboto,Oxygen-Sans,Ubuntu,Cantarell,sans-serif"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Message from organizer of {{.EventName}}<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:800px;margin:10px auto;border:1px solid #F5F5F5"><tbody><tr style="width:100%"><td><img alt="Event image" src="{{.ImageURL}}" style="display:block;outline:none;border:none;text-decoration:none;width:100%;object-fit:cover;aspect-ratio:16/9"/><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:48px 20px;height:220px;background-color:#000000;word-break:break-word"><tbody><tr><td><p style="font-size:48px;line-height:1.1;color:#FFFFFF;text-align:center;font-weight:500;margin:0;letter-spacing:-1.2px;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">Message from <!-- -->{{.EventName}}</p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:48px 20px"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#F5F5F5;border-radius:8px;padding:20px 20px 20px 20px;margin-bottom:24px;border-left:4px solid #000000"><tbody><tr><td><p style="font-size:16px;line-height:1.6;margin:0;color:#333333;white-space:pre-line;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">{{.Message}}</p></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><a href="{{.EventURL}}" style="line-height:1.3;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;background-color:#000000;color:#FFFFFF;font-size:16px;width:100%;border-radius:4px;margin-top:16px;text-align:center;padding-top:14px;padding-bottom:14px;font-weight:500" target="_blank"><span><!--[if mso]><i style="mso-font-width:0%;mso-text-raise:21" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:10.5px">View event details</span><span><!--[if mso]><i style="mso-font-width:0%" hidden>&#8203;</i><![endif]--></span></a></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:20px;background-color:#F5F5F5;border-bottom-left-radius:4px;border-bottom-right-radius:4px"><tbody><tr><td><p style="font-size:12px;line-height:24px;color:#666666;text-align:center;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">You&#x27;re receiving this email because you&#x27;re a participant of<!-- --> <!-- -->{{.EventName}}<!-- -->.</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><!--7--><!--/$--></body></html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="{{.ImageURL}}"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/></head><body style="background-color:#ffffff"><!--$--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="background-color:#ffffff;color:#000000;font-family:&quot;Helvetica Neue&quot;,-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Roboto,Oxygen-Sans,Ubuntu,Cantarell,sans-serif"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Message from organizer of {{.EventName}}<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:800px;margin:10px auto;border:1px solid #F5F5F5"><tbody><tr style="width:100%"><td><img alt="Event image" src="{{.ImageURL}}" style="display:block;outline:none;border:none;text-decoration:none;width:100%;object-fit:cover;aspect-ratio:16/9"/><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:48px 20px;height:220px;background-color:#000000;word-break:break-word"><tbody><tr><td><p style="font-size:48px;line-height:1.1;color:#FFFFFF;text-align:center;font-weight:500;margin:0;letter-spacing:-1.2px;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">Message from <!-- -->{{.EventName}}</p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:48px 20px"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#F5F5F5;border-radius:8px;padding:20px 20px 20px 20px;margin-bottom:24px;border-left:4px solid #000000"><tbody><tr><td><div style="font-size:16px;line-height:1.6;margin:0;color:#333333;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">{{.Message}}</div></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><a href="{{.EventURL}}" style="line-height:1.3;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;background-color:#000000;color:#FFFFFF;font-size:16px;width:100%;border-radius:4px;margin-top:16px;text-align:center;padding-top:14px;padding-bottom:14px;font-weight:500" target="_blank"><span><!--[if mso]><i style="mso-font-width:0%;mso-text-raise:21" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:10.5px">View event details</span><span><!--[if mso]><i style="mso-font-width:0%" hidden>&#8203;</i><![endif]--></span></a></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:20px;background-color:#F5F5F5;border-bottom-left-radius:4px;border-bottom-right-radius:4px"><tbody><tr><td><p style="font-size:12px;line-height:24px;color:#666666;text-align:center;margin:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">You&#x27;re receiving this email because you&#x27;re a participant of<!-- --> <!-- -->{{.EventName}}<!-- -->.</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><!--7--><!--/$--></body></html>