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

Included MJML4

Browse source
This commit is contained in:
Tomas Bures 2018-11-10 02:05:26 +01:00
parent e2093e22fe
commit 9f467762c0
18 changed files with 15949 additions and 3889 deletions
Download patch file Download diff file Expand all files Collapse all files

1
client/src/lib/page.js
View file

@ -67,7 +67,6 @@ class Breadcrumb extends Component {
class SecondaryNavBar extends Component {
static propTypes = {
route: PropTypes.object.isRequired,
params: PropTypes.object.isRequired,
resolved: PropTypes.object.isRequired,
className: PropTypes.string

71
client/src/lib/sandboxed-grapesjs-root.js
View file

@ -20,12 +20,15 @@ import PropTypes
import {
getPublicUrl,
getSandboxUrl,
getTrustedUrl
getTrustedUrl,
getUrl
} from "./urls";
import {
base,
unbase
} from "../../../shared/templates";
import mjml2html from "../../mjml/dist/mjml";
console.log(mjml2html);
import 'grapesjs/dist/css/grapes.min.css';
import grapesjs from 'grapesjs';
@ -51,56 +54,72 @@ export class GrapesJSSandbox extends Component {
static propTypes = {
entityTypeId: PropTypes.string,
entityId: PropTypes.number,
initialModel: PropTypes.object
initialSource: PropTypes.string,
initialStyle: PropTypes.string
}
async exportState(method, params) {
const editor = this.editor;
// If exportState comes during text editing (via RichTextEditor), we need to cancel the editing, so that the
// text being edited is stored in the model
const sel = editor.getSelected();
if (sel) {
sel.view.disableEditing();
}
editor.select(null);
const trustedUrlBase = getTrustedUrl();
const sandboxUrlBase = getSandboxUrl();
const publicUrlBase = getPublicUrl();
const source = unbase(editor.getHtml(), trustedUrlBase, sandboxUrlBase, publicUrlBase, true);
const style = unbase(editor.getCss(), trustedUrlBase, sandboxUrlBase, publicUrlBase, true);
let html;
html = unbase(editor.getHtml(), trustedUrlBase, sandboxUrlBase, publicUrlBase, true);
const model = {
css: editor.getCss(),
source: editor.getHtml(),
};
const preMjml = '<mjml><mj-head></mj-head><mj-body>';
const postMjml = '</mj-body></mjml>';
const mjml = preMjml + source + postMjml;
console.log(mjml);
console.log(model.css);
console.log(model.source);
const mjmlRes = mjml2html(mjml);
console.log(mjmlRes);
console.log(mjmlRes.html);
console.log(mjmlRes.errors);
console.log(mjmlRes.errors[0]);
return {
html,
model
style: style,
source: source
};
}
componentDidMount() {
const props = this.props;
parentRPC.setMethodHandler('exportState', ::this.exportState);
const trustedUrlBase = getTrustedUrl();
const sandboxUrlBase = getSandboxUrl();
const publicUrlBase = getPublicUrl();
const model = this.props.initialModel || {}
const source = props.initialSource ?
base(props.initialSource, trustedUrlBase, sandboxUrlBase, publicUrlBase) :
' <mj-container>\n' +
' <mj-section>\n' +
' <mj-column>\n' +
' <mj-text>My Company</mj-text>\n' +
' </mj-column>\n' +
' </mj-section>\n' +
' </mj-container>';
const source = model.source && base(model.source, trustedUrlBase, sandboxUrlBase, publicUrlBase);
const css = model.css && base(model.css, trustedUrlBase, sandboxUrlBase, publicUrlBase);
/*
' <mj-container>\n' +
' <mj-section>\n' +
' <mj-column>\n' +
' <mj-text>My Company</mj-text>\n' +
' </mj-column>\n' +
' </mj-section>\n' +
' <mj-container>',
*/
const css = props.initialStyle && base(props.initialStyle, trustedUrlBase, sandboxUrlBase, publicUrlBase);
this.editor = grapesjs.init({
noticeOnUnload: false,
container: this.canvasNode,
height: '100%',
width: '100%',
@ -126,10 +145,12 @@ export class GrapesJSSandbox extends Component {
'gjs-mjml'
],
pluginsOpts: {
'gjs-mjml': {}
'gjs-mjml': {
preMjml: '<mjml><mj-head></mj-head><mj-body>',
postMjml: '</mj-body></mjml>'
}
}
});
}
render() {

6
client/src/lib/sandboxed-grapesjs.js
View file

@ -24,7 +24,8 @@ export class GrapesJSHost extends Component {
static propTypes = {
entityTypeId: PropTypes.string,
entity: PropTypes.object,
initialModel: PropTypes.object,
initialSource: PropTypes.string,
initialStyle: PropTypes.string,
title: PropTypes.string,
onFullscreenAsync: PropTypes.func
}
@ -47,7 +48,8 @@ export class GrapesJSHost extends Component {
const editorData = {
entityTypeId: this.props.entityTypeId,
entityId: this.props.entity.id,
initialModel: this.props.initialModel
initialSource: this.props.initialSource,
initialStyle: this.props.initialStyle
};
const tokenData = {

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

@ -183,28 +183,40 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
<GrapesJSHost
ref={node => owner.editorNode = node}
entity={owner.props.entity}
initialModel={owner.getFormValue(prefix + 'grapesJSData')}
entityTypeId={entityTypeId}
initialSource={owner.getFormValue(prefix + 'grapesJSData').source}
initialStyle={owner.getFormValue(prefix + 'grapesJSData').style}
title={t('GrapesJS Template Designer')}
onFullscreenAsync={::owner.setElementInFullscreen}
/>
</AlignedRow>,
exportHTMLEditorData: async owner => {
const {html, model} = await owner.editorNode.exportState();
const {html, source, style} = await owner.editorNode.exportState();
owner.updateFormValue(prefix + 'html', html);
owner.updateFormValue(prefix + 'grapesJSData', model);
owner.updateFormValue(prefix + 'grapesJSData', {
source,
style
});
},
initData: () => ({
[prefix + 'grapesJSData']: {}
}),
afterLoad: data => {
data[prefix + 'grapesJSData'] = data[prefix + 'data'];
data[prefix + 'grapesJSData'] = {
source: data[prefix + 'data'].source,
style: data[prefix + 'data'].style
};
},
beforeSave: data => {
data[prefix + 'data'] = data[prefix + 'grapesJSData'];
data[prefix + 'data'] = {
source: data[prefix + 'grapesJSData'].source,
style: data[prefix + 'grapesJSData'].style
};
clearBeforeSave(data);
},
afterTypeChange: mutState => {},
afterTypeChange: mutState => {
initFieldsIfMissing(mutState, 'grapesjs');
},
validate: state => {}
};