From 94a2cdf89e7e56623bb8ad377cc119692d880d62 Mon Sep 17 00:00:00 2001
From: Tomas Bures <bures@d3s.mff.cuni.cz>
Date: Wed, 3 Apr 2019 23:39:10 +0200
Subject: [PATCH] More elements for mosaico mjml support. Added "MJML Sample"
 wizard to mosaico templates.

---
 client/src/templates/mosaico/CUD.js          |  13 +-
 client/src/templates/mosaico/List.js         |   1 +
 client/src/templates/mosaico/helpers.js      |   1 +
 client/src/templates/mosaico/mjml-mosaico.js | 180 +++++++++++++++-
 server/package.json                          |   1 +
 server/routes/sandboxed-mosaico.js           |  21 +-
 shared/mosaico-templates.js                  | 210 ++++++++++++++++++-
 7 files changed, 415 insertions(+), 12 deletions(-)

diff --git a/client/src/templates/mosaico/CUD.js b/client/src/templates/mosaico/CUD.js
index 776dc184..dd1dd69f 100644
--- a/client/src/templates/mosaico/CUD.js
+++ b/client/src/templates/mosaico/CUD.js
@@ -27,7 +27,7 @@ import {
 } from '../../lib/namespace';
 import {DeleteModalDialog} from "../../lib/modals";
 
-import {getVersafix} from "../../../../shared/mosaico-templates";
+import {getVersafix, getMJMLSample} from "../../../../shared/mosaico-templates";
 import {
     getTemplateTypes,
     getTemplateTypesOrder
@@ -87,6 +87,15 @@ export default class CUD extends Component {
                     html: getVersafix()
                 });
 
