Added sandboxed CKEditor 4 as a template editor

CHANGELOG.md

@@ -10,7 +10,7 @@
   * Fixed security issue where description tags were able to include script tags. Reported by Andreas Lindh. Fixed with [ae6affda](https://github.com/Mailtrain-org/mailtrain/commit/ae6affda8193f034e06f7e095ee23821a83d5190)
   * Fixed security issue where templates that looked like file paths loaded content from arbitrary files. Reported by Andreas Lindh. Fixed with [0879fa41](https://github.com/Mailtrain-org/mailtrain/commit/0879fa412a2d4a417aeca5cd5092a8f86531e7ef)
   * Fixed security issue where users were able to use html tags in subscription values. Reported by Andreas Lindh. Fixed with [9d5fb816](https://github.com/Mailtrain-org/mailtrain/commit/9d5fb816c937114966d4f589e1ad4e164ff3a187)
-  * Support for multiple HTML editors (Mosaico, GrapeJS, Summernote, HTML code)
+  * Support for multiple HTML editors (Mosaico, Grapesjs, Summernote, HTML code)
 
 ## 1.22.0 2017-03-02
 

TODO.md

@@ -3,7 +3,7 @@
 
 ### Templates
 - Add MJML template editor
-- Include GrapeJS with MJML support
+- Include Grapesjs with MJML support
 - CKEditor to sandbox
 - Add Files support to CKEditor
 

UPGRADE.md

@@ -5,7 +5,7 @@ The migration should happen almost automatically. There are however the followin
 1. Structure of config files (under `config`) has changed at many places. Revisit the default config (`config/default.toml`)
    and update your configs accordingly.
 
-2. Images uploaded in a template editor (Mosaico, GrapeJS, etc.) need to be manually moved to a new destination (under `client`).
+2. Images uploaded in a template editor (Mosaico, Grapesjs, etc.) need to be manually moved to a new destination (under `client`).
    For Mosaico, this means to move folders named by a number from `public/mosaico` to `client/static/mosaico`.
 
 3. Directory for custom Mosaico templates has changed from `public/mosaico/templates` to `client/static/mosaico/templates`.

client/package.json

@@ -37,6 +37,8 @@
     "axios": "^0.16.2",
     "datatables.net": "^1.10.15",
     "datatables.net-bs": "^1.10.15",
+    "grapesjs": "^0.14.40",
+    "grapesjs-mjml": "0.0.27",
     "i18next": "^8.4.3",
     "i18next-xhr-backend": "^1.4.2",
     "immutable": "^3.8.1",
@@ -46,6 +48,7 @@
     "querystringify": "^1.0.0",
     "react": "^15.6.1",
     "react-ace": "^5.1.0",
+    "react-ckeditor-component": "^1.1.0",
     "react-day-picker": "^6.1.0",
     "react-dnd-html5-backend": "^2.4.1",
     "react-dnd-touch-backend": "^0.3.13",

client/src/lib/ckeditor5.js

@@ -17,7 +17,7 @@ import ImagePlugin from '@ckeditor/ckeditor5-image/src/image';
 import ImageCaptionPlugin from '@ckeditor/ckeditor5-image/src/imagecaption';
 import ImageStylePlugin from '@ckeditor/ckeditor5-image/src/imagestyle';
 import ImageToolbarPlugin from '@ckeditor/ckeditor5-image/src/imagetoolbar';
-import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload';
+//import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload';
 import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
 import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
 import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
@@ -75,6 +75,8 @@ class InsertImage extends Plugin {
     }
 }
 
+/*
+Upload through CKEditor is disable because files can be managed by Files tab
 
 class UploadAdapter {
     constructor(loader, url, t) {
@@ -105,6 +107,7 @@ class MailtrainUploadAdapter extends Plugin {
         this.editor.plugins.get(FileRepository).createUploadAdapter = loader => new UploadAdapter(loader, this.editor.t);
     }
 }
+ */
 
 
 
@@ -123,14 +126,14 @@ ClassicEditor.builtinPlugins = [
     ImageCaptionPlugin,
     ImageStylePlugin,
     ImageToolbarPlugin,
-    ImageUploadPlugin,
+    //ImageUploadPlugin,
     LinkPlugin,
     ListPlugin,
     ParagraphPlugin,
     AlignmentPlugin,
     TablePlugin,
     TableToolbarPlugin,
-    MailtrainUploadAdapter,
+    //MailtrainUploadAdapter,
     InsertImage
 ];
 
@@ -152,7 +155,7 @@ ClassicEditor.defaultConfig = {
             'numberedList',
             '|',
             'insertImage',
-            'imageUpload',
+            // 'imageUpload',
             'blockQuote',
             '|',
             'insertTable',

client/src/lib/form.js

@@ -17,7 +17,7 @@ import ACEEditorRaw from 'react-ace';
 import 'brace/theme/github';
 import 'brace/ext/searchbox';
 
-import CKEditorRaw from './ckeditor';
+import CKEditorRaw from './ckeditor5';
 
 import DayPicker from 'react-day-picker';
 import 'react-day-picker/lib/style.css';

client/src/lib/grapesjs.js

@@ -0,0 +1,48 @@
+'use strict';
+
+import React, {Component} from 'react';
+
+import 'grapesjs/dist/css/grapes.min.css';
+import grapesjs from 'grapesjs';
+import grapesjsMjml from 'grapesjs-mjml';
+
+export default class GrapesJs extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+
+        };
+    }
+
+    componentDidMount() {
+        const editor = grapesjs.init({
+            container: this.canvasNode,
+            height: '100%',
+            width: 'auto',
+            noticeOnUnload: 0,
+            storageManager:{autoload: 0},
+            fromElement: false,
+            components:
+                '  <mj-container>\n' +
+                '        <mj-section>\n' +
+                '          <mj-column>\n' +
+                '            <mj-text>My Company</mj-text>\n' +
+                '          </mj-column>\n' +
+                '        </mj-section>\n' +
+                '  <mj-container>',
+            plugins: ['gjs-mjml'],
+            pluginsOpts: {
+                'gjs-mjml': {}
+            }
+        });
+    }
+
+    render() {
+        return (
+            <div>
+                <div ref={node => this.canvasNode = node}/>
+            </div>
+        );
+    }
+}

