Merge pull request #3034 from AWolf81/enable-markdownlint-option

Enable Markdown lint option

Author: Rokt33r

browser/components/CodeEditor.js

@@ -26,6 +26,8 @@ import {languageMaps} from '../lib/CMLanguageList'
 import snippetManager from '../lib/SnippetManager'
 import {generateInEditor, tocExistsInEditor} from 'browser/lib/markdown-toc-generator'
 import markdownlint from 'markdownlint'
+import Jsonlint from 'jsonlint-mod'
+import { DEFAULT_CONFIG } from '../main/lib/ConfigManager'
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
@@ -38,38 +40,6 @@ function translateHotkey (hotkey) {
   return hotkey.replace(/\s*\+\s*/g, '-').replace(/Command/g, 'Cmd').replace(/Control/g, 'Ctrl')
 }
 
-const validatorOfMarkdown = (text, updateLinting) => {
-  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)
@@ -116,6 +86,8 @@ export default class CodeEditor extends React.Component {
     this.searchHandler = (e, msg) => this.handleSearch(msg)
     this.searchState = null
     this.scrollToLineHandeler = this.scrollToLine.bind(this)
+    this.getCodeEditorLintConfig = this.getCodeEditorLintConfig.bind(this)
+    this.validatorOfMarkdown = this.validatorOfMarkdown.bind(this)
 
     this.formatTable = () => this.handleFormatTable()
 
@@ -283,13 +255,12 @@ export default class CodeEditor extends React.Component {
   }
 
   componentDidMount () {
-    const { rulers, enableRulers } = this.props
+    const { rulers, enableRulers, enableMarkdownLint } = this.props
     eventEmitter.on('line:jump', this.scrollToLineHandeler)
 
     snippetManager.init()
     this.updateDefaultKeyMap()
 
-    const checkMarkdownNoteIsOpening = this.props.mode === 'Boost Flavored Markdown'
     this.value = this.props.value
     this.editor = CodeMirror(this.refs.root, {
       rulers: buildCMRulers(rulers, enableRulers),
@@ -306,10 +277,7 @@ export default class CodeEditor extends React.Component {
       inputStyle: 'textarea',
       dragDrop: false,
       foldGutter: true,
-      lint: checkMarkdownNoteIsOpening ? {
-        'getAnnotations': validatorOfMarkdown,
-        'async': true
-      } : false,
+      lint: enableMarkdownLint ? this.getCodeEditorLintConfig() : false,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
       autoCloseBrackets: {
         pairs: this.props.matchingPairs,
@@ -320,6 +288,8 @@ export default class CodeEditor extends React.Component {
       extraKeys: this.defaultKeyMap
     })
 
+    document.querySelector('.CodeMirror-lint-markers').style.display = enableMarkdownLint ? 'inline-block' : 'none'
+
     if (!this.props.mode && this.props.value && this.props.autoDetect) {
       this.autoDetectLanguage(this.props.value)
     } else {
@@ -546,7 +516,9 @@ export default class CodeEditor extends React.Component {
     let needRefresh = false
     const {
       rulers,
-      enableRulers
+      enableRulers,
+      enableMarkdownLint,
+      customMarkdownLintConfig
     } = this.props
     if (prevProps.mode !== this.props.mode) {
       this.setMode(this.props.mode)
@@ -564,6 +536,16 @@ export default class CodeEditor extends React.Component {
     if (prevProps.keyMap !== this.props.keyMap) {
       needRefresh = true
     }
+    if (prevProps.enableMarkdownLint !== enableMarkdownLint || prevProps.customMarkdownLintConfig !== customMarkdownLintConfig) {
+      if (!enableMarkdownLint) {
+        this.editor.setOption('lint', {default: false})
+        document.querySelector('.CodeMirror-lint-markers').style.display = 'none'
+      } else {
+        this.editor.setOption('lint', this.getCodeEditorLintConfig())
+        document.querySelector('.CodeMirror-lint-markers').style.display = 'inline-block'
+      }
+      needRefresh = true
+    }
 
     if (
       prevProps.enableRulers !== enableRulers ||
@@ -644,6 +626,56 @@ export default class CodeEditor extends React.Component {
     }
   }
 
+  getCodeEditorLintConfig () {
+    const { mode } = this.props
+    const checkMarkdownNoteIsOpen = mode === 'Boost Flavored Markdown'
+
+    return checkMarkdownNoteIsOpen ? {
+      'getAnnotations': this.validatorOfMarkdown,
+      'async': true
+    } : false
+  }
+
+  validatorOfMarkdown (text, updateLinting) {
+    const { customMarkdownLintConfig } = this.props
+    let lintConfigJson
+    try {
+      Jsonlint.parse(customMarkdownLintConfig)
+      lintConfigJson = JSON.parse(customMarkdownLintConfig)
+    } catch (err) {
+      eventEmitter.emit('APP_SETTING_ERROR')
+      return
+    }
+    const lintOptions = {
+      'strings': {
+        'content': text
+      },
+      'config': lintConfigJson
+    }
+
+    return markdownlint(lintOptions, (err, result) => {
+      if (!err) {
+        const foundIssues = []
+        const splitText = text.split('\n')
+        result.content.map(item => {
+          let ruleNames = ''
+          item.ruleNames.map((ruleName, index) => {
+            ruleNames += ruleName
+            ruleNames += (index === item.ruleNames.length - 1) ? ': ' : '/'
+          })
+          const lineNumber = item.lineNumber - 1
+          foundIssues.push({
+            from: CodeMirror.Pos(lineNumber, 0),
+            to: CodeMirror.Pos(lineNumber, splitText[lineNumber].length),
+            message: ruleNames + item.ruleDescription,
+            severity: 'warning'
+          })
+        })
+        updateLinting(foundIssues)
+      }
+    })
+  }
+
   setMode (mode) {
     let syntax = CodeMirror.findModeByName(convertModeName(mode || 'text'))
     if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
@@ -1105,13 +1137,11 @@ export default class CodeEditor extends React.Component {
       }
       ref='root'
       tabIndex='-1'
-      style={
-      {
+      style={{
         fontFamily,
         fontSize: fontSize,
         width: width
-      }
-      }
+      }}
       onDrop={
         e => this.handleDropImage(e)
       }
@@ -1149,7 +1179,9 @@ CodeEditor.propTypes = {
   onChange: PropTypes.func,
   readOnly: PropTypes.bool,
   autoDetect: PropTypes.bool,
-  spellCheck: PropTypes.bool
+  spellCheck: PropTypes.bool,
+  enableMarkdownLint: PropTypes.bool,
+  customMarkdownLintConfig: PropTypes.string
 }
 
 CodeEditor.defaultProps = {
@@ -1161,5 +1193,7 @@ CodeEditor.defaultProps = {
   indentSize: 4,
   indentType: 'space',
   autoDetect: false,
-  spellCheck: false
+  spellCheck: false,
+  enableMarkdownLint: DEFAULT_CONFIG.editor.enableMarkdownLint,
+  customMarkdownLintConfig: DEFAULT_CONFIG.editor.customMarkdownLintConfig
 }

browser/components/MarkdownEditor.js

@@ -319,6 +319,8 @@ class MarkdownEditor extends React.Component {
           enableSmartPaste={config.editor.enableSmartPaste}
           hotkey={config.hotkey}
           switchPreview={config.editor.switchPreview}
+          enableMarkdownLint={config.editor.enableMarkdownLint}
+          customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
         />
         <MarkdownPreview styleName={this.state.status === 'PREVIEW'
             ? 'preview'

browser/components/MarkdownSplitEditor.js

@@ -179,6 +179,8 @@ class MarkdownSplitEditor extends React.Component {
           enableSmartPaste={config.editor.enableSmartPaste}
           hotkey={config.hotkey}
           switchPreview={config.editor.switchPreview}
+          enableMarkdownLint={config.editor.enableMarkdownLint}
+          customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
        />
         <div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
           <div styleName='slider-hitbox' />

browser/main/lib/ConfigManager.js

@@ -11,6 +11,10 @@ const consts = require('browser/lib/consts')
 
 let isInitialized = false
 
+const DEFAULT_MARKDOWN_LINT_CONFIG = `{
+  "default": true
+}`
+
 export const DEFAULT_CONFIG = {
   zoom: 1,
   isSideNavFolded: false,
@@ -59,7 +63,9 @@ export const DEFAULT_CONFIG = {
     enableFrontMatterTitle: true,
     frontMatterTitleField: 'title',
     spellcheck: false,
-    enableSmartPaste: false
+    enableSmartPaste: false,
+    enableMarkdownLint: false,
+    customMarkdownLintConfig: DEFAULT_MARKDOWN_LINT_CONFIG
   },
   preview: {
     fontSize: '14',

browser/main/modals/PreferencesModal/UiTab.js

@@ -30,7 +30,9 @@ class UiTab extends React.Component {
   componentDidMount () {
     CodeMirror.autoLoadMode(this.codeMirrorInstance.getCodeMirror(), 'javascript')
     CodeMirror.autoLoadMode(this.customCSSCM.getCodeMirror(), 'css')
+    CodeMirror.autoLoadMode(this.customMarkdownLintConfigCM.getCodeMirror(), 'javascript')
     this.customCSSCM.getCodeMirror().setSize('400px', '400px')
+    this.customMarkdownLintConfigCM.getCodeMirror().setSize('400px', '200px')
     this.handleSettingDone = () => {
       this.setState({UiAlert: {
         type: 'success',
@@ -101,7 +103,9 @@ class UiTab extends React.Component {
         matchingTriples: this.refs.matchingTriples.value,
         explodingPairs: this.refs.explodingPairs.value,
         spellcheck: this.refs.spellcheck.checked,
-        enableSmartPaste: this.refs.enableSmartPaste.checked
+        enableSmartPaste: this.refs.enableSmartPaste.checked,
+        enableMarkdownLint: this.refs.enableMarkdownLint.checked,
+        customMarkdownLintConfig: this.customMarkdownLintConfigCM.getCodeMirror().getValue()
       },
       preview: {
         fontSize: this.refs.previewFontSize.value,
@@ -637,6 +641,34 @@ class UiTab extends React.Component {
               />
             </div>
           </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Custom MarkdownLint Rules')}
+            </div>
+            <div styleName='group-section-control'>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.enableMarkdownLint}
+                ref='enableMarkdownLint'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Enable MarkdownLint')}
+              <div style={{fontFamily, display: this.state.config.editor.enableMarkdownLint ? 'block' : 'none'}}>
+                <ReactCodeMirror
+                  width='400px'
+                  height='200px'
+                  onChange={e => this.handleUIChange(e)}
+                  ref={e => (this.customMarkdownLintConfigCM = e)}
+                  value={config.editor.customMarkdownLintConfig}
+                  options={{
+                    lineNumbers: true,
+                    mode: 'application/json',
+                    theme: codemirrorTheme,
+                    lint: true,
+                    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers']
+                  }} />
+              </div>
+            </div>
+          </div>
 
           <div styleName='group-header2'>{i18n.__('Preview')}</div>
           <div styleName='group-section'>

lib/main.html

@@ -72,6 +72,10 @@
       border-left-color: rgba(142, 142, 142, 0.5);
       mix-blend-mode: difference;
     }
+
+    .CodeMirror-lint-tooltip {
+      z-index: 1003;
+    }
   </style>
 </head>
 
@@ -126,7 +130,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/jsonlint-mod/lib/jsonlint.js"></script>
   <script src="../node_modules/codemirror/addon/lint/lint.js"></script>
+  <script src="../node_modules/codemirror/addon/lint/json-lint.js"></script>
 
   <script src="../node_modules/raphael/raphael.min.js"></script>
   <script src="../node_modules/flowchart.js/release/flowchart.min.js"></script>

locales/ja.json

@@ -79,6 +79,7 @@
 	"Matching character pairs": "自動補完する括弧ペアの列記",
 	"Matching character triples": "自動補完する３文字括弧の列記",
 	"Exploding character pairs": "改行時に空行を挿入する括弧ペアの列記",
+	"Custom MarkdownLint Rules": "カスタムMarkdownLintルール",
 	"Preview": "プレビュー",
 	"Preview Font Size": "プレビュー時フォントサイズ",
 	"Preview Font Family": "プレビュー時フォント",

package.json

@@ -74,6 +74,7 @@
     "immutable": "^3.8.1",
     "invert-color": "^2.0.0",
     "js-yaml": "^3.12.0",
+    "jsonlint-mod": "^1.7.4",
     "katex": "^0.9.0",
     "lodash": "^4.11.1",
     "lodash-move": "^1.1.1",