Provide linter autofixes

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

public/js/lib/editor/index.js

@@ -6,7 +6,7 @@ import * as utils from './utils'
 import config from './config'
 import statusBarTemplate from './statusbar.html'
 import toolBarTemplate from './toolbar.html'
-import './markdown-lint'
+import { linterOptions } from './markdown-lint'
 import CodeMirrorSpellChecker, { supportLanguages, supportLanguageCodes } from './spellcheck'
 import { initTableEditor } from './table-editor'
 import { availableThemes } from './constants'
@@ -674,7 +674,7 @@ export default class Editor {
       this.editor.setOption('gutters', gutters.filter(g => g !== lintGutter))
       Cookies.remove('linter')
     }
-    this.editor.setOption('lint', enable)
+    this.editor.setOption('lint', enable ? linterOptions : false)
   }
 
   setLinter () {
@@ -685,7 +685,7 @@ export default class Editor {
     }
 
     linterToggle.click(() => {
-      const lintEnable = this.editor.getOption('lint')
+      const lintEnable = !!this.editor.getOption('lint')
       this.toggleLinter.bind(this)(!lintEnable)
       updateLinterStatus(!lintEnable)
     })

public/js/lib/editor/markdown-lint/index.js

@@ -3,6 +3,9 @@
 // load CM lint plugin explicitly
 import '@hackmd/codemirror/addon/lint/lint'
 
+import '@hackmd/codemirror/addon/hint/show-hint.css'
+import helpers from 'markdownlint-rule-helpers'
+
 window.markdownit = require('markdown-it')
 // eslint-disable-next-line
 require('script-loader!markdownlint');
@@ -26,10 +29,14 @@ require('script-loader!markdownlint');
       }
 
       return {
-        messageHTML: `${ruleNames.join('/')}: ${ruleDescription}`,
+        messageHTML: `${ruleNames.slice(0, 1)}: ${ruleDescription}`,
         severity: 'error',
         from: CodeMirror.Pos(lineNumber, start),
-        to: CodeMirror.Pos(lineNumber, end)
+        to: CodeMirror.Pos(lineNumber, end),
+        __ruleNames: ruleNames,
+        __ruleDescription: ruleDescription,
+        __error: error,
+        __lineNumber: lineNumber
       }
     })
   }
@@ -37,11 +44,61 @@ require('script-loader!markdownlint');
   CodeMirror.registerHelper('lint', 'markdown', validator)
 })
 
+export const linterOptions = {
+  fixedTooltip: true,
+  contextmenu: annotations => {
+    const singleFixMenus = annotations
+      .filter(ann => ann.__error.fixInfo)
+      .map(annotation => {
+        const error = annotation.__error
+        return {
+          content: `Fix ${error.ruleDescription}`,
+          onClick () {
+            const doc = window.editor.doc
+            const fixInfo = error.fixInfo
+            const line = fixInfo.lineNumber - 1
+            const lineContent = doc.getLine(line) || ''
+            const fixedText = helpers.applyFix(lineContent, error.fixInfo, '\n')
+
+            let from = { line, ch: 0 }
+            let to = { line, ch: lineContent ? lineContent.length - 1 : 0 }
+
+            if (typeof fixedText === 'string') {
+              doc.replaceRange(fixedText, from, to)
+            } else {
+              if (fixInfo.lineNumber === 1) {
+                if (document.lineCount > 1) {
+                  const nextLine = doc.getLine(to.line + 1) || ''
+                  to = {
+                    line: nextLine,
+                    ch: 0
+                  }
+                }
+              } else {
+                const previousLine = doc.getLine(from.line - 1) || ''
+                from = {
+                  line: previousLine,
+                  ch: previousLine.length
+                }
+              }
+
+              // !FIXME: certain range out of bound
+              doc.replaceRange('', from, to)
+            }
+          }
+        }
+      })
+
+    return singleFixMenus
+  }
+}
+
 function lint (content) {
   const { content: errors } = window.markdownlint.sync({
     strings: {
       content
-    }
+    },
+    resultVersion: 3
   })
   return errors
 }