Initial support for markdownlint

Signed-off-by: Yukai Huang <yukaihuangtw@gmail.com>

Author: Yukaii

package.json

@@ -94,6 +94,7 @@
     "markdown-it-sub": "~1.0.0",
     "markdown-it-sup": "~1.0.0",
     "markdown-pdf": "~9.0.0",
+    "markdownlint": "^0.16.0",
     "mathjax": "~2.7.5",
     "mattermost-redux": "~5.13.0",
     "mermaid": "~8.2.3",

public/images/lint/mark-error.png

@@ -3,6 +3,7 @@ import * as utils from './utils'
 import config from './config'
 import statusBarTemplate from './statusbar.html'
 import toolBarTemplate from './toolbar.html'
+import './markdown-lint'
 
 /* config section */
 const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault
@@ -552,6 +553,7 @@ export default class Editor {
     this.editor = CodeMirror.fromTextArea(textit, {
       mode: defaultEditorMode,
       backdrop: defaultEditorMode,
+      lint: true,
       keyMap: 'sublime',
       viewportMargin: viewportMargin,
       styleActiveLine: true,
@@ -573,7 +575,8 @@ export default class Editor {
       gutters: [
         'CodeMirror-linenumbers',
         'authorship-gutters',
-        'CodeMirror-foldgutter'
+        'CodeMirror-foldgutter',
+        'CodeMirror-lint-markers'
       ],
       extraKeys: this.defaultExtraKeys,
       flattenSpans: true,

public/images/lint/mark-multiple.png

@@ -0,0 +1,42 @@
+import markdownlint from 'markdownlint'
+
+// load lint plugin explicitly
+import 'script-loader!@hackmd/codemirror/addon/lint/lint'
+import './lint.css'
+
+(function(mod) {
+  mod(CodeMirror);
+})(function(CodeMirror) {
+  function validator(text, options) {
+    return lint(text).map(error => {
+      const lineNumber = error.lineNumber - 1
+
+      let start, end
+      if (error.errorRange) {
+        start = error.errorRange[0] - 1
+        end = error.errorRange[1] - 1
+      } else {
+        start = 0
+        end = -1
+      }
+
+      return {
+        message: error.ruleDescription,
+        severity: 'error',
+        from: CodeMirror.Pos(lineNumber, start),
+        to: CodeMirror.Pos(lineNumber, end)
+      }
+    })
+  }
+
+  CodeMirror.registerHelper('lint', 'markdown', validator);
+});
+
+function lint (content) {
+  const { content: errors } = markdownlint.sync({
+    strings: {
+      content
+    }
+  })
+  return errors
+}

public/images/lint/mark-warning.png

@@ -0,0 +1,72 @@
+/* The lint marker gutter */
+.CodeMirror-lint-markers {
+  width: 16px;
+}
+
+.CodeMirror-lint-tooltip {
+  background-color: #ffd;
+  border: 1px solid black;
+  border-radius: 4px 4px 4px 4px;
+  color: black;
+  font-family: monospace;
+  font-size: 10pt;
+  overflow: hidden;
+  padding: 2px 5px;
+  position: fixed;
+  white-space: pre;
+  white-space: pre-wrap;
+  z-index: 100;
+  max-width: 600px;
+  opacity: 0;
+  transition: opacity .4s;
+  -moz-transition: opacity .4s;
+  -webkit-transition: opacity .4s;
+  -o-transition: opacity .4s;
+  -ms-transition: opacity .4s;
+}
+
+.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning {
+  background-position: left bottom;
+  background-repeat: repeat-x;
+}
+
+.CodeMirror-lint-mark-error {
+  background-image: url(/images/lint/mark-error.png);
+  ;
+}
+
+.CodeMirror-lint-mark-warning {
+  background-image: url(/images/lint/mark-warning.png);
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning {
+  background-position: center center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  vertical-align: middle;
+  position: relative;
+}
+
+.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning {
+  padding-left: 18px;
+  background-position: top left;
+  background-repeat: no-repeat;
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
+  background-image: url(/images/lint/message-error.png);
+}
+
+.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
+  background-image: url(/images/lint/message-warning.png);
+}
+
+.CodeMirror-lint-marker-multiple {
+  background-image: url(/images/lint/mark-multiple.png);
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  width: 100%; height: 100%;
+}

public/images/lint/message-error.png

@@ -0,0 +1 @@
+exports.URL = window.URL