public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Added support to define mosaico templates in MJML. (A wizard that shows how to do this is TODO.)

Browse source 
Adopted some core features (router, etc.) from IVIS.
This commit is contained in:
Tomas Bures 2019-04-03 12:13:49 +02:00
parent 3b20ac5ce7
commit ad9f5d16bf
28 changed files with 1381 additions and 538 deletions
Download patch file Download diff file Expand all files Collapse all files

43
client/src/templates/helpers.js
View file

@ -114,7 +114,7 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
<AlignedRow
label={t('templateContentHtml')}>
<MosaicoHost
ref={node => owner.editorNode = node}
ref={owner.editorNodeRefHandler}
entity={owner.props.entity}
initialModel={owner.getFormValue(prefix + 'mosaicoData').model}
initialMetadata={owner.getFormValue(prefix + 'mosaicoData').metadata}
@ -124,6 +124,7 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
onSave={::owner.save}
canSave={owner.isFormWithoutErrors()}
onTestSend={::owner.showTestSendModal}
onShowExport={::owner.showExportModal}
onFullscreenAsync={::owner.setElementInFullscreen}
/>
</AlignedRow>,
@ -137,6 +138,11 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
}
};
},
exportContent: async (owner, contentType) => {
const {html, metadata, model} = await owner.editorNode.exportState();
if (contentType === 'html') return html;
return null;
},
initData: () => ({
[prefix + 'mosaicoTemplate']: '',
[prefix + 'mosaicoData']: {}
@ -189,7 +195,7 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
<AlignedRow
label={t('templateContentHtml')}>
<MosaicoHost
ref={node => owner.editorNode = node}
ref={owner.editorNodeRefHandler}
entity={owner.props.entity}
initialModel={owner.getFormValue(prefix + 'mosaicoData').model}
initialMetadata={owner.getFormValue(prefix + 'mosaicoData').metadata}
@ -199,6 +205,7 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
onSave={::owner.save}
canSave={owner.isFormWithoutErrors()}
onTestSend={::owner.showTestSendModal}
onShowExport={::owner.showExportModal}
onFullscreenAsync={::owner.setElementInFullscreen}
/>
</AlignedRow>,
@ -212,6 +219,11 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
}
};
},
exportContent: async (owner, contentType) => {
const {html, metadata, model} = await owner.editorNode.exportState();
if (contentType === 'html') return html;
return null;
},
initData: () => ({
[prefix + 'mosaicoFsTemplate']: mailtrainConfig.mosaico.fsTemplates[0].key,
[prefix + 'mosaicoData']: {}
@ -267,7 +279,7 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
<AlignedRow
label={t('templateContentHtml')}>
<GrapesJSHost
ref={node => owner.editorNode = node}
ref={owner.editorNodeRefHandler}
entity={owner.props.entity}
entityTypeId={entityTypeId}
initialSource={owner.getFormValue(prefix + 'grapesJSData').source}
@ -277,6 +289,7 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
onSave={::owner.save}
canSave={owner.isFormWithoutErrors()}
onTestSend={::owner.showTestSendModal}
onShowExport={::owner.showExportModal}
onFullscreenAsync={::owner.setElementInFullscreen}
/>
</AlignedRow>,
@ -290,6 +303,12 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
}
};
},
exportContent: async (owner, contentType) => {
const {html, source, style} = await owner.editorNode.exportState();
if (contentType === 'html') return html;
if (contentType === 'mjml') return source;
return null;
},
initData: () => ({
[prefix + 'grapesJSSourceType']: GrapesJSSourceType.MJML,
[prefix + 'grapesJSData']: {}
@ -323,7 +342,7 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
<AlignedRow
label={t('templateContentHtml')}>
<CKEditorHost
ref={node => owner.editorNode = node}
ref={owner.editorNodeRefHandler}
entity={owner.props.entity}
initialSource={owner.getFormValue(prefix + 'ckeditor4Data').source}
entityTypeId={entityTypeId}
@ -331,6 +350,7 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
onSave={::owner.save}
canSave={owner.isFormWithoutErrors()}
onTestSend={::owner.showTestSendModal}
onShowExport={::owner.showExportModal}
onFullscreenAsync={::owner.setElementInFullscreen}
/>
</AlignedRow>,
@ -343,6 +363,11 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
}
};
},
exportContent: async (owner, contentType) => {
const {html, source} = await owner.editorNode.exportState();
if (contentType === 'html') return html;
return null;
},
initData: () => ({
[prefix + 'ckeditor4Data']: {}
}),
@ -394,7 +419,7 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
<AlignedRow
label={t('templateContentHtml')}>
<CodeEditorHost
ref={node => owner.editorNode = node}
ref={owner.editorNodeRefHandler}
entity={owner.props.entity}
entityTypeId={entityTypeId}
initialSource={owner.getFormValue(prefix + 'codeEditorData').source}
@ -403,6 +428,7 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
onSave={::owner.save}
canSave={owner.isFormWithoutErrors()}
onTestSend={::owner.showTestSendModal}
onShowExport={::owner.showExportModal}
onFullscreenAsync={::owner.setElementInFullscreen}
/>
</AlignedRow>,
@ -415,6 +441,11 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
}
};
},
exportContent: async (owner, contentType) => {
const {html, source} = await owner.editorNode.exportState();
if (contentType === 'html') return html;
return null;
},
initData: () => ({
[prefix + 'codeEditorSourceType']: CodeEditorSourceType.HTML,
[prefix + 'codeEditorData']: {}
@ -607,7 +638,7 @@ export function getEditForm(owner, typeKey, prefix = '') {
height="400px"
mode="text"
label={t('templateContentPlainText')}
help={<Trans i18nKey="toExtractTheTextFromHtmlClickHerePlease">To extract the text from HTML click <ActionLink onClickAsync={::owner.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>}
help={<Trans i18nKey="toExtractTheTextFromHtmlClickHerePlease">To extract the text from HTML click <ActionLink onClickAsync={::owner.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>
);