Merge pull request #2301 from h3poteto/iss-2128

refs #2128 Add spellchecker languages preference form

spec/renderer/integration/store/Preferences/Language.spec.ts

@@ -11,7 +11,8 @@ const state = (): LanguageState => {
     language: {
       language: DefaultLanguage.en.key,
       spellchecker: {
-        enabled: true
+        enabled: true,
+        languages: []
       }
     }
   }
@@ -47,7 +48,8 @@ describe('Preferences/Language', () => {
           language: {
             language: DefaultLanguage.ja.key,
             spellchecker: {
-              enabled: true
+              enabled: true,
+              languages: []
             }
           }
         }

spec/renderer/unit/store/Preferences/Language.spec.ts

@@ -8,7 +8,8 @@ describe('Preferences/Language', () => {
       language: {
         language: DefaultLanguage.en.key,
         spellchecker: {
-          enabled: true
+          enabled: true,
+          languages: []
         }
       }
     }

src/config/locales/en/translation.json

@@ -229,7 +229,7 @@
     },
     "language": {
       "title": "Language",
-      "notice": "Requires relaunch",
+      "notice": "These settings will take effect after a relaunch",
       "confirm": {
         "title": "Confirm",
         "message": "You have to restart this application. Continue?",
@@ -458,7 +458,8 @@
     "authorize_url_error": "Failed to get authorize url",
     "domain_confirmed": "{{domain}} is confirmed, please login",
     "domain_doesnt_exist": "Failed to connect {{domain}}, make sure the server URL",
-    "loading": "Loading..."
+    "loading": "Loading...",
+    "language_not_support_spellchecker_error": "This language is not supported by Spellchecker"
   },
   "validation": {
     "login": {

src/constants/language/index.d.ts

@@ -1,6 +1,7 @@
 export type LanguageType = {
   name: string
   key: string
+  rfc4646: string
 }
 
 export type LanguageList = {

src/constants/language/index.js

@@ -1,70 +1,87 @@
 export default {
   de: {
     name: 'Deutsch',
-    key: 'de'
+    key: 'de',
+    rfc4646: 'de'
   },
   en: {
     name: 'English',
-    key: 'en'
+    key: 'en',
+    rfc4646: 'en-US'
   },
   fr: {
     name: 'Français',
-    key: 'fr'
+    key: 'fr',
+    rfc4646: 'fr'
   },
   ja: {
     name: '日本語',
-    key: 'ja'
+    key: 'ja',
+    rfc4646: 'ja-JP'
   },
   ko: {
     name: '한국어',
-    key: 'ko'
+    key: 'ko',
+    frc4646: 'ko'
   },
   pl: {
     name: 'Polski',
-    key: 'pl'
+    key: 'pl',
+    rfc4646: 'pl'
   },
   it: {
     name: 'Italiano',
-    key: 'it'
+    key: 'it',
+    rfc4646: 'it'
   },
   zh_cn: {
     name: '简体中文',
-    key: 'zh_cn'
+    key: 'zh_cn',
+    rfc4646: 'zh-CN'
   },
   zh_tw: {
     name: '繁體中文',
-    key: 'zh_tw'
+    key: 'zh_tw',
+    rfc4646: 'zh-TW'
   },
   cs: {
     name: 'čeština',
-    key: 'cs'
+    key: 'cs',
+    rfc4646: 'cs'
   },
   es_es: {
     name: 'Español',
-    key: 'es_es'
+    key: 'es_es',
+    rfc4646: 'es-ES'
   },
   no: {
     name: 'norsk',
-    key: 'no'
+    key: 'no',
+    rfc4646: 'no'
   },
   pt_pt: {
     name: 'Português',
-    key: 'pt_pt'
+    key: 'pt_pt',
+    rfc4646: 'pt-PT'
   },
   ru: {
     name: 'русский',
-    key: 'ru'
+    key: 'ru',
+    rfc4646: 'ru'
   },
   si: {
     name: 'සිංහල',
-    key: 'si'
+    key: 'si',
+    rfc4646: 'si'
   },
   sv_se: {
     name: 'svenska',
-    key: 'sv_se'
+    key: 'sv_se',
+    rfc4646: 'sv-SE'
   },
   tzm: {
     name: 'Tamaziɣt',
-    key: 'tzm'
+    key: 'tzm',
+    rfc4646: 'tzm'
   }
 }

src/main/index.ts

@@ -40,7 +40,7 @@ import Hashtags from './hashtags'
 import UnreadNotification from './unreadNotification'
 import i18next from '~/src/config/i18n'
 import { i18n as I18n } from 'i18next'
-import Language from '../constants/language'
+import Language, { LanguageType } from '../constants/language'
 import { LocalAccount } from '~/src/types/localAccount'
 import { LocalTag } from '~/src/types/localTag'
 import { UnreadNotification as UnreadNotificationConfig } from '~/src/types/unreadNotification'
@@ -1033,6 +1033,24 @@ ipcMain.handle('toggle-spellchecker', async (_: IpcMainInvokeEvent, value: boole
   return conf.language.spellchecker.enabled
 })
 
+ipcMain.handle('update-spellchecker-languages', async (_: IpcMainInvokeEvent, languages: Array<string>) => {
+  const decoded: Array<string> = languages.map(l => {
+    const d = decodeLanguage(l)
+    return d.rfc4646
+  })
+  mainWindow?.webContents.session.setSpellCheckerLanguages(decoded)
+
+  const preferences = new Preferences(preferencesDBPath)
+  const conf = await preferences.update({
+    language: {
+      spellchecker: {
+        languages: languages
+      }
+    }
+  })
+  return conf.language.spellchecker.languages
+})
+
 // hashtag
 ipcMain.handle('save-hashtag', async (_: IpcMainInvokeEvent, tag: string) => {
   const hashtags = new Hashtags(hashtagsDB)
@@ -1482,3 +1500,12 @@ const username = (account: Entity.Account): string => {
     return account.username
   }
 }
+
+const decodeLanguage = (lang: string): LanguageType => {
+  const l = Object.keys(Language).find(k => Language[k].key === lang)
+  if (l === undefined) {
+    return Language.en
+  } else {
+    return Language[l]
+  }
+}

src/main/preferences.ts

@@ -56,7 +56,8 @@ const notify: Notify = {
 const language: LanguageSet = {
   language: Language.en.key,
   spellchecker: {
-    enabled: true
+    enabled: true,
+    languages: [Language.en.key]
   }
 }
 

src/renderer/components/Preferences/Language.vue

@@ -10,10 +10,22 @@
         <p class="notice">{{ $t('preferences.language.notice') }}</p>
       </el-form-item>
     </el-form>
-    <el-form class="spellchecker section" label-position="left" size="small">
+    <el-form class="spellchecker section" label-position="top" size="small">
       <h3>{{ $t('preferences.language.spellchecker.title') }}</h3>
       <el-form-item for="spellcheck" :label="$t('preferences.language.spellchecker.enabled')">
         <el-switch id="spellcheck" v-model="spellcheck" active-color="#13ce66"> </el-switch>
+      </el-form-item>
+      <el-form-item for="spellcheck_languages">
+        <el-checkbox-group id="spellcheck_languages" v-model="spellcheckLanguages">
+          <el-checkbox
+            v-for="language in languages"
+            :label="language.key"
+            :key="language.key"
+            :name="language.name"
+            :disabled="!spellcheck"
+            >{{ language.name }}</el-checkbox
+          >
+        </el-checkbox-group>
         <p class="notice">{{ $t('preferences.language.notice') }}</p>
       </el-form-item>
     </el-form>
@@ -68,6 +80,19 @@ export default {
           this.confirm()
         })
       }
+    },
+    spellcheckLanguages: {
+      get() {
+        return this.$store.state.Preferences.Language.language.spellchecker.languages
+      },
+      set(value) {
+        this.$store.dispatch('Preferences/Language/updateSpellcheckerLanguages', value).catch(() => {
+          this.$message({
+            message: this.$t('message.language_not_support_spellchecker_error'),
+            type: 'error'
+          })
+        })
+      }
     }
   },
   created() {

src/renderer/store/Preferences/Language.ts

@@ -15,7 +15,8 @@ const state: LanguageState = {
   language: {
     language: Language.en.key,
     spellchecker: {
-      enabled: true
+      enabled: true,
+      languages: [Language.en.key]
     }
   }
 }
@@ -23,7 +24,8 @@ const state: LanguageState = {
 export const MUTATION_TYPES = {
   UPDATE_LANGUAGE: 'updateLanguage',
   CHANGE_LANGUAGE: 'changeLanguage',
-  TOGGLE_SPELLCHECKER: 'toggleSpellchecker'
+  TOGGLE_SPELLCHECKER: 'toggleSpellchecker',
+  UPDATE_SPELLCHECKER_LANGUAGES: 'updateSpellcheckerLanguages'
 }
 
 const mutations: MutationTree<LanguageState> = {
@@ -35,6 +37,9 @@ const mutations: MutationTree<LanguageState> = {
   },
   [MUTATION_TYPES.TOGGLE_SPELLCHECKER]: (state, enabled: boolean) => {
     state.language.spellchecker.enabled = enabled
+  },
+  [MUTATION_TYPES.UPDATE_SPELLCHECKER_LANGUAGES]: (state, languages: Array<string>) => {
+    state.language.spellchecker.languages = languages
   }
 }
 
@@ -54,6 +59,11 @@ const actions: ActionTree<LanguageState, RootState> = {
     commit(MUTATION_TYPES.TOGGLE_SPELLCHECKER, value)
     return value
   },
+  updateSpellcheckerLanguages: async ({ commit }, languages: Array<string>) => {
+    const langs: Array<string> = await win.ipcRenderer.invoke('update-spellchecker-languages', languages)
+    commit(MUTATION_TYPES.UPDATE_SPELLCHECKER_LANGUAGES, langs)
+    return langs
+  },
   relaunch: () => {
     win.ipcRenderer.send('relaunch')
   }

src/types/language.ts

@@ -2,5 +2,6 @@ export type Language = {
   language: string
   spellchecker: {
     enabled: boolean
+    languages: Array<string>
   }
 }