feat(App): Improved spell checker & context menu

19 files changed, 526 insertions, 189 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 280449ead..1ec2ab614 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -168,6 +168,18 @@ export default @observer class EditSettingsForm extends Component {
             {/* Language */}
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
             <Select field={form.$('locale')} showLabel={false} />
+            <PremiumFeatureContainer
+              condition={isSpellcheckerPremiumFeature}
+            >
+              <div>
+                <Toggle
+                  field={form.$('enableSpellchecking')}
+                />
+                {form.$('enableSpellchecking').value && (
+                  <Select field={form.$('spellcheckerLanguage')} />
+                )}
+              </div>
+            </PremiumFeatureContainer>
             <a
               href={FRANZ_TRANSLATION}
               target="_blank"
@@ -178,17 +190,8 @@ export default @observer class EditSettingsForm extends Component {
 
             {/* Advanced */}
             <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
-            <PremiumFeatureContainer
-              condition={isSpellcheckerPremiumFeature}
-            >
-              <Toggle
-                field={form.$('enableSpellchecking')}
-                disabled
-              />
-            </PremiumFeatureContainer>
             <Toggle field={form.$('enableGPUAcceleration')} />
             <p className="settings__help">{intl.formatMessage(messages.enableGPUAccelerationInfo)}</p>
-            {/* <Select field={form.$('spellcheckingLanguage')} /> */}
             <div className="settings__settings-group">
               <h3>
                 {intl.formatMessage(messages.subheadlineCache)}
diff --git a/src/config.js b/src/config.js
index b5702a202..6d00b8670 100644
--- a/src/config.js
+++ b/src/config.js
@@ -17,6 +17,7 @@ export const DEFAULT_APP_SETTINGS = {
   showDisabledServices: true,
   showMessageBadgeWhenMuted: true,
   enableSpellchecking: true,
+  spellcheckerLanguage: 'en-us',
   darkMode: false,
   locale: '',
   fallbackLocale: 'en-US',
@@ -35,3 +36,5 @@ export const FILE_SYSTEM_SETTINGS_TYPES = [
 ];
 
 export const SETTINGS_PATH = path.join(app.getPath('userData'), 'config');
+
+export const DICTIONARY_PATH = path.join(app.getPath('userData'), 'dicts');
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 7da009c8b..ea1d319d9 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 { APP_LOCALES } from '../../i18n/languages';
+import { APP_LOCALES, SPELLCHECKER_LOCALES } from '../../i18n/languages';
 import { gaPage } from '../../lib/analytics';
 import { DEFAULT_APP_SETTINGS } from '../../config';
 import { config as spellcheckerConfig } from '../../features/spellchecker';
@@ -60,8 +60,8 @@ const messages = defineMessages({
     id: 'settings.app.form.enableGPUAcceleration',
     defaultMessage: '!!!Enable GPU Acceleration',
   },
-  spellcheckingLanguage: {
-    id: 'settings.app.form.spellcheckingLanguage',
+  spellcheckerLanguage: {
+    id: 'settings.app.form.spellcheckerLanguage',
     defaultMessage: '!!!Language for spell checking',
   },
   beta: {
@@ -98,6 +98,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         darkMode: settingsData.darkMode,
         showMessageBadgeWhenMuted: settingsData.showMessageBadgeWhenMuted,
         enableSpellchecking: settingsData.enableSpellchecking,
+        spellcheckerLanguage: settingsData.spellcheckerLanguage,
         beta: settingsData.beta, // we need this info in the main process as well
         locale: settingsData.locale, // we need this info in the main process as well
       },
@@ -123,6 +124,14 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
       });
     });
 
+    const spellcheckingLanguages = [];
+    Object.keys(SPELLCHECKER_LOCALES).sort(Intl.Collator().compare).forEach((key) => {
+      spellcheckingLanguages.push({
+        value: key,
+        label: SPELLCHECKER_LOCALES[key],
+      });
+    });
+
     const config = {
       fields: {
         autoLaunchOnStart: {
@@ -165,6 +174,12 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           value: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremiumFeature ? false : settings.all.app.enableSpellchecking,
           default: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremiumFeature ? false : DEFAULT_APP_SETTINGS.enableSpellchecking,
         },
+        spellcheckerLanguage: {
+          label: intl.formatMessage(messages.spellcheckerLanguage),
+          value: settings.all.app.spellcheckerLanguage,
+          options: spellcheckingLanguages,
+          default: DEFAULT_APP_SETTINGS.spellcheckerLanguage,
+        },
         darkMode: {
           label: intl.formatMessage(messages.darkMode),
           value: settings.all.app.darkMode,
diff --git a/src/electron/ipc-api/download.js b/src/electron/ipc-api/download.js
new file mode 100644
index 000000000..399ca6117
--- /dev/null
+++ b/src/electron/ipc-api/download.js
@@ -0,0 +1,43 @@
+import { ipcMain, dialog } from 'electron';
+import { download } from 'electron-dl';
+import mime from 'mime-types';
+import fs from 'fs-extra';
+
+const debug = require('debug')('Franz:ipcApi:download');
+
+function decodeBase64Image(dataString) {
+  const matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
+
+  if (matches.length !== 3) {
+    return new Error('Invalid input string');
+  }
+
+  return new Buffer(matches[2], 'base64');
+}
+
+export default (params) => {
+  ipcMain.on('download-file', async (event, { url, content, fileOptions = {} }) => {
+    try {
+      if (!content) {
+        const dl = await download(params.mainWindow, url, {
+          saveAs: true,
+        });
+        debug('File saved to', dl.getSavePath());
+      } else {
+        const extension = mime.extension(fileOptions.mime);
+        const filename = `${fileOptions.name}.${extension}`;
+
+        dialog.showSaveDialog(params.mainWindow, {
+          defaultPath: filename,
+        }, (name) => {
+          const binaryImage = decodeBase64Image(content);
+          fs.writeFileSync(name, binaryImage, 'binary');
+
+          debug('File blob saved to', name);
+        });
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  });
+};
diff --git a/src/electron/ipc-api/index.js b/src/electron/ipc-api/index.js
index 4ea6d1475..be8e0815a 100644
--- a/src/electron/ipc-api/index.js
+++ b/src/electron/ipc-api/index.js
@@ -1,9 +1,11 @@
 import autoUpdate from './autoUpdate';
 import settings from './settings';
 import appIndicator from './appIndicator';
+import download from './download';
 
 export default (params) => {
   settings(params);
   autoUpdate(params);
   appIndicator(params);
+  download(params);
 };
diff --git a/src/features/spellchecker/index.js b/src/features/spellchecker/index.js
index 8b3fb7e00..8516f816c 100644
--- a/src/features/spellchecker/index.js
+++ b/src/features/spellchecker/index.js
@@ -12,26 +12,24 @@ export default function init(stores) {
   reaction(
     () => stores.features.features.isSpellcheckerPremiumFeature,
     (enabled, r) => {
-      if (enabled) {
-        debug('Initializing `spellchecker` feature');
+      debug('Initializing `spellchecker` feature');
 
-        // Dispose the reaction to run this only once
-        r.dispose();
+      // Dispose the reaction to run this only once
+      r.dispose();
 
-        const { isSpellcheckerPremiumFeature } = stores.features.features;
+      const { isSpellcheckerPremiumFeature } = stores.features.features;
 
-        config.isPremiumFeature = isSpellcheckerPremiumFeature !== undefined ? isSpellcheckerPremiumFeature : DEFAULT_IS_PREMIUM_FEATURE;
+      config.isPremiumFeature = isSpellcheckerPremiumFeature !== undefined ? isSpellcheckerPremiumFeature : DEFAULT_IS_PREMIUM_FEATURE;
 
-        autorun(() => {
-          if (!stores.user.data.isPremium && config.isPremiumFeature) {
-            debug('Override settings.spellcheckerEnabled flag to false');
+      autorun(() => {
+        if (!stores.user.data.isPremium && config.isPremiumFeature) {
+          debug('Override settings.spellcheckerEnabled flag to false');
 
-            Object.assign(stores.settings.all.app, {
-              enableSpellchecker: false,
-            });
-          }
-        });
-      }
+          Object.assign(stores.settings.all.app, {
+            enableSpellchecker: false,
+          });
+        }
+      });
     },
   );
 }
diff --git a/src/features/spellchecker/styles.js b/src/features/spellchecker/styles.js
deleted file mode 100644
index 097368d9a..000000000
--- a/src/features/spellchecker/styles.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export default (theme) => {
-  console.log(theme);
-  return ({
-    container: {
-      background: theme.colorBackground,
-      position: 'absolute',
-      top: 0,
-      width: '100%',
-      display: 'flex',
-      'flex-direction': 'column',
-      'align-items': 'center',
-      'justify-content': 'center',
-      'z-index': 150,
-    },
-    headline: {
-      color: theme.colorHeadline,
-      margin: [25, 0, 40],
-      'max-width': 500,
-      'text-align': 'center',
-      'line-height': '1.3em',
-    },
-    button: {
-      margin: [40, 0, 20],
-    },
-  });
-};
diff --git a/src/helpers/i18n-helpers.js b/src/helpers/i18n-helpers.js
new file mode 100644
index 000000000..afd28cab4
--- /dev/null
+++ b/src/helpers/i18n-helpers.js
@@ -0,0 +1,27 @@
+export function getLocale({ locale, locales, defaultLocale, fallbackLocale }) {
+  let localeStr = locale;
+  if (locales[locale] === undefined) {
+    let localeFuzzy;
+    Object.keys(locales).forEach((localStr) => {
+      if (locales && Object.hasOwnProperty.call(locales, localStr)) {
+        if (locale.substring(0, 2) === localStr.substring(0, 2)) {
+          localeFuzzy = localStr;
+        }
+      }
+    });
+
+    if (localeFuzzy !== undefined) {
+      localeStr = localeFuzzy;
+    } 
+  }
+
+  if (locales[localeStr] === undefined) {
+    localeStr = defaultLocale;
+  }
+
+  if (!localeStr) {
+    localeStr = fallbackLocale;
+  }
+
+  return localeStr;
+}
diff --git a/src/i18n/languages.js b/src/i18n/languages.js
index 34b369da7..b262df01e 100644
--- a/src/i18n/languages.js
+++ b/src/i18n/languages.js
@@ -27,45 +27,43 @@ export const APP_LOCALES = {
   es: 'Español',
 };
 
-export default APP_LOCALES;
+// Hunspell compatible keys
+export const SPELLCHECKER_LOCALES = {
+  'bg-bg': 'български език',
+  'ca-es': 'Català',
+  'cs-cz': 'Čeština',
+  'da-dk': 'Dansk',
+  'de-de': 'Deutsch',
+  'el-gr': 'λληνικά (Greek)',
+  'en-us': 'English',
+  'es-es': 'Español',
+  'et-ee': 'Estonian',
+  'fa-ir': 'فارسی (Persian)',
+  'fo-fo': 'Faroese',
+  'fr-fr': 'Français',
+  'he-il': 'עברית (Hebrew)',
+  'hr-hr': 'Hrvatski jezik',
+  'hu-hu': 'Magyar',
+  'it-it': 'Italiano',
+  ko: 'Korean',
+  'lt-lt': 'Lietuvių kalba',
+  'lv-lv': 'Latviešu valoda',
+  'nb-no': 'Norsk bokmål',
+  'nl-nl': 'Nederlands',
+  'pl-pl': 'Język polski',
+  'pt-br': 'Português (Brazil)',
+  'pt-pt': 'Português',
+  'ro-ro': 'Limba română',
+  'ru-ru': 'Русский (Russian)',
+  'sk-sk': 'Slovenčina',
+  'sl-si': 'Slovenski jezik',
+  sr: 'Српски језик (Serbian)',
+  'sv-se': 'Svenska',
+  'ta-in': 'தமிழ் (Tamil)',
+  'tg-tg': 'Тоҷикӣ (Tajik)',
+  tr: 'Türkçe',
+  'uk-ua': 'Українська (Ukrainian)',
+  vi: 'Tiếng Việt',
+};
 
-// 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',
-// };
+export default APP_LOCALES;
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 8d82f98a4..864a18862 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -174,6 +174,7 @@
   "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.spellcheckerLanguage": "Spell checking language",
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
   "settings.app.form.showDisabledServices": "Display disabled services tabs",
   "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled",
diff --git a/src/index.js b/src/index.js
index 994531dbf..663f81cc9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,16 @@
 import { app, BrowserWindow, shell, ipcMain } from 'electron';
+
 import fs from 'fs-extra';
 import path from 'path';
-
 import windowStateKeeper from 'electron-window-state';
 
 import { isDevMode, isMac, isWindows, isLinux } from './environment';
+
+// DEV MODE: Save user data into FranzDev
+if (isDevMode) {
+  app.setPath('userData', path.join(app.getPath('appData'), 'FranzDev'));
+}
+/* eslint-disable import/first */
 import ipcApi from './electron/ipc-api';
 import Tray from './lib/Tray';
 import Settings from './electron/Settings';
@@ -13,6 +19,7 @@ import { appId } from './package.json'; // eslint-disable-line import/no-unresol
 import './electron/exception';
 
 import { DEFAULT_APP_SETTINGS } from './config';
+/* eslint-enable import/first */
 
 const debug = require('debug')('Franz:App');
 
@@ -21,11 +28,6 @@ const debug = require('debug')('Franz:App');
 let mainWindow;
 let willQuitApp = false;
 
-// DEV MODE: Save user data into FranzDev
-if (isDevMode) {
-  app.setPath('userData', path.join(app.getPath('appData'), 'FranzDev'));
-}
-
 // Ensure that the recipe directory exists
 fs.emptyDirSync(path.join(app.getPath('userData'), 'recipes', 'temp'));
 fs.ensureFileSync(path.join(app.getPath('userData'), 'window-state.json'));
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 3e8b18801..45335c488 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -13,6 +13,7 @@ import { isMac, isLinux, isWindows } from '../environment';
 import locales from '../i18n/translations';
 import { gaEvent } from '../lib/analytics';
 import { onVisibilityChange } from '../helpers/visibility-helper';
+import { getLocale } from '../helpers/i18n-helpers';
 
 import { getServiceIdsFromPartitions, removeServicePartitionDirectory } from '../helpers/service-helpers.js';
 
@@ -59,6 +60,8 @@ export default class AppStore extends Store {
 
   @observable isFocused = true;
 
+  dictionaries = [];
+
   constructor(...args) {
     super(...args);
 
@@ -82,7 +85,7 @@ export default class AppStore extends Store {
     ]);
   }
 
-  setup() {
+  async setup() {
     this._appStartsCounter();
     // Focus the active service
     window.addEventListener('focus', this.actions.service.focusActiveService);
@@ -169,11 +172,6 @@ export default class AppStore extends Store {
 
     onVisibilityChange((isVisible) => {
       this.isFocused = isVisible;
-      // debug('Last focus', moment().diff(this.timeLastFocusStart));
-
-      // if (isVisible) {
-      //   this.timeLastFocusStart = moment();
-      // }
 
       debug('Window is visible/focused', isVisible);
     });
@@ -322,31 +320,37 @@ export default class AppStore extends Store {
   }
 
   _getDefaultLocale() {
-    let locale = app.getLocale();
-    if (locales[locale] === undefined) {
-      let localeFuzzy;
-      Object.keys(locales).forEach((localStr) => {
-        if (locales && Object.hasOwnProperty.call(locales, localStr)) {
-          if (locale.substring(0, 2) === localStr.substring(0, 2)) {
-            localeFuzzy = localStr;
-          }
-        }
-      });
-
-      if (localeFuzzy !== undefined) {
-        locale = localeFuzzy;
-      }
-    }
-
-    if (locales[locale] === undefined) {
-      locale = defaultLocale;
-    }
-
-    if (!locale) {
-      locale = DEFAULT_APP_SETTINGS.fallbackLocale;
-    }
+    return getLocale({
+      locale: app.getLocale(),
+      locales,
+      defaultLocale,
+      fallbackLocale: DEFAULT_APP_SETTINGS.fallbackLocale,
+    });
 
-    return locale;
+    // if (locales[locale] === undefined) {
+    //   let localeFuzzy;
+    //   Object.keys(locales).forEach((localStr) => {
+    //     if (locales && Object.hasOwnProperty.call(locales, localStr)) {
+    //       if (locale.substring(0, 2) === localStr.substring(0, 2)) {
+    //         localeFuzzy = localStr;
+    //       }
+    //     }
+    //   });
+
+    //   if (localeFuzzy !== undefined) {
+    //     locale = localeFuzzy;
+    //   }
+    // }
+
+    // if (locales[locale] === undefined) {
+    //   locale = defaultLocale;
+    // }
+
+    // if (!locale) {
+    //   locale = DEFAULT_APP_SETTINGS.fallbackLocale;
+    // }
+
+    // return locale;
   }
 
   _muteAppHandler() {
diff --git a/src/stores/DictionaryStore.js b/src/stores/DictionaryStore.js
new file mode 100644
index 000000000..b9c5f2abf
--- /dev/null
+++ b/src/stores/DictionaryStore.js
@@ -0,0 +1,45 @@
+import { observable } from 'mobx';
+import { createDownloader } from 'hunspell-dict-downloader';
+
+import Store from './lib/Store';
+
+import { DICTIONARY_PATH } from '../config';
+
+const debug = require('debug')('Franz:DictionaryStore');
+
+export default class DictionaryStore extends Store {
+  @observable available = []
+  @observable installed = []
+
+  _dictDownloader = null
+
+  constructor(...args) {
+    super(...args);
+
+    this.registerReactions([
+      this._downloadDictForUserLocale.bind(this),
+    ]);
+  }
+
+  async setup() {
+    this._dictDownloader = await createDownloader(DICTIONARY_PATH);
+    debug('dicts', this._dictDownloader);
+
+    this.available = this._dictDownloader.availableDictionaries;
+    this.installed = this._dictDownloader.installedDictionaries;
+
+    if (!this.installed.includes('en-us')) {
+      this._dictDownloader.installDictionary('en-us');
+    }
+  }
+
+  _downloadDictForUserLocale() {
+    const spellcheckerLanguage = this.stores.settings.app.spellcheckerLanguage;
+
+    debug('trying to Downloading dict for', spellcheckerLanguage);
+    if (!this.installed.includes(spellcheckerLanguage) && this.available.includes(spellcheckerLanguage) && spellcheckerLanguage !== 'en-us') {
+      debug('Downloading dict for', spellcheckerLanguage);
+      this._dictDownloader.installDictionary(spellcheckerLanguage);
+    }
+  }
+}
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index e22b343e7..8f217ea94 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -67,9 +67,14 @@ export default class ServicesStore extends Store {
   }
 
   setup() {
-    // Single key reactions
+    // Single key reactions for the sake of your CPU
     reaction(
-      () => this.stores.settings.all.app.enableSpellchecking,
+      () => this.stores.settings.app.enableSpellchecking,
+      () => this._shareSettingsWithServiceProcess(),
+    );
+
+    reaction(
+      () => this.stores.settings.app.spellcheckerLanguage,
       () => this._shareSettingsWithServiceProcess(),
     );
   }
@@ -590,9 +595,10 @@ export default class ServicesStore extends Store {
   }
 
   _shareSettingsWithServiceProcess() {
+    const settings = this.stores.settings.app;
     this.actions.service.sendIPCMessageToAllServices({
       channel: 'settings-update',
-      args: this.stores.settings.all.app,
+      args: settings,
     });
   }
 
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
index b62ac15e0..4a42ed924 100644
--- a/src/stores/SettingsStore.js
+++ b/src/stores/SettingsStore.js
@@ -5,8 +5,10 @@ import localStorage from 'mobx-localstorage';
 import Store from './lib/Store';
 import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
+import { getLocale } from '../helpers/i18n-helpers';
 
 import { DEFAULT_APP_SETTINGS, FILE_SYSTEM_SETTINGS_TYPES } from '../config';
+import { SPELLCHECKER_LOCALES } from '../i18n/languages';
 
 const { systemPreferences } = remote;
 const debug = require('debug')('Franz:SettingsStore');
@@ -41,7 +43,6 @@ export default class SettingsStore extends Store {
     });
 
     this.fileSystemSettingsTypes.forEach((type) => {
-      console.log(type);
       ipcRenderer.send('getAppSettings', type);
     });
   }
@@ -157,10 +158,18 @@ export default class SettingsStore extends Store {
 
     // Enable dark mode once
     if (!this.all.migration['5.0.0-beta.19-settings']) {
+      const spellcheckerLanguage = getLocale({
+        locale: this.stores.settings.app.locale,
+        locales: SPELLCHECKER_LOCALES,
+        defaultLocale: DEFAULT_APP_SETTINGS.spellcheckerLanguage,
+        fallbackLocale: DEFAULT_APP_SETTINGS.spellcheckerLanguage,
+      });
+
       this.actions.settings.update({
         type: 'app',
         data: {
           darkMode: systemPreferences.isDarkMode(),
+          spellcheckerLanguage,
         },
       });
 
diff --git a/src/stores/index.js b/src/stores/index.js
index 96b844c95..f547d0a7a 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -9,6 +9,7 @@ import UIStore from './UIStore';
 import PaymentStore from './PaymentStore';
 import NewsStore from './NewsStore';
 import RequestStore from './RequestStore';
+import DictionaryStore from './DictionaryStore';
 import GlobalErrorStore from './GlobalErrorStore';
 
 export default (api, actions, router) => {
@@ -26,6 +27,7 @@ export default (api, actions, router) => {
     payment: new PaymentStore(stores, api, actions),
     news: new NewsStore(stores, api, actions),
     requests: new RequestStore(stores, api, actions),
+    dictionary: new DictionaryStore(stores, api, actions),
     globalError: new GlobalErrorStore(stores, api, actions),
   });
   // Initialize all stores
diff --git a/src/webview/contextMenu.js b/src/webview/contextMenu.js
new file mode 100644
index 000000000..4dda51bde
--- /dev/null
+++ b/src/webview/contextMenu.js
@@ -0,0 +1,175 @@
+// This is heavily based on https://github.com/sindresorhus/electron-context-menu
+// ❤ @sindresorhus
+
+import { clipboard, remote, ipcRenderer, shell } from 'electron';
+
+import { isDevMode } from '../environment';
+
+const debug = require('debug')('Franz:contextMenu');
+
+const { Menu } = remote;
+
+// const win = remote.getCurrentWindow();
+const webContents = remote.getCurrentWebContents();
+
+function delUnusedElements(menuTpl) {
+  let notDeletedPrevEl;
+  return menuTpl.filter(el => el.visible !== false).filter((el, i, array) => {
+    const toDelete = el.type === 'separator' && (!notDeletedPrevEl || i === array.length - 1 || array[i + 1].type === 'separator');
+    notDeletedPrevEl = toDelete ? notDeletedPrevEl : el;
+    return !toDelete;
+  });
+}
+
+const buildMenuTpl = (props, suggestions) => {
+  const { editFlags } = props;
+  const hasText = props.selectionText.trim().length > 0;
+  const can = type => editFlags[`can${type}`] && hasText;
+
+  let menuTpl = [
+    {
+      type: 'separator',
+    }, {
+      id: 'cut',
+      role: can('Cut') ? 'cut' : '',
+      enabled: can('Cut'),
+      visible: props.isEditable,
+    }, {
+      id: 'copy',
+      label: 'Copy',
+      role: can('Copy') ? 'copy' : '',
+      enabled: can('Copy'),
+      visible: props.isEditable || hasText,
+    }, {
+      id: 'paste',
+      label: 'Paste',
+      role: editFlags.canPaste ? 'paste' : '',
+      enabled: editFlags.canPaste,
+      visible: props.isEditable,
+    }, {
+      type: 'separator',
+    },
+  ];
+
+  if (props.linkURL && props.mediaType === 'none') {
+    menuTpl = [{
+      type: 'separator',
+    }, {
+      id: 'openLink',
+      label: 'Open Link in Browser',
+      click() {
+        shell.openExternal(props.linkURL);
+      },
+    }, {
+      id: 'copyLink',
+      label: 'Copy Link',
+      click() {
+        clipboard.write({
+          bookmark: props.linkText,
+          text: props.linkURL,
+        });
+      },
+    }, {
+      type: 'separator',
+    }];
+  }
+
+  if (props.mediaType === 'image') {
+    menuTpl.push({
+      type: 'separator',
+    }, {
+      id: 'openImage',
+      label: 'Open Image in Browser',
+      click() {
+        shell.openExternal(props.srcURL);
+      },
+    }, {
+      id: 'copyImageAddress',
+      label: 'Copy Image Address',
+      click() {
+        clipboard.write({
+          bookmark: props.srcURL,
+          text: props.srcURL,
+        });
+      },
+    }, {
+      type: 'separator',
+    });
+  }
+
+  if (props.mediaType === 'image') {
+    menuTpl.push({
+      id: 'saveImageAs',
+      label: 'Save Image As…',
+      async click() {
+        if (props.srcURL.startsWith('blob:')) {
+          const url = new window.URL(props.srcURL.substr(5));
+          const fileName = url.pathname.substr(1);
+          const resp = await window.fetch(props.srcURL);
+          const blob = await resp.blob();
+          const reader = new window.FileReader();
+          reader.readAsDataURL(blob);
+          reader.onloadend = () => {
+            const base64data = reader.result;
+
+            ipcRenderer.send('download-file', {
+              content: base64data,
+              fileOptions: {
+                name: fileName,
+                mime: blob.type,
+              },
+            });
+          };
+          debug('binary string', blob);
+        } else {
+          ipcRenderer.send('download-file', { url: props.srcURL });
+        }
+      },
+    }, {
+      type: 'separator',
+    });
+  }
+
+  if (suggestions.length > 0) {
+    suggestions.reverse().map(suggestion => menuTpl.unshift({
+      id: `suggestion-${suggestion}`,
+      label: suggestion,
+      click() {
+        webContents.replaceMisspelling(suggestion);
+      },
+    }));
+  }
+
+  if (isDevMode) {
+    menuTpl.push({
+      type: 'separator',
+    }, {
+      id: 'inspect',
+      label: 'Inspect Element',
+      click() {
+        webContents.inspectElement(props.x, props.y);
+      },
+    }, {
+      type: 'separator',
+    });
+  }
+
+  return delUnusedElements(menuTpl);
+};
+
+export default function contextMenu(spellcheckProvider) {
+  webContents.on('context-menu', (e, props) => {
+    e.preventDefault();
+
+    let suggestions = [];
+    if (spellcheckProvider && props.misspelledWord) {
+      suggestions = spellcheckProvider.getSuggestion(props.misspelledWord);
+
+      debug('Suggestions', suggestions);
+    }
+
+    const menu = Menu.buildFromTemplate(buildMenuTpl(props, suggestions.slice(0, 5)));
+
+    menu.popup(remote.getCurrentWindow());
+  });
+}
diff --git a/src/webview/plugin.js b/src/webview/plugin.js
index 427ec75ad..72530733d 100644
--- a/src/webview/plugin.js
+++ b/src/webview/plugin.js
@@ -1,12 +1,11 @@
 import { ipcRenderer } from 'electron';
-import { ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
 import path from 'path';
 
-import { isDevMode } from '../environment';
 import RecipeWebview from './lib/RecipeWebview';
 
-import Spellchecker from './spellchecker';
+import spellchecker, { switchDict, disable as disableSpellchecker } from './spellchecker';
 import { injectDarkModeStyle, isDarkModeStyleInjected, removeDarkModeStyle } from './darkmode';
+import contextMenu from './contextMenu';
 import './notifications';
 
 const debug = require('debug')('Franz:Plugin');
@@ -34,19 +33,21 @@ ipcRenderer.on('initializeRecipe', (e, data) => {
   }
 });
 
-const spellchecker = new Spellchecker();
-spellchecker.initialize();
+// Needs to run asap to intialize dictionaries
+(async () => {
+  const spellcheckingProvider = await spellchecker();
+  contextMenu(spellcheckingProvider);
+})();
 
-const contextMenuBuilder = new ContextMenuBuilder(spellchecker.handler, null, isDevMode);
-
-new ContextMenuListener((info) => { // eslint-disable-line
-  contextMenuBuilder.showPopupMenu(info);
-});
-
-ipcRenderer.on('settings-update', (e, data) => {
+ipcRenderer.on('settings-update', async (e, data) => {
   debug('Settings update received', data);
 
-  spellchecker.toggleSpellchecker(data.enableSpellchecking);
+  if (data.enableSpellchecking) {
+    switchDict(data.spellcheckerLanguage);
+  } else {
+    disableSpellchecker();
+  }
+
   window.franzSettings = data;
 });
 
@@ -64,7 +65,7 @@ ipcRenderer.on('service-settings-update', (e, data) => {
   }
 });
 
-// Needed for current implementation of electrons 'login' event
+// Needed for current implementation of electrons 'login' event 🤦‍
 ipcRenderer.on('get-service-id', (event) => {
   debug('Asking for service id', event);
 
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index a504a4039..b0192b7ef 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,63 +1,92 @@
-import { SpellCheckHandler } from 'electron-spellchecker';
+import { webFrame } from 'electron';
+import fs from 'fs';
+import path from 'path';
+import { SpellCheckerProvider } from 'electron-hunspell';
 
-import { isMac } from '../environment';
+import { DICTIONARY_PATH } from '../config';
 
-export default class Spellchecker {
-  isInitialized = false;
-  handler = null;
-  initRetries = 0;
-  DOMCheckInterval = null;
+const debug = require('debug')('Franz:spellchecker');
 
-  get inputs() {
-    return document.querySelectorAll('input[type="text"], [contenteditable="true"], textarea');
-  }
+let provider;
+let currentDict;
+let _isEnabled = false;
 
-  initialize() {
-    this.handler = new SpellCheckHandler();
+async function loadDictionaries() {
+  const rawList = fs.readdirSync(DICTIONARY_PATH);
 
-    if (!isMac) {
-      this.attach();
-    } else {
-      this.isInitialized = true;
-    }
+  const dicts = rawList.filter(item => !item.startsWith('.') && fs.lstatSync(path.join(DICTIONARY_PATH, item)).isDirectory());
+
+  debug('Found dictionaries', dicts);
+
+  for (let i = 0; i < dicts.length; i += 1) {
+    const fileLocation = `${DICTIONARY_PATH}/${dicts[i]}/${dicts[i]}`;
+    debug('Trying to load', fileLocation);
+    // eslint-disable-next-line
+    await provider.loadDictionary(dicts[i], `${fileLocation}.dic`, `${fileLocation}.aff`);
   }
+}
+
+export async function switchDict(locale) {
+  try {
+    debug('Trying to load dictionary', locale);
 
-  attach() {
-    let initFailed = false;
+    if (!provider.availableDictionaries.includes(locale)) {
+      console.warn('Dict not available', locale);
 
-    if (this.initRetries > 3) {
-      console.error('Could not initialize spellchecker');
       return;
     }
 
-    try {
-      this.handler.attachToInput();
-      this.handler.switchLanguage(navigator.language);
-    } catch (err) {
-      initFailed = true;
-      this.initRetries = +1;
-      setTimeout(() => { this.attach(); console.warn('Spellchecker init failed, trying again in 5s'); }, 5000);
+    if (!provider) {
+      console.warn('SpellcheckProvider not initialized');
+
+      return;
     }
 
-    if (!initFailed) {
-      this.isInitialized = true;
+    if (locale === currentDict) {
+      console.warn('Dictionary is already used', currentDict);
+
+      return;
     }
-  }
 
-  toggleSpellchecker(enable = false) {
-    this.inputs.forEach((input) => {
-      input.setAttribute('spellcheck', enable);
-    });
+    provider.switchDictionary(locale);
 
-    this.intervalHandler(enable);
+    debug('Switched dictionary to', locale);
+
+    currentDict = locale;
+    _isEnabled = true;
+  } catch (err) {
+    console.error(err);
   }
+}
 
-  intervalHandler(enable) {
-    clearInterval(this.DOMCheckInterval);
+export default async function initialize(languageCode = 'en-us') {
+  try {
+    provider = new SpellCheckerProvider();
+    const locale = languageCode.toLowerCase();
 
-    if (enable) {
-      this.DOMCheckInterval = setInterval(() => this.toggleSpellchecker(enable), 30000);
-    }
+    debug('Init spellchecker');
+    await provider.initialize();
+    await loadDictionaries();
+
+    debug('Available spellchecker dictionaries', provider.availableDictionaries);
+
+    switchDict(locale);
+
+    return provider;
+  } catch (err) {
+    console.error(err);
+    return false;
   }
 }
 
+export function isEnabled() {
+  return _isEnabled;
+}
+
+export function disable() {
+  if (isEnabled()) {
+    webFrame.setSpellCheckProvider(currentDict, true, { spellCheck: () => true });
+    _isEnabled = false;
+    currentDict = null;
+  }
+}