Merge pull request #1355 from hackmdio/feature/multilang-spellcheck

Multilanguage spellchecker

Author: jackycute

lib/status/index.js

@@ -24,7 +24,8 @@ exports.getConfig = (req, res) => {
     DROPBOX_APP_KEY: config.dropbox.appKey,
     allowedUploadMimeTypes: config.allowedUploadMimeTypes,
     defaultUseHardbreak: config.defaultUseHardbreak,
-    linkifyHeaderStyle: config.linkifyHeaderStyle
+    linkifyHeaderStyle: config.linkifyHeaderStyle,
+    useCDN: config.useCDN
   }
   res.set({
     'Cache-Control': 'private', // only cache by client

package.json

@@ -165,6 +165,9 @@
     "babel-runtime": "~6.26.0",
     "copy-webpack-plugin": "~4.5.2",
     "css-loader": "~1.0.0",
+    "dictionary-de": "^2.0.3",
+    "dictionary-de-at": "^2.0.3",
+    "dictionary-de-ch": "^2.0.3",
     "doctoc": "~1.4.0",
     "ejs-loader": "~0.3.1",
     "exports-loader": "~0.7.0",
@@ -188,6 +191,7 @@
     "standard": "~13.1.0",
     "string-loader": "~0.0.1",
     "style-loader": "~0.23.1",
+    "typo-js": "^1.0.3",
     "uglifyjs-webpack-plugin": "~1.2.7",
     "url-loader": "~1.0.1",
     "webpack": "~4.39.0",

public/js/lib/common/constant.ejs

@@ -11,3 +11,5 @@ window.defaultUseHardbreak = <%- defaultUseHardbreak %>
 window.linkifyHeaderStyle = '<%- linkifyHeaderStyle %>'
 
 window.DROPBOX_APP_KEY = '<%- DROPBOX_APP_KEY %>'
+
+window.USE_CDN = <%- useCDN %>

public/js/lib/editor/index.js

@@ -7,6 +7,7 @@ import config from './config'
 import statusBarTemplate from './statusbar.html'
 import toolBarTemplate from './toolbar.html'
 import './markdown-lint'
+import CodeMirrorSpellChecker, { supportLanguages, supportLanguageCodes } from './spellcheck'
 import { initTableEditor } from './table-editor'
 import { availableThemes } from './constants'
 
@@ -541,21 +542,69 @@ export default class Editor {
     })
   }
 
+  setSpellcheckLang (lang) {
+    if (lang === 'disabled') {
+      this.statusIndicators.find('.spellcheck-lang').text('')
+      this.activateSpellcheckListItem(false)
+      return
+    }
+
+    if (!supportLanguageCodes.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)
+    this.activateSpellcheckListItem(lang)
+  }
+
+  getExistingSpellcheckLang () {
+    const cookieSpellcheck = Cookies.get('spellcheck')
+
+    if (cookieSpellcheck) {
+      return cookieSpellcheck === 'false' ? undefined : cookieSpellcheck
+    } else {
+      return undefined
+    }
+  }
+
+  activateSpellcheckListItem (lang) {
+    this.statusIndicators.find('.status-spellcheck li').removeClass('active')
+
+    if (lang) {
+      this.statusIndicators.find(`.status-spellcheck li[value="${lang}"]`).addClass('active')
+    } else {
+      this.statusIndicators.find(`.status-spellcheck li[value="disabled"]`).addClass('active')
+    }
+  }
+
   setSpellcheck () {
-    var cookieSpellcheck = Cookies.get('spellcheck')
+    this.statusSpellcheck.find('ul.dropdown-menu').append(supportLanguages.map(lang => {
+      return $(`<li value="${lang.value}"><a>${lang.name}</a></li>`)
+    }))
+
+    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
+        this.activateSpellcheckListItem(false)
+      } else {
+        mode = 'spell-checker'
+        if (supportLanguageCodes.includes(cookieSpellcheck)) {
+          lang = cookieSpellcheck
+        }
+        this.setSpellcheckLang(lang)
       }
-      if (mode && mode !== this.editor.getOption('mode')) {
-        this.editor.setOption('mode', mode)
-      }
+
+      this.editor.setOption('mode', mode)
     }
 
-    var spellcheckToggle = this.statusSpellcheck.find('.ui-spellcheck-toggle')
+    const spellcheckToggle = this.statusSpellcheck.find('.ui-spellcheck-toggle')
 
     const checkSpellcheck = () => {
       var mode = this.editor.getOption('mode')
@@ -566,39 +615,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) {
@@ -723,6 +765,7 @@ export default class Editor {
       placeholder: "← Start by entering a title here\n===\nVisit /features if you don't know what to do.\nHappy hacking :)"
     })
 
+    this.spellchecker = new CodeMirrorSpellChecker(CodeMirror, this.getExistingSpellcheckLang(), this.editor)
     this.tableEditor = initTableEditor(this.editor)
 
     return this.editor