display lint result on CodeEditor #864

browser/components/CodeEditor.js

@@ -117,6 +117,39 @@ const languageMaps = {
   elixir: 'Elixir'
 }
 
+const validator = (text, updateLinting) => {
+  const markdownlint = require('markdownlint')
+  const lintOptions = {
+    'strings': {
+      'content': text
+    }
+  }
+
+  return markdownlint(lintOptions, (err, result) => {
+    if (!err) {
+      const foundIssues = []
+      result.content.map(item => {
+        let ruleNames = ''
+        item.ruleNames.map((ruleName, index) => {
+          ruleNames += ruleName
+          if (index === item.ruleNames.length - 1) {
+            ruleNames += ': '
+          } else {
+            ruleNames += '/'
+          }
+        })
+        foundIssues.push({
+          from: CodeMirror.Pos(item.lineNumber, 0),
+          to: CodeMirror.Pos(item.lineNumber, 1),
+          message: ruleNames + item.ruleDescription,
+          severity: 'warning'
+        })
+      })
+      updateLinting(foundIssues)
+    }
+  })
+}
+
 export default class CodeEditor extends React.Component {
   constructor (props) {
     super(props)
@@ -344,7 +377,12 @@ export default class CodeEditor extends React.Component {
       inputStyle: 'textarea',
       dragDrop: false,
       foldGutter: true,
-      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+      lint: {
+        'getAnnotations': validator,
+        'async': true
+      },
+      mode: 'markdown',
+      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
       autoCloseBrackets: {
         pairs: this.props.matchingPairs,
         triples: this.props.matchingTriples,

lib/main.html

@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
   <link rel="stylesheet" href="../node_modules/katex/dist/katex.min.css">
   <link rel="stylesheet" href="../node_modules/codemirror/addon/dialog/dialog.css">
+  <link rel="stylesheet" href="../node_modules/codemirror/addon/lint/lint.css">
   <link rel="stylesheet" href="../extra_scripts/codemirror/mode/bfm/bfm.css">
 
   <title>Boostnote</title>
@@ -125,6 +126,9 @@
   <script src="../node_modules/codemirror/addon/dialog/dialog.js"></script>
   <script src="../node_modules/codemirror/addon/display/rulers.js"></script>
 
+  <script src="../node_modules/codemirror/addon/lint/lint.js"></script>
+  <script src="../node_modules/codemirror/mode/markdown/markdown.js"></script>
+
   <script src="../node_modules/raphael/raphael.min.js"></script>
   <script src="../node_modules/flowchart.js/release/flowchart.min.js"></script>
   <script>
@@ -154,4 +158,4 @@
   </style>
 </body>
 
-</html>
+</html>