client/src/lib/grapesjs.scss

@@ -0,0 +1,5 @@
+.gjs-cv-canvas {
+  top: 0;
+  width: 100%;
+  height: 100%;
+}

client/src/lib/sandboxed-ckeditor.js

@@ -16,26 +16,66 @@ import {
     base,
     unbase
 } from "../../../shared/templates";
-import CKEditor from './ckeditor';
+import CKEditor from "react-ckeditor-component";
+
+const initialHeight = 600;
+const navbarHeight = 34; // Sync this with navbarheight in sandboxed-ckeditor.scss
 
 @translate(null, { withRef: true })
 export class CKEditorHost extends Component {
     constructor(props) {
         super(props);
 
-        this.state = {}
+        this.state = {
+            fullscreen: false
+        }
+
+        this.onWindowResizeHandler = ::this.onWindowResize;
     }
 
     static propTypes = {
         entityTypeId: PropTypes.string,
         entity: PropTypes.object,
-        initialHtml: PropTypes.string
+        initialHtml: PropTypes.string,
+        title: PropTypes.string,
+        onFullscreenAsync: PropTypes.func
+    }
+
+    async toggleFullscreenAsync() {
+        const fullscreen = !this.state.fullscreen;
+        this.setState({
+            fullscreen
+        });
+        await this.props.onFullscreenAsync(fullscreen);
+
+        let newHeight;
+        if (fullscreen) {
+            newHeight = window.innerHeight - navbarHeight;
+        } else {
+            newHeight = initialHeight;
+        }
+        await this.contentNode.ask('setHeight', newHeight);
     }
 
     async exportState() {
         return await this.contentNode.ask('exportState');
     }
 
+    onWindowResize() {
+        if (this.state.fullscreen) {
+            const newHeight = window.innerHeight - navbarHeight;
+            this.contentNode.ask('setHeight', newHeight);
+        }
+    }
+
+    componentDidMount() {
+        window.addEventListener('resize', this.onWindowResizeHandler, false);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.onWindowResizeHandler, false);
+    }
+
     render() {
         const t = this.props.t;
 
@@ -51,7 +91,12 @@ export class CKEditorHost extends Component {
         };
 
         return (
-            <div className={styles.editor}>
+            <div className={this.state.fullscreen ? styles.editorFullscreen : styles.editor}>
+                <div className={styles.navbar}>
+                    {this.state.fullscreen && <img className={styles.logo} src={getTrustedUrl('static/mailtrain-notext.png')}/>}
+                    <div className={styles.title}>{this.props.title}</div>
+                    <a className={styles.btn} onClick={::this.toggleFullscreenAsync}><Icon icon="fullscreen"/></a>
+                </div>
                 <UntrustedContentHost ref={node => this.contentNode = node} className={styles.host} singleToken={true} contentProps={editorData} contentSrc="ckeditor/editor" tokenMethod="ckeditor" tokenParams={editorData}/>
             </div>
         );
@@ -93,16 +138,30 @@ export class CKEditorSandbox extends Component {
         };
     }
 
