Basic support for Mosaico-based email templates.

client/src/templates/CUD.js

@@ -39,7 +39,8 @@ export default class CUD extends Component {
         this.templateTypes = getTemplateTypes(props.t);
 
         this.state = {
-            showMergeTagReference: false
+            showMergeTagReference: false,
+            elementInFullscreen: false
         };
 
         this.initForm();
@@ -66,7 +67,8 @@ export default class CUD extends Component {
                 namespace: mailtrainConfig.user.namespace,
                 type: mailtrainConfig.editors[0],
                 text: '',
-                html: ''
+                html: '',
+                data: {}
             });
         }
     }
@@ -92,6 +94,11 @@ export default class CUD extends Component {
     async submitHandler() {
         const t = this.props.t;
 
+        if (this.props.entity) {
+            const typeKey = this.getFormValue('type');
+            await this.templateTypes[typeKey].htmlEditorBeforeSave(this);
+        }
+
         let sendMethod, url;
         if (this.props.entity) {
             sendMethod = FormSendMethod.PUT;
@@ -120,6 +127,9 @@ export default class CUD extends Component {
     }
 
     async extractPlainText() {
+        const typeKey = this.getFormValue('type');
+        await this.templateTypes[typeKey].htmlEditorBeforeSave(this);
+
         const html = this.getFormValue('html');
         if (!html) {
             alert('Missing HTML content');
@@ -145,6 +155,12 @@ export default class CUD extends Component {
         });
     }
 
+    async setElementInFullscreen(elementInFullscreen) {
+        this.setState({
+            elementInFullscreen
+        });
+    }
+
     render() {
         const t = this.props.t;
         const isEdit = !!this.props.entity;
@@ -241,7 +257,7 @@ export default class CUD extends Component {
                     </div>}
                 </AlignedRow>
 
-                {this.templateTypes[typeKey].form}
+                {this.templateTypes[typeKey].getHTMLEditor(this)}
 
                 <ACEEditor id="text" height="400px" mode="text" label={t('Template content (plain text)')} help={<Trans>To extract the text from HTML click <ActionLink onClickAsync={::this.extractPlainText}>here</ActionLink>. Please note that your existing plaintext in the field above will be overwritten. This feature uses the <a href="http://premailer.dialect.ca/api">Premailer API</a>, a third party service. Their Terms of Service and Privacy Policy apply.</Trans>}/>
             </div>
@@ -249,7 +265,7 @@ export default class CUD extends Component {
 
 
         return (
-            <div>
+            <div className={this.state.elementInFullscreen ? styles.withElementInFullscreen : ''}>
                 {canDelete &&
                     <DeleteModalDialog
                         stateOwner={this}

client/src/templates/helpers.js

@@ -3,17 +3,27 @@
 import React from "react";
 import {
     ACEEditor,
+    AlignedRow,
     CKEditor
 } from "../lib/form";
 import 'brace/mode/text';
 import 'brace/mode/html'
 
+import {MosaicoEditor, ResourceType} from "../lib/mosaico";
+
+
 export function getTemplateTypes(t) {
 
     const templateTypes = {};
 
     templateTypes.mosaico = {
-        typeName: t('Mosaico')
+        typeName: t('Mosaico'),
+        getHTMLEditor: owner => <AlignedRow label={t('Template content (HTML)')}><MosaicoEditor ref={node => owner.editorNode = node} entity={owner.props.entity} entityTypeId={ResourceType.TEMPLATE} title={t('Mosaico Template Designer')} onFullscreenAsync={::owner.setElementInFullscreen}/></AlignedRow>,
+        htmlEditorBeforeSave: async owner => {
+            const {html, metadata, model} = await owner.editorNode.exportState();
+            owner.updateFormValue('html', html);
+            owner.updateFormValue('data', {metadata, model});
+        }
     };
 
     templateTypes.grapejs = {
@@ -22,12 +32,14 @@ export function getTemplateTypes(t) {
 
     templateTypes.ckeditor = {
         typeName: t('CKEditor'),
-        form: <CKEditor id="html" height="600px" label={t('Template content (HTML)')}/>
+        getHTMLEditor: owner => <CKEditor id="html" height="600px" label={t('Template content (HTML)')}/>,
+        htmlEditorBeforeSave: async owner => {}
     };
 
     templateTypes.codeeditor = {
         typeName: t('Code Editor'),
-        form: <ACEEditor id="html" height="600px" mode="html" label={t('Template content (HTML)')}/>
+        getHTMLEditor: owner => <ACEEditor id="html" height="600px" mode="html" label={t('Template content (HTML)')}/>,
+        htmlEditorBeforeSave: async owner => {}
     };
 
     templateTypes.mjml = {

client/src/templates/root.js

@@ -1,11 +1,7 @@
 'use strict';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { I18nextProvider } from 'react-i18next';
-import i18n from '../lib/i18n';
 
-import { Section } from '../lib/page';
 import TemplatesCUD from './CUD';
 import TemplatesList from './List';
 import Share from '../shares/Share';