From 0900a0139ebeac3f66b185c9f4271c93b498eb16 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Thu, 7 Feb 2019 20:48:57 +0100
Subject: Spellcheck language autodetection

First prototype is based on slack
---
 src/webview/recipe.js | 44 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

(limited to 'src/webview/recipe.js')

diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index c718b348e..38a65276e 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -1,10 +1,12 @@
 import { ipcRenderer } from 'electron';
 import path from 'path';
 import { autorun, computed, observable } from 'mobx';
+import { loadModule } from 'cld3-asm';
+import { debounce } from 'lodash';
 
 import RecipeWebview from './lib/RecipeWebview';
 
-import spellchecker, { switchDict, disable as disableSpellchecker } from './spellchecker';
+import spellchecker, { switchDict, disable as disableSpellchecker, getSpellcheckerLocaleByFuzzyIdentifier } from './spellchecker';
 import { injectDarkModeStyle, isDarkModeStyleInjected, removeDarkModeStyle } from './darkmode';
 import contextMenu from './contextMenu';
 import './notifications';
@@ -60,6 +62,39 @@ class RecipeController {
     );
 
     autorun(() => this.update());
+
+    console.log(JSON.parse(JSON.stringify(this.settings)));
+
+    const cldFactory = await loadModule();
+    const identifier = cldFactory.create(0, 1000);
+
+    window.addEventListener('keyup', debounce((e) => {
+      const elem = e.target;
+
+      let value = '';
+      if (elem.isContentEditable) {
+        value = elem.textContent;
+      } else {
+        //
+      }
+
+      // Force a minimum length to get better detection results
+      if (value.length < 30) return;
+
+      debug('Detecting language for', value);
+      const findResult = identifier.findLanguage(value);
+
+      debug('Language detection result', findResult);
+
+      if (findResult.is_reliable) {
+        debug('Language detected reliably, setting spellchecker language to', findResult.language);
+        const spellcheckerLocale = getSpellcheckerLocaleByFuzzyIdentifier(findResult.language);
+        debug('reported back', spellcheckerLocale);
+        if (spellcheckerLocale) {
+          switchDict(spellcheckerLocale);
+        }
+      }
+    }, 200));
   }
 
   loadRecipeModule(event, config, recipe) {
@@ -87,7 +122,12 @@ class RecipeController {
 
     if (this.settings.app.enableSpellchecking) {
       debug('Setting spellchecker language to', this.spellcheckerLanguage);
-      switchDict(this.spellcheckerLanguage);
+      let { spellcheckerLanguage } = this;
+      if (spellcheckerLanguage === 'automatic') {
+        debug('Found `automatic` locale, falling back to user locale until detected', this.settings.app.locale);
+        spellcheckerLanguage = this.settings.app.locale;
+      }
+      switchDict(spellcheckerLanguage);
     } else {
       debug('Disable spellchecker');
       disableSpellchecker();
-- 
cgit v1.2.3-54-g00ecf


From 3e0e220908f137344f423a80958ca8672fbf64c1 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Thu, 7 Feb 2019 20:51:48 +0100
Subject: set trigger threshhold to 40 characters

---
 src/webview/recipe.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'src/webview/recipe.js')

diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 38a65276e..fa107ba1a 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -63,8 +63,6 @@ class RecipeController {
 
     autorun(() => this.update());
 
-    console.log(JSON.parse(JSON.stringify(this.settings)));
-
     const cldFactory = await loadModule();
     const identifier = cldFactory.create(0, 1000);
 
@@ -79,7 +77,7 @@ class RecipeController {
       }
 
       // Force a minimum length to get better detection results
-      if (value.length < 30) return;
+      if (value.length < 40) return;
 
       debug('Detecting language for', value);
       const findResult = identifier.findLanguage(value);
-- 
cgit v1.2.3-54-g00ecf


From e2437f27ccd1c7646accc75b819fff3295c7a2e2 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Fri, 8 Feb 2019 11:32:20 +0100
Subject: feat(Spell checking): Add option to automatically detect language

---
 .../settings/services/EditServiceForm.js           | 10 +--
 src/containers/settings/EditServiceScreen.js       | 40 +++++++-----
 src/containers/settings/EditSettingsScreen.js      | 16 ++---
 src/features/spellchecker/index.js                 |  8 ++-
 src/helpers/i18n-helpers.js                        | 27 +++++---
 src/i18n/globalMessages.js                         | 16 +++++
 src/i18n/locales/en-US.json                        |  4 ++
 src/webview/contextMenu.js                         | 11 ++--
 src/webview/recipe.js                              | 76 +++++++++++++---------
 9 files changed, 132 insertions(+), 76 deletions(-)

(limited to 'src/webview/recipe.js')

diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 468d85c45..21616b5de 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -128,7 +128,8 @@ export default @observer class EditServiceForm extends Component {
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
-    isProxyFeaturePremiumFeature: PropTypes.bool.isRequired,
+    isProxyPremiumFeature: PropTypes.bool.isRequired,
+    isSpellcheckerPremiumFeature: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -191,7 +192,8 @@ export default @observer class EditServiceForm extends Component {
       isDeleting,
       onDelete,
       isProxyFeatureEnabled,
-      isProxyFeaturePremiumFeature,
+      isProxyPremiumFeature,
+      isSpellcheckerPremiumFeature,
     } = this.props;
     const { intl } = this.context;
 
@@ -339,14 +341,14 @@ export default @observer class EditServiceForm extends Component {
               </div>
             </div>
 
-            <PremiumFeatureContainer>
+            <PremiumFeatureContainer condition={isSpellcheckerPremiumFeature}>
               <div className="settings__settings-group">
                 <Select field={form.$('spellcheckerLanguage')} />
               </div>
             </PremiumFeatureContainer>
 
             {isProxyFeatureEnabled && (
-              <PremiumFeatureContainer condition={isProxyFeaturePremiumFeature}>
+              <PremiumFeatureContainer condition={isProxyPremiumFeature}>
                 <div className="settings__settings-group">
                   <h3>
                     {intl.formatMessage(messages.headlineProxy)}
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index b46908344..d08f0a52e 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -19,9 +19,12 @@ import { required, url, oneRequired } from '../../helpers/validation-helpers';
 import { getSelectOptions } from '../../helpers/i18n-helpers';
 
 import { config as proxyFeature } from '../../features/serviceProxy';
+import { config as spellcheckerFeature } from '../../features/spellchecker';
 
 import { SPELLCHECKER_LOCALES } from '../../i18n/languages';
 
+import globalMessages from '../../i18n/globalMessages';
+
 const messages = defineMessages({
   name: {
     id: 'settings.service.form.name',
@@ -83,14 +86,6 @@ const messages = defineMessages({
     id: 'settings.service.form.proxy.password',
     defaultMessage: '!!!Password',
   },
-  spellcheckerLanguage: {
-    id: 'settings.service.form.spellcheckerLanguage',
-    defaultMessage: '!!!Spell checking Language',
-  },
-  spellcheckerSystemDefault: {
-    id: 'settings.service.form.spellcheckerLanguage.default',
-    defaultMessage: '!!!Use System Default ({default})',
-  },
 });
 
 export default @inject('stores', 'actions') @observer class EditServiceScreen extends Component {
@@ -118,12 +113,26 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
   }
 
   prepareForm(recipe, service, proxy) {
+    const {
+      intl,
+    } = this.context;
+
+    const {
+      stores,
+    } = this.props;
+
+    let defaultSpellcheckerLanguage = SPELLCHECKER_LOCALES[stores.settings.app.spellcheckerLanguage];
+
+    if (stores.settings.app.spellcheckerLanguage === 'automatic') {
+      defaultSpellcheckerLanguage = intl.formatMessage(globalMessages.spellcheckerAutomaticDetectionShort);
+    }
+
     const spellcheckerLanguage = getSelectOptions({
       locales: SPELLCHECKER_LOCALES,
-      resetToDefaultText: this.context.intl.formatMessage(messages.spellcheckerSystemDefault, { default: SPELLCHECKER_LOCALES[this.props.stores.settings.app.spellcheckerLanguage] }),
+      resetToDefaultText: intl.formatMessage(globalMessages.spellcheckerSystemDefault, { default: defaultSpellcheckerLanguage }),
+      automaticDetectionText: stores.settings.app.spellcheckerLanguage !== 'automatic' ? intl.formatMessage(globalMessages.spellcheckerAutomaticDetection) : '',
     });
 
-    const { intl } = this.context;
     const config = {
       fields: {
         name: {
@@ -160,13 +169,13 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
         isDarkModeEnabled: {
           label: intl.formatMessage(messages.enableDarkMode),
           value: service.isDarkModeEnabled,
-          default: this.props.stores.settings.app.darkMode,
+          default: stores.settings.app.darkMode,
         },
         spellcheckerLanguage: {
-          label: intl.formatMessage(messages.spellcheckerLanguage),
+          label: intl.formatMessage(globalMessages.spellcheckerLanguage),
           value: service.spellcheckerLanguage,
           options: spellcheckerLanguage,
-          disabled: !this.props.stores.settings.app.enableSpellchecking,
+          disabled: !stores.settings.app.enableSpellchecking,
         },
       },
     };
@@ -220,7 +229,7 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     }
 
     if (proxy.isEnabled) {
-      const serviceProxyConfig = this.props.stores.settings.proxy[service.id] || {};
+      const serviceProxyConfig = stores.settings.proxy[service.id] || {};
 
       Object.assign(config.fields, {
         proxy: {
@@ -326,7 +335,8 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           onSubmit={d => this.onSubmit(d)}
           onDelete={() => this.deleteService()}
           isProxyFeatureEnabled={proxyFeature.isEnabled}
-          isProxyFeaturePremiumFeature={proxyFeature.isPremium}
+          isProxyPremiumFeature={proxyFeature.isPremium}
+          isSpellcheckerPremiumFeature={spellcheckerFeature.isPremium}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index f1706a721..992c49b09 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -14,10 +14,11 @@ import { config as spellcheckerConfig } from '../../features/spellchecker';
 
 import { getSelectOptions } from '../../helpers/i18n-helpers';
 
-
 import EditSettingsForm from '../../components/settings/settings/EditSettingsForm';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
+import globalMessages from '../../i18n/globalMessages';
+
 const messages = defineMessages({
   autoLaunchOnStart: {
     id: 'settings.app.form.autoLaunchOnStart',
@@ -63,10 +64,6 @@ const messages = defineMessages({
     id: 'settings.app.form.enableGPUAcceleration',
     defaultMessage: '!!!Enable GPU Acceleration',
   },
-  spellcheckerLanguage: {
-    id: 'settings.app.form.spellcheckerLanguage',
-    defaultMessage: '!!!Language for spell checking',
-  },
   beta: {
     id: 'settings.app.form.beta',
     defaultMessage: '!!!Include beta versions',
@@ -125,6 +122,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
 
     const spellcheckingLanguages = getSelectOptions({
       locales: SPELLCHECKER_LOCALES,
+      automaticDetectionText: this.context.intl.formatMessage(globalMessages.spellcheckerAutomaticDetection),
     });
 
     const config = {
@@ -166,11 +164,11 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         },
         enableSpellchecking: {
           label: intl.formatMessage(messages.enableSpellchecking),
-          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,
+          value: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremium ? false : settings.all.app.enableSpellchecking,
+          default: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremium ? false : DEFAULT_APP_SETTINGS.enableSpellchecking,
         },
         spellcheckerLanguage: {
-          label: intl.formatMessage(messages.spellcheckerLanguage),
+          label: intl.formatMessage(globalMessages.spellcheckerLanguage),
           value: settings.all.app.spellcheckerLanguage,
           options: spellcheckingLanguages,
           default: DEFAULT_APP_SETTINGS.spellcheckerLanguage,
@@ -230,7 +228,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           cacheSize={cacheSize}
           isClearingAllCache={isClearingAllCache}
           onClearAllCache={clearAllCache}
-          isSpellcheckerPremiumFeature={spellcheckerConfig.isPremiumFeature}
+          isSpellcheckerPremiumFeature={spellcheckerConfig.isPremium}
         />
       </ErrorBoundary>
     );
diff --git a/src/features/spellchecker/index.js b/src/features/spellchecker/index.js
index 63506103c..94883ad17 100644
--- a/src/features/spellchecker/index.js
+++ b/src/features/spellchecker/index.js
@@ -5,7 +5,7 @@ import { DEFAULT_FEATURES_CONFIG } from '../../config';
 const debug = require('debug')('Franz:feature:spellchecker');
 
 export const config = observable({
-  isPremiumFeature: DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature,
+  isPremium: DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature,
 });
 
 export default function init(stores) {
@@ -14,9 +14,11 @@ export default function init(stores) {
   autorun(() => {
     const { isSpellcheckerPremiumFeature } = stores.features.features;
 
-    config.isPremiumFeature = isSpellcheckerPremiumFeature !== undefined ? isSpellcheckerPremiumFeature : DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature;
+    console.log('isSpellcheckerPremiumFeature', isSpellcheckerPremiumFeature);
 
-    if (!stores.user.data.isPremium && config.isPremiumFeature && stores.settings.app.enableSpellchecking) {
+    config.isPremium = isSpellcheckerPremiumFeature !== undefined ? isSpellcheckerPremiumFeature : DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature;
+
+    if (!stores.user.data.isPremium && config.isPremium && stores.settings.app.enableSpellchecking) {
       debug('Override settings.spellcheckerEnabled flag to false');
 
       Object.assign(stores.settings.app, {
diff --git a/src/helpers/i18n-helpers.js b/src/helpers/i18n-helpers.js
index 091b86b06..84146dd8c 100644
--- a/src/helpers/i18n-helpers.js
+++ b/src/helpers/i18n-helpers.js
@@ -28,22 +28,33 @@ export function getLocale({
   return localeStr;
 }
 
-export function getSelectOptions({ locales, resetToDefaultText = '' }) {
-  let options = [];
+export function getSelectOptions({ locales, resetToDefaultText = '', automaticDetectionText = '' }) {
+  const options = [];
 
   if (resetToDefaultText) {
-    options = [
+    options.push(
       {
         value: '',
         label: resetToDefaultText,
-      }, {
-        value: '───',
-        label: '───',
-        disabled: true,
       },
-    ];
+    );
   }
 
+  if (automaticDetectionText) {
+    options.push(
+      {
+        value: 'automatic',
+        label: automaticDetectionText,
+      },
+    );
+  }
+
+  options.push({
+    value: '───',
+    label: '───',
+    disabled: true,
+  });
+
   Object.keys(locales).sort(Intl.Collator().compare).forEach((key) => {
     options.push({
       value: key,
diff --git a/src/i18n/globalMessages.js b/src/i18n/globalMessages.js
index 2c724ff6f..7b1618602 100644
--- a/src/i18n/globalMessages.js
+++ b/src/i18n/globalMessages.js
@@ -13,4 +13,20 @@ export default defineMessages({
     id: 'global.notConnectedToTheInternet',
     defaultMessage: '!!!You are not connected to the internet.',
   },
+  spellcheckerLanguage: {
+    id: 'global.spellchecking.language',
+    defaultMessage: '!!!Spell checking language',
+  },
+  spellcheckerSystemDefault: {
+    id: 'global.spellchecker.useDefault',
+    defaultMessage: '!!!Use System Default ({default})',
+  },
+  spellcheckerAutomaticDetection: {
+    id: 'global.spellchecking.autodetect',
+    defaultMessage: '!!!Detect language automatically',
+  },
+  spellcheckerAutomaticDetectionShort: {
+    id: 'global.spellchecking.autodetect.short',
+    defaultMessage: '!!!Automatic',
+  },
 });
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 99df6a0ca..4e0c5575d 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -1,6 +1,10 @@
 {
   "global.api.unhealthy": "Can't connect to Franz online services",
   "global.notConnectedToTheInternet": "You are not connected to the internet.",
+  "global.spellchecking.language": "Spell checking language",
+  "global.spellchecker.useDefault": "Use System Default ({default})",
+  "global.spellchecking.autodetect": "Detect language automatically",
+  "global.spellchecking.autodetect.short": "Automatic",
   "welcome.signupButton": "Create a free account",
   "welcome.loginButton": "Login to your account",
   "welcome.slogan": "Messaging that works for you",
diff --git a/src/webview/contextMenu.js b/src/webview/contextMenu.js
index 75915851d..afb1d8912 100644
--- a/src/webview/contextMenu.js
+++ b/src/webview/contextMenu.js
@@ -231,21 +231,20 @@ const buildMenuTpl = (props, suggestions, isSpellcheckEnabled, defaultSpellcheck
           ipcRenderer.sendToHost('set-service-spellchecker-language', 'reset');
         },
       },
-      {
-        type: 'separator',
-        visible: defaultSpellcheckerLanguage !== spellcheckerLanguage,
-      },
       {
         id: 'automaticDetection',
         label: 'Automatic language detection',
         type: 'radio',
-        visible: defaultSpellcheckerLanguage !== spellcheckerLanguage,
         checked: spellcheckerLanguage === 'automatic',
         click() {
-          debug('Detect spellchecker language automatically');
+          debug('Detect language automatically');
           ipcRenderer.sendToHost('set-service-spellchecker-language', 'automatic');
         },
       },
+      {
+        type: 'separator',
+        visible: defaultSpellcheckerLanguage !== spellcheckerLanguage,
+      },
       ...spellcheckingLanguages],
   });
 
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index fa107ba1a..1e5d74b1f 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -42,6 +42,8 @@ class RecipeController {
     return this.settings.service.spellcheckerLanguage || this.settings.app.spellcheckerLanguage;
   }
 
+  cldIdentifier = null;
+
   async initialize() {
     Object.keys(this.ipcEvents).forEach((channel) => {
       ipcRenderer.on(channel, (...args) => {
@@ -62,37 +64,6 @@ class RecipeController {
     );
 
     autorun(() => this.update());
-
-    const cldFactory = await loadModule();
-    const identifier = cldFactory.create(0, 1000);
-
-    window.addEventListener('keyup', debounce((e) => {
-      const elem = e.target;
-
-      let value = '';
-      if (elem.isContentEditable) {
-        value = elem.textContent;
-      } else {
-        //
-      }
-
-      // Force a minimum length to get better detection results
-      if (value.length < 40) return;
-
-      debug('Detecting language for', value);
-      const findResult = identifier.findLanguage(value);
-
-      debug('Language detection result', findResult);
-
-      if (findResult.is_reliable) {
-        debug('Language detected reliably, setting spellchecker language to', findResult.language);
-        const spellcheckerLocale = getSpellcheckerLocaleByFuzzyIdentifier(findResult.language);
-        debug('reported back', spellcheckerLocale);
-        if (spellcheckerLocale) {
-          switchDict(spellcheckerLocale);
-        }
-      }
-    }, 200));
   }
 
   loadRecipeModule(event, config, recipe) {
@@ -122,13 +93,20 @@ class RecipeController {
       debug('Setting spellchecker language to', this.spellcheckerLanguage);
       let { spellcheckerLanguage } = this;
       if (spellcheckerLanguage === 'automatic') {
+        this.automaticLanguageDetection();
         debug('Found `automatic` locale, falling back to user locale until detected', this.settings.app.locale);
         spellcheckerLanguage = this.settings.app.locale;
+      } else if (this.cldIdentifier) {
+        this.cldIdentifier.destroy();
       }
       switchDict(spellcheckerLanguage);
     } else {
       debug('Disable spellchecker');
       disableSpellchecker();
+
+      if (this.cldIdentifier) {
+        this.cldIdentifier.destroy();
+      }
     }
 
     if (this.settings.service.isDarkModeEnabled) {
@@ -151,6 +129,42 @@ class RecipeController {
   serviceIdEcho(event) {
     event.sender.send('service-id', this.settings.service.id);
   }
+
+  async automaticLanguageDetection() {
+    const cldFactory = await loadModule();
+    this.cldIdentifier = cldFactory.create(0, 1000);
+
+    window.addEventListener('keyup', debounce((e) => {
+      const element = e.target;
+
+      console.log(element);
+
+      if (!element) return;
+
+      let value = '';
+      if (element.isContentEditable) {
+        value = element.textContent;
+      } else if (element.value) {
+        value = element.value;
+      }
+
+      // Force a minimum length to get better detection results
+      if (value.length < 30) return;
+
+      debug('Detecting language for', value);
+      const findResult = this.cldIdentifier.findLanguage(value);
+
+      debug('Language detection result', findResult);
+
+      if (findResult.is_reliable) {
+        const spellcheckerLocale = getSpellcheckerLocaleByFuzzyIdentifier(findResult.language);
+        debug('Language detected reliably, setting spellchecker language to', spellcheckerLocale);
+        if (spellcheckerLocale) {
+          switchDict(spellcheckerLocale);
+        }
+      }
+    }, 225));
+  }
 }
 
 /* eslint-disable no-new */
-- 
cgit v1.2.3-54-g00ecf