+            } else if (wizard === 'mjml-sample') {
+                this.populateFormValues({
+                    name: '',
+                    description: '',
+                    namespace: mailtrainConfig.user.namespace,
+                    type: 'mjml',
+                    mjml: getMJMLSample()
+                });
+
             } else {
                 this.populateFormValues({
                     name: '',
@@ -183,7 +192,7 @@ export default class CUD extends Component {
                 <Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
                     <InputField id="name" label={t('name')}/>
                     <TextArea id="description" label={t('description')}/>
-                    {isEdit ?
+                    {isEdit || this.props.wizard ?
                         <StaticField id="type" className={styles.formDisabled} label={t('type')}>
                             {typeKey && this.templateTypes[typeKey].typeName}
                         </StaticField>
diff --git a/client/src/templates/mosaico/List.js b/client/src/templates/mosaico/List.js
index 5e53ea56..af2aebe9 100644
--- a/client/src/templates/mosaico/List.js
+++ b/client/src/templates/mosaico/List.js
@@ -123,6 +123,7 @@ export default class List extends Component {
                         <ButtonDropdown buttonClassName="btn-primary" menuClassName="dropdown-menu-right" label={t('createMosaicoTemplate')}>
                             <DropdownLink to="/templates/mosaico/create">{t('blank')}</DropdownLink>
                             <DropdownLink to="/templates/mosaico/create/versafix">{t('versafixOne')}</DropdownLink>
+                            <DropdownLink to="/templates/mosaico/create/mjml-sample">{t('MJML Sample')}</DropdownLink>
                         </ButtonDropdown>
                     </Toolbar>
                 }
diff --git a/client/src/templates/mosaico/helpers.js b/client/src/templates/mosaico/helpers.js
index 10b98d22..ca73d342 100644
--- a/client/src/templates/mosaico/helpers.js
+++ b/client/src/templates/mosaico/helpers.js
@@ -52,6 +52,7 @@ export function getTemplateTypes(t) {
                 owner.setFormStatusMessage('success', t('MJML is valid.'));
             }
         } catch (err) {
+            console.log(err);
             owner.setFormStatusMessage('danger', t('Invalid MJML.'));
         }
     }
diff --git a/client/src/templates/mosaico/mjml-mosaico.js b/client/src/templates/mosaico/mjml-mosaico.js
index 227ac07d..bfe8c622 100644
--- a/client/src/templates/mosaico/mjml-mosaico.js
+++ b/client/src/templates/mosaico/mjml-mosaico.js
@@ -45,7 +45,7 @@ function handleMosaicoEditable(block, src) {
 
 
                 for (const attrMatch of attrsMatches) {
-                    if (attrMatch[1] === 'mosaico-editable') {
+                    if (attrMatch[1] === 'mj-mosaico-editable') {
                         const propertyId = attrMatch[2];
                         block.addMosaicoProperty(propertyId);
 
@@ -80,13 +80,24 @@ class MjMosaicoProperty extends HeadComponent {
     static allowedAttributes = {
         'property-id': 'string',
         label: 'string',
-        widget: 'string',
+        type: 'enum(image,link)'
     }
 
     handler() {
         const { add } = this.context;
 
-        add('style', ` @supports -ko-blockdefs { ${this.getAttribute('property-id')} { label: ${this.getAttribute('label')}; widget: ${this.getAttribute('widget')} } }`);
+        let properties = null;
+
+        const type = this.getAttribute('type');
+        if (type === 'image') {
+            properties = 'src url alt';
+        } else if (type === 'link') {
+            properties = 'text url';
+        }
+
+        const propertiesStr = properties ? ` properties: ${properties}` : '';
+
+        add('style', ` @supports -ko-blockdefs { ${this.getAttribute('property-id')} { label: ${this.getAttribute('label')};${propertiesStr} } }`);
     }
 }
 
@@ -247,7 +258,10 @@ class MjMosaicoImage extends BodyComponent {
         const propertyId = this.getAttribute('property-id');
         this.propertyId = propertyId || `image_${getId()}`;
 
-        getParent().addMosaicoProperty(this.propertyId);
+        const parentBlock = getParent();
+        if (parentBlock) {
+            parentBlock.addMosaicoProperty(this.propertyId);
+        }
     }
 
     static tagOmission = true
@@ -425,6 +439,154 @@ class MjMosaicoImage extends BodyComponent {
 }
 
 
+// Adapted from https://github.com/mjmlio/mjml/blob/master/packages/mjml-button/src/index.js
+class MjMosaicoButton extends BodyComponent {
+    constructor(initialDatas = {}) {
+        super(initialDatas);
+
+        const propertyId = this.getAttribute('property-id');
+        this.propertyId = propertyId || `button_${getId()}`;
+
+        const parentBlock = getParent();
+        if (parentBlock) {
+            parentBlock.addMosaicoProperty(this.propertyId);
+        }
+    }
+
+    static endingTag = true
+
+    static allowedAttributes = {
+        'property-id': 'string',
+        align: 'enum(left,center,right)',
+        'background-color': 'color',
+        'border-bottom': 'string',
+        'border-left': 'string',
+        'border-radius': 'string',
+        'border-right': 'string',
+        'border-top': 'string',
+        border: 'string',
+        color: 'color',
+        'container-background-color': 'color',
+        'font-family': 'string',
+        'font-size': 'unit(px)',
+        'font-style': 'string',
+        'font-weight': 'string',
+        height: 'unit(px,%)',
+        name: 'string',
+        'inner-padding': 'unit(px,%)',
+        'line-height': 'unit(px,%)',
+        'padding-bottom': 'unit(px,%)',
+        'padding-left': 'unit(px,%)',
+        'padding-right': 'unit(px,%)',
+        'padding-top': 'unit(px,%)',
+        padding: 'unit(px,%){1,4}',
+        rel: 'string',
+        target: 'string',
+        'text-decoration': 'string',
+        'text-transform': 'string',
+        'vertical-align': 'enum(top,bottom,middle)',
+        'text-align': 'enum(left,right,center)',
+        width: 'unit(px,%)',
+    }
+
+    static defaultAttributes = {
+        align: 'center',
+        'background-color': '#414141',
+        border: 'none',
+        'border-radius': '3px',
+        color: '#ffffff',
+        'font-family': 'Ubuntu, Helvetica, Arial, sans-serif',
+        'font-size': '13px',
+        'font-weight': 'normal',
+        'inner-padding': '10px 25px',
+        'line-height': '120%',
+        padding: '10px 25px',
+        target: '_blank',
+        'text-decoration': 'none',
+        'text-transform': 'none',
+        'vertical-align': 'middle',
+    }
+
+    getStyles() {
+        return {
+            table: {
+                'border-collapse': 'separate',
+                width: this.getAttribute('width'),
+                'line-height': '100%',
+            },
+            td: {
+                border: this.getAttribute('border'),
+                'border-bottom': this.getAttribute('border-bottom'),
+                'border-left': this.getAttribute('border-left'),
+                'border-radius': this.getAttribute('border-radius'),
+                'border-right': this.getAttribute('border-right'),
+                'border-top': this.getAttribute('border-top'),
+                cursor: 'auto',
+                'font-style': this.getAttribute('font-style'),
+                height: this.getAttribute('height'),
+                padding: this.getAttribute('inner-padding'),
+                'text-align': this.getAttribute('text-align'),
+                background: this.getAttribute('background-color'),
+            },
+            content: {
+                background: this.getAttribute('background-color'),
+                color: this.getAttribute('color'),
+                'font-family': this.getAttribute('font-family'),
+                'font-size': this.getAttribute('font-size'),
+                'font-style': this.getAttribute('font-style'),
+                'font-weight': this.getAttribute('font-weight'),
+                'line-height': this.getAttribute('line-height'),
+                Margin: '0',
+                'text-decoration': this.getAttribute('text-decoration'),
+                'text-transform': this.getAttribute('text-transform'),
+            },
+        }
+    }
+
+    render() {
+        return `
+            <table
+                ${this.htmlAttributes({
+                    border: '0',
+                    cellpadding: '0',
+                    cellspacing: '0',
+                    role: 'presentation',
+                    style: 'table',
+                })}
+            >
+                <tr>
+                    <td
+                        ${this.htmlAttributes({
+                            align: 'center',
+                            bgcolor:
+                                this.getAttribute('background-color') === 'none'
+                                    ? undefined
+                                    : this.getAttribute('background-color'),
+                            role: 'presentation',
+                            style: 'td',
+                            valign: this.getAttribute('vertical-align'),
+                        })}
+                    >
+                        <a
+                            ${this.htmlAttributes({
+                                rel: this.getAttribute('rel'),
+                                name: this.getAttribute('name'),
+                                style: 'content',
+                                target: this.getAttribute('target'),
+                                'data-ko-editable': this.getAttribute('property-id') + '.text',
+                                'data-ko-link': this.getAttribute('property-id') + '.url'
+                            })}
+                        >
+                            ${this.getContent()}
+                        </a>
+                    </td>
+                </tr>
+            </table>
+        `;
+    }
+}
+
+
 
 const mjmlInstance = new MJML();
 
@@ -432,15 +594,21 @@ mjmlInstance.registerComponent(MjMosaicoContainer);
 mjmlInstance.registerComponent(MjMosaicoBlock);
 mjmlInstance.registerComponent(MjMosaicoInnerBlock);
 mjmlInstance.registerComponent(MjMosaicoImage);
+mjmlInstance.registerComponent(MjMosaicoButton);
 mjmlInstance.registerComponent(MjMosaicoProperty);
 
 mjmlInstance.registerDependencies({
     'mj-mosaico-container': ['mj-mosaico-block', 'mj-mosaico-inner-block'],
     'mj-body': ['mj-mosaico-container', 'mj-mosaico-block'],
     'mj-section': ['mj-mosaico-container', 'mj-mosaico-block'],
-    'mj-column': ['mj-mosaico-container', 'mj-mosaico-inner-block', 'mj-mosaico-image'],
+    'mj-column': ['mj-mosaico-container', 'mj-mosaico-inner-block', 'mj-mosaico-image', 'mj-mosaico-button'],
     'mj-mosaico-block': ['mj-section', 'mj-column'],
-    'mj-mosaico-inner-block': ['mj-mosaico-image', 'mj-divider', 'mj-text', 'mj-image', 'mj-table']
+    'mj-mosaico-inner-block': [
+        'mj-mosaico-image', 'mj-mosaico-button',
+        'mj-accordion', 'mj-button', 'mj-carousel', 'mj-divider', 'mj-html', 'mj-image', 'mj-invoice', 'mj-list',
+        'mj-location', 'mj-raw', 'mj-social', 'mj-spacer', 'mj-table', 'mj-text', 'mj-navbar'
+    ],
+    'mj-head': ['mj-mosaico-property']
 });
 
 mjmlInstance.addToHeader(`
diff --git a/server/package.json b/server/package.json
index b0700752..25d7230a 100644
--- a/server/package.json
+++ b/server/package.json
@@ -47,6 +47,7 @@
     "bluebird": "^3.5.3",
     "body-parser": "^1.18.3",
     "bounce-handler": "7.3.2-fork.3",
+    "capitalize": "^2.0.0",
     "compression": "^1.7.3",
     "config": "^3.0.1",
     "connect-flash": "^0.1.1",
diff --git a/server/routes/sandboxed-mosaico.js b/server/routes/sandboxed-mosaico.js
index 88dbaa48..610d4018 100644
--- a/server/routes/sandboxed-mosaico.js
+++ b/server/routes/sandboxed-mosaico.js
@@ -10,6 +10,7 @@ const gm = require('gm').subClass({
     imageMagick: true
 });
 const users = require('../models/users');
+const capitalize = require('capitalize');
 
 const fs = require('fs-extra')
 
@@ -51,7 +52,7 @@ users.registerRestrictedAccessTokenMethod('mosaico', async ({entityTypeId, entit
 });
 
 
-async function placeholderImage(width, height) {
+async function placeholderImage(width, height, labelText, labelColor) {
     const magick = gm(width, height, '#707070');
     const streamAsync = bluebird.promisify(magick.stream.bind(magick));
 
@@ -72,11 +73,14 @@ async function placeholderImage(width, height) {
         }
     }
 
+    labelText = labelText || `${width} x ${height}`;
+    labelColor = labelColor || '#B0B0B0';
+
     // text
     magick
-        .fill('#B0B0B0')
+        .fill(labelColor)
         .fontSize(20)
-        .drawText(0, 0, width + ' x ' + height, 'center');
+        .drawText(0, 0, labelText, 'center');
 
     const stream = await streamAsync('png');
 
@@ -156,6 +160,17 @@ function getRouter(appType) {
         // This is a fallback to versafix-1 if the block thumbnail is not defined by the template
         router.use('/templates/:mosaicoTemplateId/edres', express.static(path.join(__dirname, '..', '..', 'client', 'static', 'mosaico', 'templates', 'versafix-1', 'edres')));
 
+        // This is the final fallback for a block thumbnail, so that at least something gets returned
+        router.getAsync('/templates/:mosaicoTemplateId/edres/:fileName', async (req, res, next) => {
+            let labelText = req.params.fileName.replace(/\.png$/, '');
+            labelText = labelText.replace(/[_]/g, ' ');
+            labelText = capitalize.words(labelText);
+
+            const image = await placeholderImage(340, 100, labelText, '#ffffff');
+            res.set('Content-Type', 'image/' + image.format);
+            image.stream.pipe(res);
+        });
+
         fileHelpers.installUploadHandler(router, '/upload/:type/:entityId', files.ReplacementBehavior.RENAME, null, 'file', resp => {
             return {
                 files: resp.files.map(f => ({name: f.name, url: f.url, size: f.size, thumbnailUrl: f.thumbnailUrl}))
diff --git a/shared/mosaico-templates.js b/shared/mosaico-templates.js
index b2992150..1e011f79 100644
--- a/shared/mosaico-templates.js
+++ b/shared/mosaico-templates.js
@@ -1532,10 +1532,218 @@ const versafix = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     '</body>\n' +
     '</html>\n';
 
+const mjmlSample = '<mjml>\n' +
+    '  <mj-head>\n' +
+    '    <mj-attributes>\n' +
+    '      <mj-body background-color="white"/>\n' +
+    '      <mj-section padding="0px 0px" />\n' +
+    '      <mj-text padding="0px 10px" />\n' +
+    '      <mj-image padding="10px 10px" alt="" />\n' +
+    '      <mj-mosaico-image padding="10px 10px" alt="" />\n' +
+    '      <mj-mosaico-button align="left" background-color="#e85034" color="#fff" border-radius="24px" font-size="11px" />\n' +
+    '      \n' +
+    '      <mj-class name="header-section" margin-top="10px" background-color="#e85034" padding-top="5px" padding-bottom="5px" full-width="full-width" css-class="header"/>\n' +
+    '\n' +
+    '      <mj-class name="banner-section" padding-top="10px" />\n' +
+    '\n' +
+    '      <mj-class name="feature-section" padding-top="10px" padding-bottom="15px" css-class="feature" />\n' +
+    '      \n' +
+    '      <mj-class name="divider-section" background-color="#e85034" vertical-align="middle" full-width="full-width" padding-top="10px" padding-bottom="5px" css-class="divider"/>\n' +
+    '\n' +
+    '      <mj-class name="article-section" padding-top="10px" padding-bottom="10px" css-class="article" />\n' +
+    '\n' +
+    '      <mj-class name="links-section" padding-top="0px" padding-bottom="0px" background-color="#e85034" vertical-align="middle" full-width="full-width" />\n' +
+    '      <mj-social font-size="12px" font-family="arial,helvetica neue,helvetica,sans-serif" icon-size="30px" mode="horizontal" />\n' +
+    '      <mj-social-element text-padding="4px 15px 4px 0px" padding="8px" alt="" color="white"/>\n' +
+    '      \n' +
+    '      <mj-class name="footer-section" padding-top="30px"/>\n' +
+    '      <mj-class name="footer-text" css-class="footer" />\n' +
+    '    </mj-attributes>\n' +
+    '    \n' +
+    '    <mj-mosaico-property property-id="leftImage" label="Left Image" type="image" />\n' +
+    '    <mj-mosaico-property property-id="middleImage" label="Middle Image" type="image" />\n' +
+    '    <mj-mosaico-property property-id="rightImage" label="Right Image" type="image" />\n' +
+    '    <mj-mosaico-property property-id="readMoreLink" label="Button" type="link" />\n' +
+    '    \n' +
+    '    <mj-style>\n' +
+    '      p {\n' +
+    '        font-family: Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;\n' +
+    '        font-size: 12px;\n' +
+    '        color: #9da3a3;\n' +
+    '        margin-top: 8px;\n' +
+    '      }\n' +
+    '      \n' +
+    '      h2 {\n' +
+    '        margin: 5px 0px 0px 0px;\n' +
+    '        font-size: 15px;\n' +
+    '        font-weight: normal;\n' +
+    '      }\n' +
+    '      \n' +
+    '      .header a {\n' +
+    '        text-decoration: none;\n' +
+    '        color: white;\n' +
+    '      }\n' +
+    '      \n' +
+    '      .feature p {\n' +
+    '        text-align: center;\n' +
+    '      }\n' +
+    '      \n' +
+    '      .feature h2 {\n' +
+    '        color: #e85034;\n' +
+    '        text-align: center;\n' +
+    '      }\n' +
+    '      \n' +
+    '      .divider h2 {\n' +
+    '        color: white;\n' +
+    '        text-align: center;\n' +
+    '      }\n' +
+    '      \n' +
+    '      .divider p {\n' +
+    '        color: #f8d5d1;\n' +
+    '        text-align: center;\n' +
+    '      }\n' +
+    '\n' +
+    '      .article h2 {\n' +
+    '        font-weight: bold;\n' +
+    '        margin-top: 10px;\n' +
+    '      }\n' +
+    '      \n' +
+    '      .article p {\n' +
+    '        color: #45474e;\n' +
+    '      }\n' +
+    '\n' +
+    '      .footer a {\n' +
+    '        color: #3A3A3A;\n' +
+    '      }\n' +
+    '\n' +
+    '      .footer p {\n' +
+    '        font-family: arial,helvetica neue,helvetica,sans-serif;\n' +
+    '        font-size: 12px;\n' +
+    '        text-align: center;\n' +
+    '      }\n' +
+    '    </mj-style>\n' +
+    '  </mj-head>\n' +
+    '  \n' +
+    '  <mj-body>\n' +
+    '    \n' +
+    '    <mj-section mj-class="header-section">\n' +
+    '      <mj-column>\n' +
+    '        <mj-text align="left"><a href="https://lists.example.org/subscription/[LIST_ID]?locale=en-US">Subscribe</a></mj-text>\n' +
+    '      </mj-column>\n' +
+    '      <mj-column>\n' +
+    '        <mj-text align="right"><a href="[LINK_BROWSER]">View&nbsp;in&nbsp;browser</a></mj-text>\n' +
+    '      </mj-column>\n' +
+    '    </mj-section>\n' +
+    '    \n' +
+    '    <mj-mosaico-block block-id="banner" label="Banner">\n' +
+    '      <mj-section mj-class="banner-section">\n' +
+    '        <mj-column>\n' +
+    '          <mj-mosaico-image property-id="image" placeholder-height="400" href="https://www.example.com/xxx" />\n' +
+    '        </mj-column>\n' +
+    '      </mj-section>\n' +
+    '    </mj-mosaico-block>\n' +
+    '\n' +
+    '    <mj-mosaico-container>\n' +
+    '      \n' +
+    '      <mj-mosaico-block block-id="feature_section" label="Feature">\n' +
+    '        <mj-section mj-class="feature-section">\n' +
+    '          <mj-column>\n' +
+    '            <mj-mosaico-image property-id="leftImage" placeholder-height="150" href-editable="true" />\n' +
+    '            <mj-text>\n' +
+    '              <h2 mj-mosaico-editable="leftTitleText">Lorem ipsum dolor</h2>\n' +
+    '              <div mj-mosaico-editable="leftBodyText">\n' +
+    '                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend sagittis nunc, et fermentum est ullamcorper dignissim.</p>\n' +
+    '              </div>\n' +
+    '            </mj-text>\n' +
+    '          </mj-column>\n' +
+    '          <mj-column>\n' +
+    '            <mj-mosaico-image property-id="middleImage" placeholder-height="150" href-editable="true" />\n' +
+    '            <mj-text>\n' +
+    '              <h2 mj-mosaico-editable="middleTitleText">Lorem ipsum dolor</h2>\n' +
+    '              <div mj-mosaico-editable="leftBodyText">\n' +
+    '                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend sagittis nunc, et fermentum est ullamcorper dignissim.</p>\n' +
+    '              </div>\n' +
+    '            </mj-text>\n' +
+    '          </mj-column>\n' +
+    '          <mj-column>\n' +
+    '            <mj-mosaico-image property-id="rightImage" placeholder-height="150" href-editable="true" />\n' +
+    '            <mj-text>\n' +
+    '              <h2 mj-mosaico-editable="rightTitleText">Lorem ipsum dolor</h2>\n' +
+    '              <div mj-mosaico-editable="leftBodyText">\n' +
+    '                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend sagittis nunc, et fermentum est ullamcorper dignissim.</p>\n' +
+    '              </div>\n' +
+    '            </mj-text>\n' +
+    '          </mj-column>\n' +
+    '        </mj-section>\n' +
+    '      </mj-mosaico-block>\n' +
+    '\n' +
+    '      <mj-mosaico-block block-id="divider_section" label="Divider">\n' +
+    '        <mj-section mj-class="divider-section">\n' +
+    '          <mj-column>\n' +
+    '            <mj-text>\n' +
+    '              <h2 mj-mosaico-editable="titleText">Lorem ipsum dolor</h2>\n' +
+    '            </mj-text>\n' +
+    '            <mj-divider border-color="white" border-width="1px" padding-bottom="10px" padding-top="15px"></mj-divider>\n' +
+    '            <mj-text>\n' +
+    '              <div mj-mosaico-editable="bodyText">\n' +
+    '                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>\n' +
+    '              </div>\n' +
+    '            </mj-text>\n' +
+    '          </mj-column>\n' +
+    '        </mj-section>\n' +
+    '      </mj-mosaico-block>    \n' +
+    '    \n' +
+    '      <mj-mosaico-block block-id="article_section" label="Article">\n' +
+    '        <mj-section mj-class="article-section">\n' +
+    '          <mj-column>\n' +
+    '            <mj-mosaico-image property-id="image" placeholder-height="280" href-editable="true" />\n' +
+    '          </mj-column>\n' +
+    '          <mj-column>\n' +
+    '            <mj-text>\n' +
+    '              <h2 mj-mosaico-editable="titleText">Lorem ipsum dolor</h2>\n' +
+    '              <div mj-mosaico-editable="bodyText">\n' +
+    '                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>\n' +
+    '              </div>\n' +
+    '            </mj-text>\n' +
+    '            <mj-mosaico-button property-id="readMoreLink" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" padding-left="10px" padding-bottom="15px" padding-top="15px">Read more ...</mj-mosaico-button>\n' +
+    '          </mj-column>\n' +
+    '        </mj-section>\n' +
+    '      </mj-mosaico-block>  \n' +
+    '      \n' +
+    '    </mj-mosaico-container>    \n' +
+    '\n' +
+    '    <mj-section mj-class="links-section">\n' +
+    '      <mj-column>\n' +
+    '        <mj-social border-radius="5px">\n' +
+    '          <mj-social-element name="facebook" href="[LINK_BROWSER]">Share on Facebook</mj-social-element>\n' +
+    '          <mj-social-element  name="twitter" href="[LINK_BROWSER]">Tweet</mj-social-element>\n' +
+    '        </mj-social>       \n' +
+    '      </mj-column>\n' +
+    '    </mj-section>\n' +
+    '    \n' +
+    '    <mj-section mj-class="footer-section">\n' +
+    '      <mj-column>\n' +
+    '        <mj-text mj-class="footer-text">\n' +
+    '          <p>This email was sent to <a href="mailto:[EMAIL]">[EMAIL]</a><p>\n' +
+    '          <p> &nbsp; <a href="[LINK_UNSUBSCRIBE]">Unsubscribe&nbsp;from&nbsp;this&nbsp;list</a> &nbsp;  &nbsp; <a href="[LINK_PREFERENCES]">Update&nbsp;subscription&nbsp;preferences</a> &nbsp; </p>\n' +
+    '          <p>Your address XXXXXX</p>\n' +
+    '        </mj-text>\n' +
+    '      </mj-column>\n' +
+    '    </mj-section>\n' +
+    '    \n' +
+    '  </mj-body>\n' +
+    '</mjml>';
+
+
 function getVersafix() {
     return versafix;
 }
 
+function getMJMLSample() {
+    return mjmlSample;
+}
+
 module.exports = {
-    getVersafix
+    getVersafix,
+    getMJMLSample
 };
\ No newline at end of file