Spellcheck - Dropdown & localisation

browser/components/CodeEditor.js

@@ -9,6 +9,7 @@ import eventEmitter from 'browser/main/lib/eventEmitter'
 import iconv from 'iconv-lite'
 import crypto from 'crypto'
 import consts from 'browser/lib/consts'
+import styles from '../components/CodeEditor.styl'
 import fs from 'fs'
 const {ipcRenderer} = require('electron')
 const spellcheck = require('browser/lib/spellcheck')
@@ -163,8 +164,6 @@ export default class CodeEditor extends React.Component {
         }
       }
     })
-    //TODO: Nur bei MarkdownNotes
-    this.editor.addPanel(this.createSpellCheckPanel(), {position: 'bottom'})
     this.setMode(this.props.mode)
 
     this.editor.on('focus', this.focusHandler)
@@ -184,6 +183,10 @@ export default class CodeEditor extends React.Component {
     CodeMirror.Vim.defineEx('wq', 'wq', this.quitEditor)
     CodeMirror.Vim.defineEx('qw', 'qw', this.quitEditor)
     CodeMirror.Vim.map('ZZ', ':q', 'normal')
+
+    if (this.props.spellCheck) {
+      this.editor.addPanel(this.createSpellCheckPanel(), {position: 'bottom'})
+    }
   }
 
   expandSnippet (line, cursor, cm, snippets) {
@@ -522,15 +525,13 @@ export default class CodeEditor extends React.Component {
   }
 
   createSpellCheckPanel () {
-    //TODO: von spellcheck abfragen
-    //TODO: l18n
-    //Todo: styling
     const panel = document.createElement('div')
     panel.className = 'panel bottom'
     const dropdown = document.createElement('select')
-    dropdown.title = 'spellcheck'
+    dropdown.title = 'Spellcheck'
+    dropdown.className = styles['spellcheck-select']
     dropdown.addEventListener('change', (e) => spellcheck.initialize(this.editor, dropdown.value))
-    const options = [{label: 'Disabeld', value: 'NONE'}, {label: 'Deutsch', value: 'de_DE'}]
+    const options = spellcheck.getAvailableDictionaries()
     for (const op of options) {
       const option = document.createElement('option')
       option.value = op.value
@@ -550,7 +551,8 @@ CodeEditor.propTypes = {
   className: PropTypes.string,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  spellCheck: PropTypes.bool
 }
 
 CodeEditor.defaultProps = {
@@ -560,5 +562,6 @@ CodeEditor.defaultProps = {
   fontSize: 14,
   fontFamily: 'Monaco, Consolas',
   indentSize: 4,
-  indentType: 'space'
+  indentType: 'space',
+  spellCheck: false
 }

browser/components/CodeEditor.styl

@@ -1,2 +1,6 @@
 .codeEditor-typo
-  text-decoration underline wavy red
+  text-decoration underline wavy red
+
+.spellcheck-select
+  border: none
+  text-decoration underline wavy red

browser/components/MarkdownEditor.js

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

browser/components/MarkdownSplitEditor.js

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

browser/lib/spellcheck.js

@@ -1,4 +1,5 @@
 import styles from '../components/CodeEditor.styl'
+import i18n from 'browser/lib/i18n'
 
 const Typo = require('typo-js')
 
@@ -8,8 +9,12 @@ const DICTIONARY_PATH = '../dictionaries'
 let dictionary = null
 
 function getAvailableDictionaries () {
-  // TODO: l18n
-  return [{label: 'Disabeld', value: SPELLCHECK_DISABLED}, {label: 'Deutsch', value: 'de_DE'}]
+  return [
+    {label: i18n.__('Disabled'), value: SPELLCHECK_DISABLED},
+    {label: i18n.__('English'), value: 'en_GB'},
+    {label: i18n.__('German'), value: 'de_DE'},
+    {label: i18n.__('French'), value: 'fr_FR'}
+  ]
 }
 
 /**
@@ -33,7 +38,9 @@ function initialize (editor, lang) {
   }
   if (lang !== SPELLCHECK_DISABLED) {
     dictionary = new Typo(lang, false, false, {
-      dictionaryPath: DICTIONARY_PATH, asyncLoad: true, loadedCallback: () =>
+      dictionaryPath: DICTIONARY_PATH,
+      asyncLoad: true,
+      loadedCallback: () =>
         checkWholeDocument(this, editor)
     })
   }
@@ -120,7 +127,7 @@ function liveSpellcheck (editor, changeObject) {
   }
 
   function calcTo (from) {
-    let to = {line: from.line, ch: from.ch}
+    const to = {line: from.line, ch: from.ch}
     const changeArray = changeObject.text || ['']
     to.line += changeArray.length - 1
     const charactersInLastLineOfChange = changeArray[changeArray.length - 1].length