Display lint errors from mjml

closes #142

app/actions/preview.js

@@ -43,8 +43,8 @@ export function setPreview (fileName, content = '') {
         minify: settings.getIn(['mjml', 'minify']),
       }
 
-      const html = await mjml2html(content, fileName, mjmlPath, renderOpts)
-      dispatch(setPrev({ type: 'html', content: html }))
+      const { html, errors } = await mjml2html(content, fileName, mjmlPath, renderOpts)
+      dispatch(setPrev({ type: 'html', content: html, errors }))
       // update the preview in project
       if (bName === 'index.mjml') {
         dispatch(updateProjectPreview(fName, html))

app/actions/projects.js

@@ -82,7 +82,7 @@ async function loadProject (p, mjmlPath) {
     try {
       const indexFilePath = path.join(p, 'index.mjml')
       const mjmlContent = await fsReadFile(indexFilePath, { encoding: 'utf8' })
-      const htmlContent = await mjml2html(mjmlContent, indexFilePath, mjmlPath)
+      const { html: htmlContent } = await mjml2html(mjmlContent, indexFilePath, mjmlPath)
       res.html = htmlContent
     } catch (e) {} // eslint-disable-line
   }

app/components/FileEditor/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import debounce from 'lodash/debounce'
+import get from 'lodash/get'
 import CodeMirror from 'codemirror'
 
 import 'codemirror/addon/selection/active-line'
@@ -18,6 +19,7 @@ import 'codemirror/addon/search/matchesonscrollbar'
 import 'codemirror/mode/xml/xml'
 import 'codemirror/addon/hint/show-hint'
 import 'codemirror/addon/hint/xml-hint'
+import 'codemirror/addon/lint/lint'
 import 'helpers/codemirror-util-autoformat'
 import { autocompleteTags, completeAfter, completeIfAfterLt, completeIfInTag } from 'helpers/codemirror-autocomplete-mjml'
 
@@ -28,7 +30,7 @@ import { setPreview } from 'actions/preview'
 import './styles.scss'
 
 @connect(state => {
-  const { settings } = state
+  const { settings, preview } = state
   return {
     mjmlEngine: settings.getIn(['mjml', 'engine'], 'auto'),
     minify: settings.getIn(['mjml', 'minify'], false),
@@ -37,6 +39,7 @@ import './styles.scss'
     foldLevel: settings.getIn(['editor', 'foldLevel']),
     highlightTag: settings.getIn(['editor', 'highlightTag']),
     lightTheme: settings.getIn(['editor', 'lightTheme'], false),
+    errors: get(preview, 'errors', []),
   }
 }, {
   setPreview,
@@ -156,7 +159,7 @@ class FileEditor extends Component {
       theme: lightTheme ? 'neo' : 'one-dark',
       autoCloseTags: true,
       foldGutter: true,
-      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+      gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
       styleActiveLine: {
         nonEmpty: true,
       },
@@ -176,10 +179,21 @@ class FileEditor extends Component {
       hintOptions: {
         schemaInfo: autocompleteTags,
       },
+      lint: this.handleValidate,
     })
     this._codeMirror.on('change', this.handleChange)
   }
 
+  handleValidate = () => {
+    const { errors } = this.props
+    return errors.map(err => ({
+      message: err.message,
+      severity: 'error',
+      from: CodeMirror.Pos(err.line - 1, 1),
+      to: CodeMirror.Pos(err.line - 1, 1),
+    }))
+  }
+
   handleChange = debounce(async () => {
     const {
       setPreview,

app/components/FileEditor/styles.scss

@@ -1,6 +1,7 @@
 @import "~codemirror/lib/codemirror.css";
 @import "~codemirror/theme/neo.css";
 @import "~codemirror/addon/hint/show-hint.css";
+@import "~codemirror/addon/lint/lint.css";
 @import "../../styles/one-dark.scss";
 @import "../../styles/vars.scss";
 
@@ -40,3 +41,16 @@ li.CodeMirror-hint-active {
 .FileEditor--loader {
   background: $bg;
 }
+
+.CodeMirror-lint-tooltip {
+  background: $bg-light;
+  border: none;
+  box-shadow: rgba(black, 0.2) 0 3px 18px;
+  color: white;
+  padding: 10px;
+}
+
+.CodeMirror-lint-message-error {
+  background-image: none;
+  padding-left: 0;
+}

app/helpers/mjml.js

@@ -23,9 +23,9 @@ export default function (mjmlContent, filePath, mjmlPath = null, options = {}) {
             ]
 
             const res = await execFile(mjmlPath, args, stdinStream)
-            if (res.err) { return resolve('') }
+            if (res.err) { return resolve({ html: '', errors: [] }) }
 
-            resolve(res.stdout)
+            resolve({ html: res.stdout, errors: [] })
 
           } else {
 
@@ -35,9 +35,9 @@ export default function (mjmlContent, filePath, mjmlPath = null, options = {}) {
             ]
 
             const res = await exec(`${mjmlPath} ${args.join(' ')} "${filePath}"`)
-            if (res.err) { return resolve('') }
+            if (res.err) { return resolve({ html: '', errors: [] }) }
 
-            resolve(res.stdout)
+            resolve({ html: res.stdout, errors: [] })
           }
 
         } else {
@@ -50,10 +50,10 @@ export default function (mjmlContent, filePath, mjmlPath = null, options = {}) {
             minify: !!options.minify,
           }
           const res = mjml2html(mjmlContent, mjmlOptions)
-          resolve(res.html || '')
+          resolve({ html: res.html || '', errors: res.errors || [] })
         }
       } catch (e) {
-        resolve('')
+        resolve({ html: '', errors: [] })
       }
     })
   })