Support multilanguage spellchecker

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

Author: Yukaii

public/js/lib/editor/index.js

@@ -7,7 +7,7 @@ import config from './config'
 import statusBarTemplate from './statusbar.html'
 import toolBarTemplate from './toolbar.html'
 import './markdown-lint'
-import CodeMirrorSpellChecker from './spellcheck'
+import CodeMirrorSpellChecker, { supportLanguages } from './spellcheck'
 import { initTableEditor } from './table-editor'
 import { availableThemes } from './constants'
 
@@ -542,21 +542,44 @@ export default class Editor {
     })
   }
 
+  setSpellcheckLang (lang) {
+    if (lang === 'disabled') {
+      this.statusIndicators.find('.spellcheck-lang').text('')
+      return
+    }
+
+    if (!supportLanguages.includes(lang)) {
+      return
+    }
+
+    const langName = this.statusIndicators.find(`.status-spellcheck li[value="${lang}"]`).text()
+    this.statusIndicators.find('.spellcheck-lang').text(langName)
+
+    this.spellchecker.setDictLang(lang)
+  }
+
   setSpellcheck () {
-    var cookieSpellcheck = Cookies.get('spellcheck')
+    const cookieSpellcheck = Cookies.get('spellcheck')
     if (cookieSpellcheck) {
-      var mode = null
-      if (cookieSpellcheck === 'true' || cookieSpellcheck === true) {
-        mode = 'spell-checker'
-      } else {
+      let mode = null
+      let lang = 'en_US'
+      if (cookieSpellcheck === 'false' || !cookieSpellcheck) {
         mode = defaultEditorMode
+      } else {
+        mode = 'spell-checker'
+        if (supportLanguages.includes(cookieSpellcheck)) {
+          lang = cookieSpellcheck
+        }
       }
+
       if (mode && mode !== this.editor.getOption('mode')) {
         this.editor.setOption('mode', mode)
+
+        this.setSpellcheckLang(lang)
       }
     }
 
-    var spellcheckToggle = this.statusSpellcheck.find('.ui-spellcheck-toggle')
+    const spellcheckToggle = this.statusSpellcheck.find('.ui-spellcheck-toggle')
 
     const checkSpellcheck = () => {
       var mode = this.editor.getOption('mode')
@@ -567,39 +590,32 @@ export default class Editor {
       }
     }
 
-    spellcheckToggle.click(() => {
-      var mode = this.editor.getOption('mode')
-      if (mode === defaultEditorMode) {
-        mode = 'spell-checker'
+    const self = this
+    this.statusIndicators.find(`.status-spellcheck li`).click(function () {
+      const lang = $(this).attr('value')
+
+      if (lang === 'disabled') {
+        spellcheckToggle.removeClass('active')
+
+        Cookies.set('spellcheck', false, {
+          expires: 365
+        })
+
+        self.editor.setOption('mode', defaultEditorMode)
       } else {
-        mode = defaultEditorMode
-      }
-      if (mode && mode !== this.editor.getOption('mode')) {
-        this.editor.setOption('mode', mode)
+        spellcheckToggle.addClass('active')
+
+        Cookies.set('spellcheck', lang, {
+          expires: 365
+        })
+
+        self.editor.setOption('mode', 'spell-checker')
       }
-      Cookies.set('spellcheck', mode === 'spell-checker', {
-        expires: 365
-      })
 
-      checkSpellcheck()
+      self.setSpellcheckLang(lang)
     })
 
     checkSpellcheck()
-
-    // workaround spellcheck might not activate beacuse the ajax loading
-    if (window.num_loaded < 2) {
-      var spellcheckTimer = setInterval(
-        () => {
-          if (window.num_loaded >= 2) {
-            if (this.editor.getOption('mode') === 'spell-checker') {
-              this.editor.setOption('mode', 'spell-checker')
-            }
-            clearInterval(spellcheckTimer)
-          }
-        },
-        100
-      )
-    }
   }
 
   toggleLinter (enable) {

public/js/lib/editor/spellcheck.js

@@ -9,9 +9,23 @@ const dictionaryDownloadUrls = {
   en_US: {
     aff: `${serverurl}/vendor/codemirror-spell-checker/en_US.aff`,
     dic: `${serverurl}/vendor/codemirror-spell-checker/en_US.dic`
+  },
+  de: {
+    aff: 'https://rawcdn.githack.com/wooorm/dictionaries/143091715eebbbdfa0e8936e117f9182514eebe6/dictionaries/de/index.aff',
+    dic: 'https://rawcdn.githack.com/wooorm/dictionaries/143091715eebbbdfa0e8936e117f9182514eebe6/dictionaries/de/index.dic'
+  },
+  de_AT: {
+    aff: 'https://rawcdn.githack.com/wooorm/dictionaries/143091715eebbbdfa0e8936e117f9182514eebe6/dictionaries/de-AT/index.aff',
+    dic: 'https://rawcdn.githack.com/wooorm/dictionaries/143091715eebbbdfa0e8936e117f9182514eebe6/dictionaries/de-AT/index.dic'
+  },
+  de_CH: {
+    aff: 'https://rawcdn.githack.com/wooorm/dictionaries/143091715eebbbdfa0e8936e117f9182514eebe6/dictionaries/de-CH/index.aff',
+    dic: 'https://rawcdn.githack.com/wooorm/dictionaries/143091715eebbbdfa0e8936e117f9182514eebe6/dictionaries/de-CH/index.dic'
   }
 }
 
+export const supportLanguages = Object.keys(dictionaryDownloadUrls)
+
 function request (url) {
   return new Promise(resolve => {
     const req = new XMLHttpRequest()

public/js/lib/editor/statusbar.html

@@ -38,8 +38,18 @@
             <ul class="dropdown-menu" aria-labelledby="themeLabel" style="overflow: auto;">
             </ul>
         </div>
-        <div class="status-spellcheck">
-            <a class="ui-spellcheck-toggle" title="Toggle spellcheck"><i class="fa fa-check fa-fw"></i></a>
+        <div class="status-spellcheck dropup pull-right">
+            <a class="ui-spellcheck-toggle" title="Toggle spellcheck" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                <i class="fa fa-check fa-fw"></i>
+                <span class="spellcheck-lang"></span>
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="themeLabel">
+                <li value="disabled"><a>Disabled</a></li>
+                <li value="en_US"><a>English (United States)</a></li>
+                <li value="de"><a>German</a></li>
+                <li value="de_AT"><a>German (Austria)</a></li>
+                <li value="de_CH"><a>German (Switzerland)</a></li>
+            </ul>
         </div>
         <div class="status-linter">
             <a class="ui-linter-toggle" title="Toggle linter"><i class="fa fa-lightbulb-o fa-fw"></i></a>