+    async setHeight(methods, params) {
+        this.node.editorInstance.resize('100%', params);
+    }
+
     componentDidMount() {
         parentRPC.setMethodHandler('exportState', ::this.exportState);
+        parentRPC.setMethodHandler('setHeight', ::this.setHeight);
     }
 
     render() {
+        const config = {
+            removeButtons: 'Underline,Subscript,Superscript,Maximize',
+            resize_enabled: false,
+            height: initialHeight
+        };
+
         return (
             <div className={styles.sandbox}>
-                <CKEditor
-                    onChange={(event, editor) => this.setState({html: editor.getData()})}
-                    data={this.state.html}
+                <CKEditor ref={node => this.node = node}
+                    content={this.state.html}
+                    events={{
+                        change: evt => this.setState({html: evt.editor.getData()}),
+                    }}
+                    config={config}
                 />
             </div>
         );

client/src/lib/sandboxed-ckeditor.scss

@@ -1,10 +1,72 @@
+$navbarHeight: 34px;
+
 .editor {
   .host {
   }
 }
 
 .sandbox {
-  :global .ck-editor__editable {
-    height: 500px;
+  height: 100%;
+  overflow: hidden;
+}
+
+.editorFullscreen {
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  z-index: 1000;
+  background: white;
+  margin-top: $navbarHeight;
+
+  .navbar {
+    margin-top: -$navbarHeight;
   }
-}
+
+  .host {
+    height: 100%;
+  }
+}
+
+.navbar {
+  background: #DE4320;
+  width: 100%;
+  height: $navbarHeight;
+}
+
+.logo {
+  float: left;
+  height: $navbarHeight;
+  padding: 5px 0 5px 10px;
+  filter: brightness(0) invert(1);
+}
+
+.title {
+  padding: 5px 0 5px 10px;
+  font-size: 18px;
+  font-family: sans-serif;
+  font-family: "Ubuntu",Tahoma,"Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-weight: bold;
+  float: left;
+  color: white;
+  height: $navbarHeight;
+}
+
+.btn {
+  display: block;
+  float: right;
+  padding: 0px 15px;
+  line-height: $navbarHeight;
+  text-align: center;
+  color: white;
+  font-size: 14px;
+  font-weight: bold;
+  font-family: sans-serif;
+  cursor: pointer;
+}
+
+.btn:hover {
+  background-color: #b1381e;
+  color: white;
+}

client/src/templates/helpers.js

@@ -14,6 +14,7 @@ import 'brace/mode/html';
 
 import { MosaicoEditorHost } from "../lib/sandboxed-mosaico";
 import { CKEditorHost } from "../lib/sandboxed-ckeditor";
+import GrapesJS from "../lib/grapesjs";
 
 import {getTemplateTypes as getMosaicoTemplateTypes} from './mosaico/helpers';
 import {getSandboxUrl} from "../lib/urls";
@@ -174,7 +175,7 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
         validate: state => {}
     };
 
