Skip to content

Commit

Permalink
adding new markdown compiler
Browse files Browse the repository at this point in the history
  • Loading branch information
@iietmoon
iietmoon committed Jul 13, 2023
1 parent 54db076 commit 5a3b4cd
Show file tree
Hide file tree
Showing 4 changed files with 650 additions and 668 deletions.
12 changes: 8 additions & 4 deletions admin/src/pages/HomePage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import { getUsers } from '../../../../services/users';
import { getEmailingTraces, postEmailingTraces } from '../../../../services/traces';
import { sendEmail } from '../../../../services/email-sending';
import { template_1 } from '../../../../services/templates/custom';
import {EmailTemplate} from "../../../../services/templates/body";
import MDEditor from '@uiw/react-md-editor';
import showdown from 'showdown'



Expand All @@ -25,6 +27,7 @@ type Entries = any;
type ComposedTemplate = any;

const Homepage: React.FC = () => {
const converter = new showdown.Converter();
const template: any = template_1;
const [emailingTraces, setEmailingTraces]: any = useState([])
const [isVisible, setIsVisible] = useState<IsVisible>(false);
Expand Down Expand Up @@ -157,8 +160,10 @@ const Homepage: React.FC = () => {
}
}
else {
const html_content = converter.makeHtml(content)
const html_template = EmailTemplate(html_content)
for (let i = 0; i < emailsList.length; i++) {
sendEmail(emailsList[i], subject, content)
sendEmail(emailsList[i], subject, html_template)
.then(res => {
postEmailingTraces(emailsList[i], true)
.then(response => null)
Expand Down Expand Up @@ -547,11 +552,10 @@ const Homepage: React.FC = () => {
<p>Contenu de l'e-mail</p>
<br />
<MDEditor
value={value}
onChange={setValue}
value={content}
onChange={setContent}
preview="edit"
/>
<MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />
<br />
<br />
<Button size="s" onClick={() => customTemplateHandler()} >Sauvegarder</Button>
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
"@uiw/react-md-editor": "^3.23.3",
"axios": "^1.3.4",
"react-draft-wysiwyg": "^1.15.0",
"react-quill": "^0.0.2"
"react-quill": "^0.0.2",
"showdown": "^2.1.0"
},
"devDependencies": {
"typescript": "^5.1.3"
Expand Down
129 changes: 129 additions & 0 deletions services/templates/body/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
export function EmailTemplate(content:any){
return`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- Compiled with Bootstrap Email version: 1.3.1 --><meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body,table,td{font-family:Helvetica,Arial,sans-serif !important}.ExternalClass{width:100%}.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:150%}a{text-decoration:none}*{color:inherit}a[x-apple-data-detectors],u+#body a,#MessageViewBody a{color:inherit;text-decoration:none;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit}img{-ms-interpolation-mode:bicubic}table:not([class^=s-]){font-family:Helvetica,Arial,sans-serif;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;border-collapse:collapse}table:not([class^=s-]) td{border-spacing:0px;border-collapse:collapse}@media screen and (max-width: 600px){.w-full,.w-full>tbody>tr>td{width:100% !important}*[class*=s-lg-]>tbody>tr>td{font-size:0 !important;line-height:0 !important;height:0 !important}.s-4>tbody>tr>td{font-size:16px !important;line-height:16px !important;height:16px !important}.s-5>tbody>tr>td{font-size:20px !important;line-height:20px !important;height:20px !important}.s-10>tbody>tr>td{font-size:40px !important;line-height:40px !important;height:40px !important}}
</style>
</head>
<body class="bg-light" style="outline: 0; width: 100%; min-width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: Helvetica, Arial, sans-serif; line-height: 24px; font-weight: normal; font-size: 16px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color: #000000; margin: 0; padding: 0; border-width: 0;" bgcolor="#f7fafc">
<table class="bg-light body" valign="top" role="presentation" border="0" cellpadding="0" cellspacing="0" style="outline: 0; width: 100%; min-width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: Helvetica, Arial, sans-serif; line-height: 24px; font-weight: normal; font-size: 16px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color: #000000; margin: 0; padding: 0; border-width: 0;" bgcolor="#f7fafc">
<tbody>
<tr>
<td valign="top" style="line-height: 24px; font-size: 16px; margin: 0;" align="left" bgcolor="#f7fafc">
<table class="container" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td align="center" style="line-height: 24px; font-size: 16px; margin: 0; padding: 0 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" role="presentation">
<tbody>
<tr>
<td width="600">
<![endif]-->
<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto;">
<tbody>
<tr>
<td style="line-height: 24px; font-size: 16px; margin: 0;" align="left">
<table class="s-10 w-full" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;" width="100%">
<tbody>
<tr>
<td style="line-height: 40px; font-size: 40px; width: 100%; height: 40px; margin: 0;" align="left" width="100%" height="40">
&#160;
</td>
</tr>
</tbody>
</table>
<table class="card" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-radius: 6px; border-collapse: separate !important; width: 100%; overflow: hidden; border: 1px solid #e2e8f0;" bgcolor="#ffffff">
<tbody>
<tr>
<td style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="left" bgcolor="#ffffff">
<table class="card-body" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td style="line-height: 24px; font-size: 16px; width: 100%; margin: 0; padding: 20px;" align="left">
<img class="" width="200px" src="https://www.rabatinvest.ma/wp-content/uploads/2022/09/logo.jpg" style="height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; border-style: none; border-width: 0;">
<table class="s-4 w-full" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;" width="100%">
<tbody>
<tr>
<td style="line-height: 16px; font-size: 16px; width: 100%; height: 16px; margin: 0;" align="left" width="100%" height="16">
&#160;
</td>
</tr>
</tbody>
</table>
<table class="s-5 w-full" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;" width="100%">
<tbody>
<tr>
<td style="line-height: 20px; font-size: 20px; width: 100%; height: 20px; margin: 0;" align="left" width="100%" height="20">
&#160;
</td>
</tr>
</tbody>
</table>
<table class="hr" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td style="line-height: 24px; font-size: 16px; border-top-width: 1px; border-top-color: #e2e8f0; border-top-style: solid; height: 1px; width: 100%; margin: 0;" align="left">
</td>
</tr>
</tbody>
</table>
<table class="s-5 w-full" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;" width="100%">
<tbody>
<tr>
<td style="line-height: 20px; font-size: 20px; width: 100%; height: 20px; margin: 0;" align="left" width="100%" height="20">
&#160;
</td>
</tr>
</tbody>
</table>
<div class="space-y-3">
<p style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="left">
${content}
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="s-10 w-full" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;" width="100%">
<tbody>
<tr>
<td style="line-height: 40px; font-size: 40px; width: 100%; height: 40px; margin: 0;" align="left" width="100%" height="40">
&#160;
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</tbody>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
`
}
Loading

0 comments on commit 5a3b4cd

Please sign in to comment.