hiding spellcheck by default and adding a interface option to enable it

browser/components/CodeEditor.js

@@ -473,6 +473,16 @@ export default class CodeEditor extends React.Component {
       needRefresh = true
     }
 
+    if (prevProps.spellCheck !== this.props.spellCheck) {
+      if (this.props.spellCheck === false) {
+        spellcheck.setLanguage(this.editor, spellcheck.SPELLCHECK_DISABLED)
+        let elem = document.getElementById('editor-bottom-panel')
+        elem.parentNode.removeChild(elem)
+      } else {
+        this.editor.addPanel(this.createSpellCheckPanel(), {position: 'bottom'})
+      }
+    }
+
     if (needRefresh) {
       this.editor.refresh()
     }
@@ -731,6 +741,7 @@ export default class CodeEditor extends React.Component {
   createSpellCheckPanel () {
     const panel = document.createElement('div')
     panel.className = 'panel bottom'
+    panel.id = 'editor-bottom-panel'
     const dropdown = document.createElement('select')
     dropdown.title = 'Spellcheck'
     dropdown.className = styles['spellcheck-select']

browser/components/MarkdownEditor.js

@@ -272,7 +272,7 @@ class MarkdownEditor extends React.Component {
           enableTableEditor={config.editor.enableTableEditor}
           onChange={(e) => this.handleChange(e)}
           onBlur={(e) => this.handleBlur(e)}
-          spellCheck
+          spellCheck={config.editor.spellcheck}
         />
         <MarkdownPreview styleName={this.state.status === 'PREVIEW'
             ? 'preview'

browser/components/MarkdownSplitEditor.js

@@ -169,7 +169,7 @@ class MarkdownSplitEditor extends React.Component {
           noteKey={noteKey}
           onChange={this.handleOnChange.bind(this)}
           onScroll={this.handleScroll.bind(this)}
-          spellCheck
+          spellCheck={config.editor.spellcheck}
        />
         <div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
           <div styleName='slider-hitbox' />