feature(locksmith, unlock-app): adding support for markdown in the cu…

…stom emails sent (#13194)

adding support for markdown in the custom emails sent

locksmith/src/worker/tasks/sendToAll.ts

@@ -5,6 +5,9 @@ import normalizer from '../../utils/normalizer'
 import config from '../../config/config'
 import logger from '../../logger'
 import { minifyAddress } from '@unlock-protocol/ui'
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkHtml from 'remark-html'
 
 const Payload = z.object({
   lockAddress: z.string().transform((item) => normalizer.ethereumAddress(item)),
@@ -33,6 +36,7 @@ export const sendToAllJob: Task = async (payload, helper) => {
       walletAddress: item.userAddress,
     }
   })
+
   const unsubscribedList = await UnsubscribeList.findAll({
     where: {
       lockAddress: parsed.lockAddress,
@@ -63,11 +67,16 @@ export const sendToAllJob: Task = async (payload, helper) => {
     unsubscribeLink.searchParams.set('lockAddress', parsed.lockAddress)
     unsubscribeLink.searchParams.set('network', parsed.network.toString())
 
+    const content = await unified()
+      .use(remarkParse)
+      .use(remarkHtml)
+      .process(parsed.content)
+
     await helper.addJob('sendEmailJob', {
       recipient: recipient.email,
       attachments: [],
       params: {
-        content: parsed.content,
+        content: String(content?.value),
         subject: parsed.subject,
         lockAddress: parsed.lockAddress,
         network: parsed.network,

unlock-app/src/components/interface/locks/Settings/forms/SendCustomEmail.tsx

@@ -80,7 +80,19 @@ export function SendCustomEmail({
           rows={5}
           error={errors.content?.message}
           label="Content"
-          description="The content of the email"
+          description={
+            <>
+              The content of the email.{' '}
+              <a
+                className="text-brand-ui-primary hover:underline"
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://www.markdownguide.org/cheat-sheet"
+              >
+                Markdown is supported.
+              </a>
+            </>
+          }
           placeholder="New information on the event..."
           {...register('content', {
             required: 'This field is required',