feat(App): Improved spell checker & context menu

Author: adlk

package-lock.json

@@ -36,19 +36,22 @@
     "classnames": "^2.2.5",
     "debug-electron": "^0.0.4",
     "du": "^0.1.0",
+    "electron-dl": "1.12.0",
     "electron-fetch": "1.3.0",
+    "electron-hunspell": "0.1.1",
     "electron-react-titlebar": "0.8.1",
-    "electron-spellchecker": "^1.1.2",
     "electron-updater": "^4.0.4",
     "electron-window-state": "^4.1.0",
     "fs-extra": "7.0.1",
     "gulp-cli": "1.2.2",
+    "hunspell-dict-downloader": "1.0.0",
     "ini": "^1.3.4",
     "jshashes": "^1.0.6",
     "jsonwebtoken": "^7.4.1",
     "keymaster": "^1.6.2",
     "lodash": "^4.17.4",
     "mdi": "^1.9.33",
+    "mime-types": "2.1.21",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
     "mobx": "^3.1.0",

package.json

@@ -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)}

src/components/settings/settings/EditSettingsForm.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');

src/config.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,

src/containers/settings/EditSettingsScreen.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);
+    }
+  });
+};

src/electron/ipc-api/download.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);
 };

src/electron/ipc-api/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,
+          });
+        }
+      });
     },
   );
 }

src/features/spellchecker/index.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;
+}