-    templateTypes.grapejs = { // FIXME
+    templateTypes.xgrapesjs = { // FIXME
         typeName: t('GrapeJS'),
         getTypeForm: (owner, isEdit) => null,
         getHTMLEditor: owner => null,
@@ -188,12 +189,12 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
         validate: state => {}
     };
 
-    templateTypes.xckeditor = {
-        typeName: t('CKEditor'),
+    templateTypes.grapesjs = {
+        typeName: t('GrapeJS (fake)'),
         getTypeForm: (owner, isEdit) => null,
         getHTMLEditor: owner =>
             <AlignedRow label={t('Template content (HTML)')}>
-                <CKEditorHost
+                <GrapesJS
                     ref={node => owner.editorNode = node}
                     entity={owner.props.entity}
                     initialHtml={owner.getFormValue(prefix + 'html')}
@@ -212,10 +213,37 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
         validate: state => {}
     };
 
-    templateTypes.ckeditor = {
-        typeName: t('CKEditor'),
+    templateTypes.ckeditor4 = {
+        typeName: t('CKEditor 4'),
         getTypeForm: (owner, isEdit) => null,
-        getHTMLEditor: owner => <CKEditor id={prefix + 'html'} height="600px" mode="html" label={t('Template content (HTML)')}/>,
+        getHTMLEditor: owner =>
+            <AlignedRow label={t('Template content')}>
+                <CKEditorHost
+                    ref={node => owner.editorNode = node}
+                    entity={owner.props.entity}
+                    initialHtml={owner.getFormValue(prefix + 'html')}
+                    entityTypeId={entityTypeId}
+                    title={t('CKEditor 4 Template Designer')}
+                    onFullscreenAsync={::owner.setElementInFullscreen}
+                />
+            </AlignedRow>,
+        exportHTMLEditorData: async owner => {
+            const {html} = await owner.editorNode.exportState();
+            owner.updateFormValue(prefix + 'html', html);
+        },
+        initData: () => ({}),
+        afterLoad: data => {},
+        beforeSave: data => {
+            clearBeforeSave(data);
+        },
+        afterTypeChange: mutState => {},
+        validate: state => {}
+    };
+
+    templateTypes.ckeditor5 = {
+        typeName: t('CKEditor 5'),
+        getTypeForm: (owner, isEdit) => null,
+        getHTMLEditor: owner => <CKEditor id={prefix + 'html'} height="600px" mode="html" label={t('Template content')}/>,
         exportHTMLEditorData: async owner => {},
         initData: () => ({}),
         afterLoad: data => {},

client/webpack.config.js

@@ -13,9 +13,9 @@ module.exports = {
         } )
     ],
     entry: {
-        root: ['babel-polyfill', './src/root.js'],
-        mosaico: ['babel-polyfill', './src/lib/sandboxed-mosaico-root.js'],
-        ckeditor: ['babel-polyfill', './src/lib/sandboxed-ckeditor-root.js'],
+        "root": ['babel-polyfill', './src/root.js'],
+        "mosaico-root": ['babel-polyfill', './src/lib/sandboxed-mosaico-root.js'],
+        "ckeditor-root": ['babel-polyfill', './src/lib/sandboxed-ckeditor-root.js'],
     },
     output: {
         library: 'MailtrainReactBody',
@@ -46,8 +46,6 @@ module.exports = {
                         }
                     }
                 ]
-                // exclude: /(disposables|react-dnd-touch-backend|attr-accept)/ /* https://github.com/react-dnd/react-dnd/issues/407 */,
-                // use: [ 'babel-loader' ]
             },
             {
                 test: /\.css$/,
@@ -69,7 +67,7 @@ module.exports = {
                             },
                             minify: false
                         } )
