NewsletterCreator / src / NewsletterElementsConfig / document.js
document.js
Raw
import DOMPurify from 'dompurify'

export default (content) => {
  // return sanitized content with document
  const document = `
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1" name="viewport">
        <meta name="x-apple-disable-message-reformatting">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="telephone=no" name="format-detection">
        <title></title>
        <style>
            p {
                text-align: justify;
            }
            a {
                color: #9B0A7D;
            }
        </style>
        <!--[if (mso 16)]>
        <style type="text/css">
        a {text-decoration: none;}
        </style>
        <![endif]-->
        <!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
        <!--[if gte mso 9]>
    <xml>
        <o:OfficeDocumentSettings>
        <o:AllowPNG></o:AllowPNG>
        <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    </head>

    <body class="body" style="background-color: #FEF3FF; margin: 0;  font-family: Bahnschrift, Arial, sans-serif;">
        <div dir="ltr">
            <!--[if gte mso 9]>
                <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
                    <v:fill type="tile" color="#Fef3ff"></v:fill>
                </v:background>
            <![endif]-->
            <table style="margin-top: 20px;" width="100%" cellspacing="0" cellpadding="0"
                style="background-color: #FEF3FF; ">
                <tbody>
                    <tr>
                        <td valign="top">
                            <table cellspacing="0" cellpadding="0" align="center">
                                <tbody>
                                    <tr>
                                        <td align="center">
                                            <table cellspacing="0" width="900" cellpadding="0" bgcolor="#ffffff"
                                                align="center">
                                                <tbody>
                                                    <tr style="background-color: #FEF3FF; height: 30px;">
                                                        <td></td>
                                                    </tr>

                                                    ${content}

                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>
  `
  // sanitize content
  const clean = DOMPurify.sanitize(
    document,
    {
      WHOLE_DOCUMENT: true,
      ADD_TAGS: ['head'],
      ADD_ATTR: ['section']
    }
  )

  return clean
}