Merge pull request #1257 from hackmdio/feature/markdownlint

Support markdownlint

Author: jackycute

package.json

@@ -93,6 +93,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/css/index.css

@@ -513,13 +513,15 @@ div[contenteditable]:empty:not(:focus):before{
 .status-bar .status-indicators .status-keymap > a,
 .status-bar .status-indicators .status-theme > a,
 .status-bar .status-indicators .status-spellcheck > a,
+.status-bar .status-indicators .status-linter > a,
 .status-bar .status-indicators .status-preferences > a {
     color: inherit;
     text-decoration: none;
 }
 
 .status-bar .status-indicators .status-theme,
 .status-bar .status-indicators .status-spellcheck,
+.status-bar .status-indicators .status-linter,
 .status-bar .status-indicators .status-preferences {
     padding: 0 4.3px;
 }
@@ -540,17 +542,20 @@ div[contenteditable]:empty:not(:focus):before{
 }
 
 .ui-theme-toggle,
+.ui-linter-toggle,
 .ui-spellcheck-toggle {
     opacity: 0.2;
     cursor: pointer;
 }
 
 .ui-theme-toggle.active,
+.ui-linter-toggle.active,
 .ui-spellcheck-toggle.active {
     opacity: 1;
 }
 
 .ui-theme-toggle:hover,
+.ui-linter-toggle:hover,
 .ui-spellcheck-toggle:hover {
     opacity: 0.8;
 }

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
@@ -231,6 +232,7 @@ export default class Editor {
     this.statusLength = this.statusBar.find('.status-length')
     this.statusTheme = this.statusBar.find('.status-theme')
     this.statusSpellcheck = this.statusBar.find('.status-spellcheck')
+    this.statusLinter = this.statusBar.find('.status-linter')
     this.statusPreferences = this.statusBar.find('.status-preferences')
     this.statusPanel = this.editor.addPanel(this.statusBar[0], {
       position: 'bottom'
@@ -240,6 +242,7 @@ export default class Editor {
     this.setKeymap()
     this.setTheme()
     this.setSpellcheck()
+    this.setLinter()
     this.setPreferences()
   }
 
@@ -498,6 +501,42 @@ export default class Editor {
     }
   }
 
+  toggleLinter (enable) {
+    const gutters = this.editor.getOption('gutters')
+    const lintGutter = 'CodeMirror-lint-markers'
+
+    if (enable) {
+      if (!gutters.includes(lintGutter)) {
+        this.editor.setOption('gutters', [lintGutter, ...gutters])
+      }
+      Cookies.set('linter', true, {
+        expires: 365
+      })
+    } else {
+      this.editor.setOption('gutters', gutters.filter(g => g !== lintGutter))
+      Cookies.remove('linter')
+    }
+    this.editor.setOption('lint', enable)
+  }
+
+  setLinter () {
+    const linterToggle = this.statusLinter.find('.ui-linter-toggle')
+
+    const updateLinterStatus = (enable) => {
+      linterToggle.toggleClass('active', enable)
+    }
+
+    linterToggle.click(() => {
+      const lintEnable = this.editor.getOption('lint')
+      this.toggleLinter.bind(this)(!lintEnable)
+      updateLinterStatus(!lintEnable)
+    })
+
+    const enable = !!Cookies.get('linter')
+    this.toggleLinter.bind(this)(enable)
+    updateLinterStatus(enable)
+  }
+
   resetEditorKeymapToBrowserKeymap () {
     var keymap = this.editor.getOption('keyMap')
     if (!this.jumpToAddressBarKeymapValue) {

public/images/lint/mark-multiple.png

@@ -0,0 +1,45 @@
+/* global CodeMirror */
+import markdownlint from 'markdownlint'
+
+// load CM lint plugin explicitly
+import '@hackmd/codemirror/addon/lint/lint'
+import './lint.css'
+
+(function (mod) {
+  mod(CodeMirror)
+})(function (CodeMirror) {
+  function validator (text) {
+    return lint(text).map(error => {
+      const {
+        ruleNames,
+        ruleDescription,
+        lineNumber: ln,
+        errorRange
+      } = error
+      const lineNumber = ln - 1
+
+      let start = 0; let end = -1
+      if (errorRange) {
+        [start, end] = errorRange.map(r => r - 1)
+      }
+
+      return {
+        messageHTML: `${ruleNames.join('/')}: ${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,73 @@
+/* The lint marker gutter */
+.CodeMirror-lint-markers {
+  width: 16px;
+}
+
+.CodeMirror-lint-tooltip {
+  background-color: #333333;
+  border: 1px solid #eeeeee;
+  border-radius: 4px;
+  color: white;
+  font-family: "Source Code Pro", Consolas, monaco, 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;
+  margin-left: 5px;
+}
+
+.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning {
+  padding-left: 20px;
+  background-position: top left;
+  background-repeat: no-repeat;
+  background-position-y: 2px;
+}
+
+.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%;
+}