-                    },
+                    }
                 ]
             },
             {
@@ -84,10 +82,7 @@ module.exports = {
                 ] 
             },
             {
-                // Or /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/ if you want to limit this loader
-                // to CKEditor 5 icons only.
                 test: /\.svg$/,
-
                 use: [ 'raw-loader' ]
             },
             {
@@ -105,8 +100,8 @@ module.exports = {
                     'sass-loader' ]
             },
             {
-                test: /\.(woff|ttf|eot)$/,
-                use: [ 'url-loader' ]
+                test: /\.(otf|woff2|woff|ttf|eot)$/,
+                use: [ 'raw-loader' ]
             }
         ]
     },

config/default.yaml

@@ -16,10 +16,12 @@ title: mailtrain
 
 # Enabled HTML editors
 editors:
-- ckeditor
+- ckeditor4
+- ckeditor5
 - codeeditor
 - mosaico
 - mosaicoWithFsTemplate
+- grapesjs
 
 # Default language to use
 language: en
@@ -149,7 +151,7 @@ mosaico:
   # customscripts:
   # - /mosaico/custom/my-mosaico-plugin.js
 
-grapejs:
+grapesjs:
 # Installed templates
   templates:
     - key: demo

languages/de_DE.po

@@ -974,11 +974,11 @@ msgstr "Vorlagen Editoren"
 
 #: views/index.hbs:21
 msgid ""
-"Mailtrain ships with GrapeJS and Mosaico built in, two advanced template "
+"Mailtrain ships with Grapesjs and Mosaico built in, two advanced template "
 "editors. Mailtrain also offers a code editor if you prefer to handcraft the "
 "HTML yourself."
 msgstr ""
-"Mailtrain beinhaltet GrapeJS und Mosaico, zwei Programme zum Bearbeiten der "
+"Mailtrain beinhaltet Grapesjs und Mosaico, zwei Programme zum Bearbeiten der "
 "E-Mail-Vorlagen. Natürlich bietet Mailtrain auch einen Code-Editor, sofern "
 "Sie den HTML Code selber erstellen möchten."
 
@@ -1913,8 +1913,8 @@ msgid "CLOSE"
 msgstr "SCHLIESSEN"
 
 #: views/partials/grapejs.hbs:2
-msgid "Open GrapeJS"
-msgstr "GrapeJS öffnen"
+msgid "Open Grapesjs"
+msgstr "Grapesjs öffnen"
 
 #: views/partials/html-preview.hbs:1
 msgid "Toggle HTML preview"
@@ -3699,7 +3699,7 @@ msgid "Attachment not found"
 msgstr "Anhangs-Datei nicht gefunden"
 
 #: routes/blacklist.js:13 routes/campaigns.js:26 routes/editorapi.js:35
-#: routes/fields.js:13 routes/forms.js:16 routes/grapejs.js:13
+#: routes/fields.js:13 routes/forms.js:16 routes/grapesjs.js:13
 #: routes/lists.js:50 routes/mosaico.js:14 routes/report-templates.js:20
 #: routes/reports.js:22 routes/segments.js:13 routes/settings.js:23
 #: routes/templates.js:18 routes/triggers.js:18 routes/users.js:75

languages/es_ES.po

@@ -979,11 +979,11 @@ msgstr "Editores plantilla"
 
 #: views/index.hbs:21
 msgid ""
-"Mailtrain ships with GrapeJS and Mosaico built in, two advanced template "
+"Mailtrain ships with Grapesjs and Mosaico built in, two advanced template "
 "editors. Mailtrain also offers a code editor if you prefer to handcraft the "
 "HTML yourself."
 msgstr ""
-"Mailtrain envía con los incorporados GrapeJS y Mosaico, dos editores "
+"Mailtrain envía con los incorporados Grapesjs y Mosaico, dos editores "
 "avanzados de plantillas . Mailtrain también ofrece un editor de código, por "
 "si prefieres modificar HTML."
 
@@ -1946,8 +1946,8 @@ msgid "CLOSE"
 msgstr "CERRAR"
 
 #: views/partials/grapejs.hbs:2
