Merge pull request #276 from meetfranz/feature/spellcheck-settings

Spellcheck settings

12 files changed, 196 insertions, 35 deletions

diff --git a/src/actions/service.js b/src/actions/service.js
index 1b918251b..e3100e986 100644
--- a/src/actions/service.js
+++ b/src/actions/service.js
@@ -50,6 +50,10 @@ export default {
     channel: PropTypes.string.isRequired,
     args: PropTypes.object.isRequired,
   },
+  sendIPCMessageToAllServices: {
+    channel: PropTypes.string.isRequired,
+    args: PropTypes.object.isRequired,
+  },
   openWindow: {
     event: PropTypes.object.isRequired,
   },
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 3b21a7765..fea8d682d 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -74,7 +74,6 @@ export default class SettingsNavigation extends Component {
         <Link
           to="/auth/logout"
           className="settings-navigation__link"
-          activeClassName="is-active"
         >
           {intl.formatMessage(messages.logout)}
         </Link>
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index ba07b1a5b..601d57c81 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -30,6 +30,10 @@ const messages = defineMessages({
     id: 'settings.app.headlineAppearance',
     defaultMessage: '!!!Appearance',
   },
+  headlineAdvanced: {
+    id: 'settings.app.headlineAdvanced',
+    defaultMessage: '!!!Advanced',
+  },
   buttonSearchForUpdate: {
     id: 'settings.app.buttonSearchForUpdate',
     defaultMessage: '!!!Check for updates',
@@ -54,6 +58,10 @@ const messages = defineMessages({
     id: 'settings.app.currentVersion',
     defaultMessage: '!!!Current version:',
   },
+  restartRequired: {
+    id: 'settings.app.restartRequired',
+    defaultMessage: '!!!Changes require restart',
+  },
 });
 
 @observer
@@ -116,18 +124,31 @@ export default class EditSettingsForm extends Component {
             onChange={e => this.submit(e)}
             id="form"
           >
-            <h2>{intl.formatMessage(messages.headlineGeneral)}</h2>
+            {/* General */}
+            <h2 id="general">{intl.formatMessage(messages.headlineGeneral)}</h2>
             <Toggle field={form.$('autoLaunchOnStart')} />
             <Toggle field={form.$('runInBackground')} />
             <Toggle field={form.$('enableSystemTray')} />
             {process.platform === 'win32' && (
               <Toggle field={form.$('minimizeToSystemTray')} />
             )}
-            <h2>{intl.formatMessage(messages.headlineAppearance)}</h2>
+
+            {/* Appearance */}
+            <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
             <Toggle field={form.$('showDisabledServices')} />
-            <h2>{intl.formatMessage(messages.headlineLanguage)}</h2>
+
+            {/* Language */}
+            <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
             <Select field={form.$('locale')} showLabel={false} />
-            <h2>{intl.formatMessage(messages.headlineUpdates)}</h2>
+
+            {/* Advanced */}
+            <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
+            <Toggle field={form.$('enableSpellchecking')} />
+            <p className="settings__help">{intl.formatMessage(messages.restartRequired)}</p>
+            {/* <Select field={form.$('spellcheckingLanguage')} /> */}
+
+            {/* Updates */}
+            <h2 id="updates">{intl.formatMessage(messages.headlineUpdates)}</h2>
             {updateIsReadyToInstall ? (
               <Button
                 label={intl.formatMessage(messages.buttonInstallUpdate)}
diff --git a/src/config.js b/src/config.js
index 10359f426..5ee5ee18e 100644
--- a/src/config.js
+++ b/src/config.js
@@ -11,6 +11,8 @@ export const DEFAULT_APP_SETTINGS = {
   enableSystemTray: true,
   minimizeToSystemTray: false,
   showDisabledServices: true,
+  enableSpellchecking: true,
+  // spellcheckingLanguage: 'auto',
   locale: 'en-US',
   beta: false,
   isAppMuted: false,
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index b10acf3c6..62e255dab 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -7,7 +7,7 @@ import AppStore from '../../stores/AppStore';
 import SettingsStore from '../../stores/SettingsStore';
 import UserStore from '../../stores/UserStore';
 import Form from '../../lib/Form';
-import languages from '../../i18n/languages';
+import { APP_LOCALES } from '../../i18n/languages';
 import { gaPage } from '../../lib/analytics';
 import { DEFAULT_APP_SETTINGS } from '../../config';
 
@@ -43,6 +43,18 @@ const messages = defineMessages({
     id: 'settings.app.form.showDisabledServices',
     defaultMessage: '!!!Display disabled services tabs',
   },
+  enableSpellchecking: {
+    id: 'settings.app.form.enableSpellchecking',
+    defaultMessage: '!!!Enable spell checking',
+  },
+  spellcheckingLanguage: {
+    id: 'settings.app.form.spellcheckingLanguage',
+    defaultMessage: '!!!Language for spell checking',
+  },
+  // spellcheckingAutomaticDetection: {
+  //   id: 'settings.app.form.spellcheckingAutomaticDetection',
+  //   defaultMessage: '!!!Detect language automatically',
+  // },
   beta: {
     id: 'settings.app.form.beta',
     defaultMessage: '!!!Include beta versions',
@@ -73,6 +85,8 @@ export default class EditSettingsScreen extends Component {
         enableSystemTray: settingsData.enableSystemTray,
         minimizeToSystemTray: settingsData.minimizeToSystemTray,
         showDisabledServices: settingsData.showDisabledServices,
+        enableSpellchecking: settingsData.enableSpellchecking,
+        // spellcheckingLanguage: settingsData.spellcheckingLanguage,
         locale: settingsData.locale,
         beta: settingsData.beta,
       },
@@ -89,14 +103,25 @@ export default class EditSettingsScreen extends Component {
     const { app, settings, user } = this.props.stores;
     const { intl } = this.context;
 
-    const options = [];
-    Object.keys(languages).forEach((key) => {
-      options.push({
+    const locales = [];
+    Object.keys(APP_LOCALES).forEach((key) => {
+      locales.push({
         value: key,
-        label: languages[key],
+        label: APP_LOCALES[key],
       });
     });
 
+    // const spellcheckerLocales = [{
+    //   value: 'auto',
+    //   label: intl.formatMessage(messages.spellcheckingAutomaticDetection),
+    // }];
+    // Object.keys(SPELLCHECKER_LOCALES).forEach((key) => {
+    //   spellcheckerLocales.push({
+    //     value: key,
+    //     label: SPELLCHECKER_LOCALES[key],
+    //   });
+    // });
+
     const config = {
       fields: {
         autoLaunchOnStart: {
@@ -129,10 +154,21 @@ export default class EditSettingsScreen extends Component {
           value: settings.all.showDisabledServices,
           default: DEFAULT_APP_SETTINGS.showDisabledServices,
         },
+        enableSpellchecking: {
+          label: intl.formatMessage(messages.enableSpellchecking),
+          value: settings.all.enableSpellchecking,
+          default: DEFAULT_APP_SETTINGS.enableSpellchecking,
+        },
+        // spellcheckingLanguage: {
+        //   label: intl.formatMessage(messages.spellcheckingLanguage),
+        //   value: settings.all.spellcheckingLanguage,
+        //   options: spellcheckerLocales,
+        //   default: DEFAULT_APP_SETTINGS.spellcheckingLanguage,
+        // },
         locale: {
           label: intl.formatMessage(messages.language),
           value: app.locale,
-          options,
+          options: locales,
           default: DEFAULT_APP_SETTINGS.locale,
         },
         beta: {
diff --git a/src/i18n/languages.js b/src/i18n/languages.js
index 72d7b26c1..77bb5deae 100644
--- a/src/i18n/languages.js
+++ b/src/i18n/languages.js
@@ -1,4 +1,4 @@
-module.exports = {
+export const APP_LOCALES = {
   'en-US': 'English',
   'pt-BR': 'Portuguese (Brazil)',
   'el-GR': 'Ελληνικά (Greece)',
@@ -15,3 +15,46 @@ module.exports = {
   'zh-Hant': 'Chinese (Traditional)',
   'nb-NO': 'Norsk',
 };
+
+export default APP_LOCALES;
+
+// export const SPELLCHECKER_LOCALES = {
+//   af: 'Afrikaans',
+//   sq: 'Albanian',
+//   ar: 'Arabic',
+//   bg: 'Bulgarian',
+//   zh: 'Chinese',
+//   hr: 'Croatian',
+//   cs: 'Czech',
+//   da: 'Danish',
+//   nl: 'Dutch',
+//   en: 'English',
+//   'en-AU': 'English (AU)',
+//   'en-CA': 'English (CA)',
+//   'en-GB': 'English (GB)',
+//   fi: 'Finnish',
+//   fr: 'French',
+//   ka: 'Georgian',
+//   de: 'German',
+//   el: 'Greek, Modern',
+//   hi: 'Hindi',
+//   hu: 'Hungarian',
+//   id: 'Indonesian',
+//   it: 'Italian',
+//   ja: 'Japanese',
+//   jv: 'Javanese',
+//   ko: 'Korean',
+//   lt: 'Lithuanian',
+//   lv: 'Latvian',
+//   ms: 'Malay',
+//   no: 'Norwegian',
+//   pl: 'Polish',
+//   pt: 'Portuguese',
+//   ro: 'Romanian, Moldavian, Moldovan',
+//   ru: 'Russian',
+//   sk: 'Slovak',
+//   es: 'Spanish',
+//   sv: 'Swedish',
+//   uk: 'Ukrainian',
+//   vi: 'Vietnamese',
+// };
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 56daa9163..ed1f4a722 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -132,6 +132,7 @@
   "settings.app.headlineLanguage": "Language",
   "settings.app.headlineUpdates": "Updates",
   "settings.app.headlineAppearance": "Appearance",
+  "settings.app.headlineAdvanced": "Advanced",
   "settings.app.buttonSearchForUpdate": "Check for updates",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.updateStatusSearching": "Is searching for update",
@@ -143,9 +144,11 @@
   "settings.app.form.minimizeToSystemTray": "Minimize Franz to system tray",
   "settings.app.form.runInBackground": "Keep Franz in background when closing the window",
   "settings.app.form.language": "Language",
+  "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.showDisabledServices": "Display disabled services tabs",
   "settings.app.form.beta": "Include beta versions",
   "settings.app.currentVersion": "Current version:",
+  "settings.app.restartRequired": "Changes require restart",
   "settings.user.form.firstname": "Firstname",
   "settings.user.form.lastname": "Lastname",
   "settings.user.form.email": "Email",
diff --git a/src/i18n/translations.js b/src/i18n/translations.js
index 492a6cc4e..161a172ba 100644
--- a/src/i18n/translations.js
+++ b/src/i18n/translations.js
@@ -1,7 +1,7 @@
-import languages from './languages';
+import { APP_LOCALES } from './languages';
 
 const translations = [];
-Object.keys(languages).forEach((key) => {
+Object.keys(APP_LOCALES).forEach((key) => {
   try {
     const translation = require(`./locales/${key}.json`); // eslint-disable-line
     translations[key] = translation;
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 269cd1526..87d31c0c5 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -37,6 +37,7 @@ export default class ServicesStore extends Store {
     this.actions.service.toggleService.listen(this._toggleService.bind(this));
     this.actions.service.handleIPCMessage.listen(this._handleIPCMessage.bind(this));
     this.actions.service.sendIPCMessage.listen(this._sendIPCMessage.bind(this));
+    this.actions.service.sendIPCMessageToAllServices.listen(this._sendIPCMessageToAllServices.bind(this));
     this.actions.service.setUnreadMessageCount.listen(this._setUnreadMessageCount.bind(this));
     this.actions.service.openWindow.listen(this._openWindow.bind(this));
     this.actions.service.filter.listen(this._filter.bind(this));
@@ -58,6 +59,7 @@ export default class ServicesStore extends Store {
       this._mapActiveServiceToServiceModelReaction.bind(this),
       this._saveActiveService.bind(this),
       this._logoutReaction.bind(this),
+      this._shareSettingsWithServiceProcess.bind(this),
     ]);
 
     // Just bind this
@@ -284,6 +286,7 @@ export default class ServicesStore extends Store {
     if (channel === 'hello') {
       this._initRecipePolling(service.id);
       this._initializeServiceRecipeInWebview(serviceId);
+      this._shareSettingsWithServiceProcess();
     } else if (channel === 'messages') {
       this.actions.service.setUnreadMessageCount({
         serviceId,
@@ -330,7 +333,17 @@ export default class ServicesStore extends Store {
   @action _sendIPCMessage({ serviceId, channel, args }) {
     const service = this.one(serviceId);
 
-    service.webview.send(channel, args);
+    if (service.webview) {
+      service.webview.send(channel, args);
+    }
+  }
+
+  @action _sendIPCMessageToAllServices({ channel, args }) {
+    this.all.forEach(s => this.actions.service.sendIPCMessage({
+      serviceId: s.id,
+      channel,
+      args,
+    }));
   }
 
   @action _openWindow({ event }) {
@@ -495,6 +508,13 @@ export default class ServicesStore extends Store {
     }
   }
 
+  _shareSettingsWithServiceProcess() {
+    this.actions.service.sendIPCMessageToAllServices({
+      channel: 'settings-update',
+      args: this.stores.settings.all,
+    });
+  }
+
   _cleanUpTeamIdAndCustomUrl(recipeId, data) {
     const serviceData = data;
     const recipe = this.stores.recipes.one(recipeId);
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index f804e6273..6e93094b4 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -350,9 +350,10 @@
   flex-direction: column;
 
   .settings-navigation__link {
-    display: block;
+    display: flex;
+    align-items: center;
     height: 50px;
-    line-height: 50px;
+    flex-shrink: 0;
     text-decoration: none;
     color: $theme-text-color;
     padding: 0 20px;
diff --git a/src/webview/plugin.js b/src/webview/plugin.js
index ffc9084e4..c877132b1 100644
--- a/src/webview/plugin.js
+++ b/src/webview/plugin.js
@@ -1,11 +1,13 @@
-const { ipcRenderer } = require('electron');
-const path = require('path');
+import { ipcRenderer } from 'electron';
+import path from 'path';
 
-const RecipeWebview = require('./lib/RecipeWebview');
+import RecipeWebview from './lib/RecipeWebview';
 
-require('./notifications.js');
-require('./spellchecker.js');
-require('./ime.js');
+import Spellchecker from './spellchecker.js';
+import './notifications.js';
+import './ime.js';
+
+const spellchecker = new Spellchecker();
 
 ipcRenderer.on('initializeRecipe', (e, data) => {
   const modulePath = path.join(data.recipe.path, 'webview.js');
@@ -19,6 +21,20 @@ ipcRenderer.on('initializeRecipe', (e, data) => {
   }
 });
 
+ipcRenderer.on('settings-update', (e, data) => {
+  if (data.enableSpellchecking) {
+    if (!spellchecker.isEnabled) {
+      spellchecker.enable();
+
+      // TODO: this does not work yet, needs more testing
+      // if (data.spellcheckingLanguage !== 'auto') {
+      //   console.log('set spellchecking language to', data.spellcheckingLanguage);
+      //   spellchecker.switchLanguage(data.spellcheckingLanguage);
+      // }
+    }
+  }
+});
+
 document.addEventListener('DOMContentLoaded', () => {
   ipcRenderer.sendToHost('hello');
 }, false);
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index ec8807874..5beb77e03 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,14 +1,30 @@
 import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
 
-window.spellCheckHandler = new SpellCheckHandler();
-setTimeout(() => {
-  window.spellCheckHandler.attachToInput();
-}, 1000);
-
-// TODO: should we set the language to user settings?
-// window.spellCheckHandler.switchLanguage('en-US');
-
-const contextMenuBuilder = new ContextMenuBuilder(window.spellCheckHandler);
-const contextMenuListener = new ContextMenuListener((info) => { // eslint-disable-line
-  contextMenuBuilder.showPopupMenu(info);
-});
+import { isMac } from '../environment';
+
+export default class Spellchecker {
+  isEnabled = false;
+  spellchecker = null;
+
+  enable() {
+    this.spellchecker = new SpellCheckHandler();
+    if (!isMac) {
+      this.spellchecker.attachToInput();
+      this.spellchecker.switchLanguage(navigator.language);
+    }
+
+    const contextMenuBuilder = new ContextMenuBuilder(this.spellchecker);
+
+    new ContextMenuListener((info) => { // eslint-disable-line
+      contextMenuBuilder.showPopupMenu(info);
+    });
+  }
+
+  // TODO: this does not work yet, needs more testing
+  // switchLanguage(language) {
+  //   if (language !== 'auto') {
+  //     this.spellchecker.switchLanguage(language);
+  //   }
+  // }
+}
+