WIP: Add MarkdownLint enable setting. Gutter toggle not working as expected.

browser/components/CodeEditor.js

@@ -40,6 +40,8 @@ function translateHotkey (hotkey) {
   return hotkey.replace(/\s*\+\s*/g, '-').replace(/Command/g, 'Cmd').replace(/Control/g, 'Ctrl')
 }
 
+const DEFAULT_GUTTERS = ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
+
 export default class CodeEditor extends React.Component {
   constructor (props) {
     super(props)
@@ -255,7 +257,7 @@ 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()
@@ -277,8 +279,8 @@ export default class CodeEditor extends React.Component {
       inputStyle: 'textarea',
       dragDrop: false,
       foldGutter: true,
-      lint: this.setCodeEditorLintConfig(),
-      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
+      lint: enableMarkdownLint ? this.setCodeEditorLintConfig() : false,
+      gutters: [...DEFAULT_GUTTERS, enableMarkdownLint && 'CodeMirror-lint-markers'],
       autoCloseBrackets: {
         pairs: this.props.matchingPairs,
         triples: this.props.matchingTriples,
@@ -515,6 +517,7 @@ export default class CodeEditor extends React.Component {
     const {
       rulers,
       enableRulers,
+      enableMarkdownLint,
       customMarkdownLintConfig
     } = this.props
     if (prevProps.mode !== this.props.mode) {
@@ -533,8 +536,14 @@ export default class CodeEditor extends React.Component {
     if (prevProps.keyMap !== this.props.keyMap) {
       needRefresh = true
     }
-    if (prevProps.customMarkdownLintConfig !== customMarkdownLintConfig) {
-      this.editor.setOption('lint', this.setCodeEditorLintConfig())
+    if (prevProps.enableMarkdownLint !== enableMarkdownLint || prevProps.customMarkdownLintConfig !== customMarkdownLintConfig) {
+      if (!enableMarkdownLint) {
+        this.editor.setOption('lint', {default: false})
+        this.editor.setOption('gutters', DEFAULT_GUTTERS)
+      } else {
+        this.editor.setOption('lint', this.setCodeEditorLintConfig())
+        this.editor.setOption('gutters', [...DEFAULT_GUTTERS, 'CodeMirror-lint-markers'])
+      }
 
       needRefresh = true
     }
@@ -1128,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)
       }
@@ -1173,6 +1180,7 @@ CodeEditor.propTypes = {
   readOnly: PropTypes.bool,
   autoDetect: PropTypes.bool,
   spellCheck: PropTypes.bool,
+  enableMarkdownLint: PropTypes.bool,
   customMarkdownLintConfig: PropTypes.string
 }
 
@@ -1186,5 +1194,6 @@ CodeEditor.defaultProps = {
   indentType: 'space',
   autoDetect: false,
   spellCheck: false,
+  enableMarkdownLint: DEFAULT_CONFIG.editor.enableMarkdownLint,
   customMarkdownLintConfig: DEFAULT_CONFIG.editor.customMarkdownLintConfig
 }

browser/components/MarkdownEditor.js

@@ -319,6 +319,7 @@ 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'

browser/components/MarkdownSplitEditor.js

@@ -179,6 +179,7 @@ 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)} >

browser/main/lib/ConfigManager.js

@@ -64,6 +64,7 @@ export const DEFAULT_CONFIG = {
     frontMatterTitleField: 'title',
     spellcheck: false,
     enableSmartPaste: false,
+    enableMarkdownLint: false,
     customMarkdownLintConfig: DEFAULT_MARKDOWN_LINT_CONFIG
   },
   preview: {

browser/main/modals/PreferencesModal/UiTab.js

@@ -104,6 +104,7 @@ class UiTab extends React.Component {
         explodingPairs: this.refs.explodingPairs.value,
         spellcheck: this.refs.spellcheck.checked,
         enableSmartPaste: this.refs.enableSmartPaste.checked,
+        enableMarkdownLint: this.refs.enableMarkdownLint.checked,
         customMarkdownLintConfig: this.customMarkdownLintConfigCM.getCodeMirror().getValue()
       },
       preview: {
@@ -599,6 +600,17 @@ class UiTab extends React.Component {
             </label>
           </div>
 
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.enableMarkdownLint}
+                ref='enableMarkdownLint'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Enable MarkdownLint')}
+            </label>
+          </div>
+
           <div styleName='group-section'>
             <div styleName='group-section-label'>
               {i18n.__('Matching character pairs')}