-msgid "Open GrapeJS"
-msgstr "Abrir GrapeJS"
+msgid "Open Grapesjs"
+msgstr "Abrir Grapesjs"
 
 #: views/partials/html-preview.hbs:1
 msgid "Toggle HTML preview"
@@ -3831,7 +3831,7 @@ msgid "Attachment not found"
 msgstr "Adjunto no encontrado"
 
 #: routes/blacklist.js:13 routes/campaigns.js:26 routes/editorapi.js:35
-#: routes/fields.js:13 routes/forms.js:16 routes/grapejs.js:14
+#: routes/fields.js:13 routes/forms.js:16 routes/grapesjs.js:14
 #: routes/lists.js:50 routes/mosaico.js:14 routes/report-templates.js:20
 #: routes/reports.js:22 routes/segments.js:13 routes/settings.js:23
 #: routes/templates.js:18 routes/triggers.js:18 routes/users.js:75

languages/it_IT.po

@@ -977,11 +977,11 @@ msgstr "Editors dei templates"
 
 #: views/index.hbs:21
 msgid ""
-"Mailtrain ships with GrapeJS and Mosaico built in, two advanced template "
+"Mailtrain ships with Grapesjs and Mosaico built in, two advanced template "
 "editors. Mailtrain also offers a code editor if you prefer to handcraft the "
 "HTML yourself."
 msgstr ""
-"Mailtrain include GrapeJS e Mosaico, due editors di template avanzati. "
+"Mailtrain include Grapesjs e Mosaico, due editors di template avanzati. "
 "Mailtrain offre inoltre un editor di codice se preferisci scrivere tu l'HTML."
 
 #: views/index.hbs:23
@@ -1913,8 +1913,8 @@ msgid "CLOSE"
 msgstr "CHIUDI"
 
 #: views/partials/grapejs.hbs:2
-msgid "Open GrapeJS"
-msgstr "Apri GrapeJS"
+msgid "Open Grapesjs"
+msgstr "Apri Grapesjs"
 
 #: views/partials/html-preview.hbs:1
 msgid "Toggle HTML preview"
@@ -3809,7 +3809,7 @@ msgid "Attachment not found"
 msgstr "Allegato non trovato"
 
 #: routes/blacklist.js:13 routes/campaigns.js:26 routes/editorapi.js:32
-#: routes/fields.js:13 routes/forms.js:16 routes/grapejs.js:15
+#: routes/fields.js:13 routes/forms.js:16 routes/grapesjs.js:15
 #: routes/lists.js:50 routes/mosaico.js:14 routes/report-templates.js:20
 #: routes/reports.js:22 routes/segments.js:13 routes/settings.js:23
 #: routes/templates.js:18 routes/triggers.js:18 routes/users.js:75

routes/sandboxed-ckeditor.js

@@ -48,7 +48,7 @@ function getRouter(appType) {
                 mailtrainConfig: JSON.stringify(mailtrainConfig),
                 scriptFiles: [
                     getSandboxUrl('mailtrain/common.js'),
-                    getSandboxUrl('mailtrain/ckeditor.js')
+                    getSandboxUrl('mailtrain/ckeditor-root.js')
                 ],
                 publicPath: getSandboxUrl()
             });

routes/sandboxed-mosaico.js

@@ -199,7 +199,7 @@ function getRouter(appType) {
                 mailtrainConfig: JSON.stringify(mailtrainConfig),
                 scriptFiles: [
                     getSandboxUrl('mailtrain/common.js'),
-                    getSandboxUrl('mailtrain/mosaico.js')
+                    getSandboxUrl('mailtrain/mosaico-root.js')
                 ],
                 publicPath: getSandboxUrl()
             });

views/layout.hbs

@@ -20,6 +20,7 @@
     <script src="/static/jquery-2.2.1.min.js"></script>
     <script src="/static/bootstrap/js/bootstrap.min.js"></script>
 
+
     {{#if mailtrainConfig}}
     <script>
         {{#if reactCsrfToken}}window.csfrToken = '{{reactCsrfToken}}';{{/if}}