Allow user to send a WYSIWYG email body

api/src/operations/mail/index.ts

@@ -3,7 +3,9 @@ import { MailService } from '../../services';
 import { md } from '../../utils/md';
 
 type Options = {
-	body: string;
+	body_markdown: string;
+	body_wysiwyg: string;
+	use_wysiwyg_editor: boolean;
 	to: string;
 	subject: string;
 };
@@ -11,11 +13,14 @@ type Options = {
 export default defineOperationApi<Options>({
 	id: 'mail',
 
-	handler: async ({ body, to, subject }, { accountability, database, getSchema }) => {
+	handler: async (
+		{ body_markdown, body_wysiwyg, use_wysiwyg_editor, to, subject },
+		{ accountability, database, getSchema }
+	) => {
 		const mailService = new MailService({ schema: await getSchema({ database }), accountability, knex: database });
 
 		await mailService.send({
-			html: md(body),
+			html: use_wysiwyg_editor ? body_wysiwyg : md(body_markdown),
 			to,
 			subject,
 		});

app/src/lang/translations/en-US.yaml

@@ -93,6 +93,7 @@ invite_users: Invite Users
 invite: Invite
 email_already_invited: Email "{email}" has already been invited
 subject: Subject
+use_wysiwyg_editor: Use WYSIWYG Editor
 inbox: Inbox
 emails: Emails
 connection_excellent: Excellent Connection
@@ -2115,7 +2116,6 @@ operations:
     message_placeholder: Enter a message to show in the console...
   mail:
     name: Send Email
-    description: Send an email to one or more people
     to: To
     to_placeholder: Add e-mail addresses and press enter...
     body: Body

app/src/operations/mail/index.ts

@@ -5,7 +5,7 @@ export default defineOperationApp({
 	icon: 'mail',
 	name: '$t:operations.mail.name',
 	description: '$t:operations.mail.description',
-	overview: ({ subject, to, body }) => [
+	overview: ({ subject, to, body_wysiwyg, body_markdown, use_wysiwyg_editor }) => [
 		{
 			label: '$t:subject',
 			text: subject,
@@ -16,7 +16,7 @@ export default defineOperationApp({
 		},
 		{
 			label: '$t:operations.mail.body',
-			text: body,
+			text: use_wysiwyg_editor ? body_wysiwyg : body_markdown,
 		},
 	],
 	options: [
@@ -46,12 +46,76 @@ export default defineOperationApp({
 			},
 		},
 		{
-			field: 'body',
+			field: 'use_wysiwyg_editor',
+			name: '$t:use_wysiwyg_editor',
+			type: 'boolean',
+			schema: {
+				default_value: false,
+			},
+			meta: {
+				width: 'full',
+				interface: 'boolean',
+				options: {
+					label: 'Yes',
+				},
+			},
+		},
+		{
+			field: 'body_markdown',
 			name: '$t:operations.mail.body',
 			type: 'text',
 			meta: {
 				width: 'full',
 				interface: 'input-rich-text-md',
+				required: true,
+				hidden: false,
+				conditions: [
+					{
+						name: 'If NOT Use WYSIWYG Editor',
+						rule: {
+							_and: [
+								{
+									use_wysiwyg_editor: {
+										_eq: true,
+									},
+								},
+							],
+						},
+						hidden: true,
+						required: false,
+						options: {},
+						readonly: false,
+					},
+				],
+			},
+		},
+		{
+			field: 'body_wysiwyg',
+			name: '$t:operations.mail.body',
+			type: 'text',
+			meta: {
+				width: 'full',
+				interface: 'input-rich-text-html',
+				required: false,
+				hidden: true,
+				conditions: [
+					{
+						name: 'If Use WYSIWYG Editor',
+						rule: {
+							_and: [
+								{
+									use_wysiwyg_editor: {
+										_eq: true,
+									},
+								},
+							],
+						},
+						hidden: false,
+						required: true,
+						options: {},
+						readonly: false,
+					},
+				],
 			},
 		},
 	],