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?",

src/main/index.ts

@@ -1033,6 +1033,18 @@ ipcMain.handle('toggle-spellchecker', async (_: IpcMainInvokeEvent, value: boole
   return conf.language.spellchecker.enabled
 })
 
+ipcMain.handle('update-spellchecker-languages', async (_: IpcMainInvokeEvent, languages: Array<string>) => {
+  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)

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,14 @@ export default {
           this.confirm()
         })
       }
+    },
+    spellcheckLanguages: {
+      get() {
+        return this.$store.state.Preferences.Language.language.spellchecker.languages
+      },
+      set(value) {
+        this.$store.dispatch('Preferences/Language/updateSpellcheckerLanguages', value)
+      }
     }
   },
   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>
   }
 }