Add context menu to select spelling language

src/browser/components/MainPage.jsx

@@ -39,7 +39,9 @@ const MainPage = React.createClass({
     onUnreadCountChange: React.PropTypes.func.isRequired,
     teams: React.PropTypes.array.isRequired,
     onTeamConfigChange: React.PropTypes.func.isRequired,
-    initialIndex: React.PropTypes.number.isRequired
+    initialIndex: React.PropTypes.number.isRequired,
+    useSpellChecker: React.PropTypes.bool.isRequired,
+    onSelectSpellCheckerLocale: React.PropTypes.func.isRequired
   },
 
   getInitialState() {
@@ -264,6 +266,8 @@ const MainPage = React.createClass({
           key={id}
           id={id}
           withTab={this.props.teams.length > 1}
+          useSpellChecker={this.props.useSpellChecker}
+          onSelectSpellCheckerLocale={this.props.onSelectSpellCheckerLocale}
           src={team.url}
           name={team.name}
           onTargetURLChange={self.handleTargetURLChange}

src/browser/components/MattermostView.jsx

@@ -16,7 +16,9 @@ const MattermostView = React.createClass({
     onUnreadCountChange: React.PropTypes.func,
     src: React.PropTypes.string,
     active: React.PropTypes.bool,
-    withTab: React.PropTypes.bool
+    withTab: React.PropTypes.bool,
+    useSpellChecker: React.PropTypes.bool,
+    onSelectSpellCheckerLocale: React.PropTypes.func
   },
 
   getInitialState() {
@@ -79,7 +81,15 @@ const MattermostView = React.createClass({
       // webview.openDevTools();
 
       if (!this.state.isContextMenuAdded) {
-        contextMenu.setup(webview);
+        contextMenu.setup(webview, {
+          useSpellChecker: this.props.useSpellChecker,
+          onSelectSpellCheckerLocale: (locale) => {
+            if (this.props.onSelectSpellCheckerLocale) {
+              this.props.onSelectSpellCheckerLocale(locale);
+            }
+            webview.send('set-spellcheker');
+          }
+        });
         this.setState({isContextMenuAdded: true});
       }
     });

src/browser/components/SettingsPage.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
-const {Button, Checkbox, Col, FormControl, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} = require('react-bootstrap');
+const {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} = require('react-bootstrap');
 
 const {ipcRenderer, remote} = require('electron');
 const AutoLaunch = require('auto-launch');
@@ -218,13 +218,6 @@ const SettingsPage = React.createClass({
     setImmediate(this.startSaveConfig);
   },
 
-  handleChangeSpellCheckerLocale(event) {
-    this.setState({
-      spellCheckerLocale: event.target.value
-    });
-    setImmediate(this.startSaveConfig);
-  },
-
   updateTeam(index, newData) {
     var teams = this.state.teams;
     teams[index] = newData;
@@ -294,19 +287,6 @@ const SettingsPage = React.createClass({
           {'Highlight misspelled words in your messages.'}
           {' Available for English, French, German, Spanish, and Dutch.'}
         </HelpBlock>
-        <FormControl
-          id='selectSpellCheckerLocale'
-          componentClass='select'
-          value={this.state.spellCheckerLocale}
-          onChange={this.handleChangeSpellCheckerLocale}
-          disabled={!this.state.useSpellChecker}
-        >
-          <option value='en-US'>{'English'}</option>
-          <option value='fr-FR'>{'French'}</option>
-          <option value='de-DE'>{'German'}</option>
-          <option value='es-ES'>{'Spanish'}</option>
-          <option value='nl-NL'>{'Dutch'}</option>
-        </FormControl>
       </Checkbox>);
 
     if (process.platform === 'darwin' || process.platform === 'win32') {

src/browser/index.jsx

@@ -90,6 +90,13 @@ function teamConfigChange(teams) {
   ipcRenderer.send('update-config');
 }
 
+function handleSelectSpellCheckerLocale(locale) {
+  console.log(locale);
+  AppConfig.set('spellCheckerLocale', locale);
+  ipcRenderer.send('update-config');
+  ipcRenderer.send('update-dict');
+}
+
 const parsedURL = url.parse(window.location.href, true);
 const initialIndex = parsedURL.query.index ? parseInt(parsedURL.query.index, 10) : 0;
 
@@ -99,6 +106,8 @@ ReactDOM.render(
     initialIndex={initialIndex}
     onUnreadCountChange={showUnreadBadge}
     onTeamConfigChange={teamConfigChange}
+    useSpellChecker={AppConfig.data.useSpellChecker}
+    onSelectSpellCheckerLocale={handleSelectSpellCheckerLocale}
   />,
   document.getElementById('content')
 );

src/browser/js/contextMenu.js

@@ -10,14 +10,49 @@ function getSuggestionsMenus(win, suggestions) {
   }));
 }
 
+function getSpellCheckerLocaleMenus(onSelectSpellCheckerLocale) {
+  const currentLocale = ipcRenderer.sendSync('get-spellchecker-locale');
+  const locales = [
+    {language: 'English', locale: 'en-US'},
+    {language: 'French', locale: 'fr-FR'},
+    {language: 'German', locale: 'de-DE'},
+    {language: 'Spanish', locale: 'es-ES'},
+    {language: 'Dutch', locale: 'nl-NL'}
+  ];
+  return locales.map((l) => ({
+    label: l.language,
+    type: 'checkbox',
+    checked: l.locale === currentLocale,
+    click() {
+      if (onSelectSpellCheckerLocale) {
+        onSelectSpellCheckerLocale(l.locale);
+      }
+    }
+  }));
+}
+
 module.exports = {
-  setup(win) {
+  setup(win, options) {
+    const defaultOptions = {
+      useSpellChecker: false,
+      onSelectSpellCheckerLocale: null
+    };
+    const actualOptions = Object.assign({}, defaultOptions, options);
     electronContextMenu({
       window: win,
       prepend(params) {
-        if (params.isEditable && params.misspelledWord !== '') {
+        if (actualOptions.useSpellChecker) {
-          const suggestions = ipcRenderer.sendSync('get-spelling-suggestions', params.misspelledWord);
+          const prependMenuItems = [];
-          return getSuggestionsMenus(win, suggestions);
+          if (params.isEditable && params.misspelledWord !== '') {
+            const suggestions = ipcRenderer.sendSync('get-spelling-suggestions', params.misspelledWord);
+            prependMenuItems.push(...getSuggestionsMenus(win, suggestions));
+          }
+          if (params.isEditable) {
+            prependMenuItems.push(
+              {type: 'separator'},
+              {label: 'Spelling Languages', submenu: getSpellCheckerLocaleMenus(actualOptions.onSelectSpellCheckerLocale)});
+          }
+          return prependMenuItems;
         }
         return [];
       }

src/browser/webview/mattermost.js

@@ -148,10 +148,14 @@ notification.override({
   }
 });
 
-const spellCheckerLocale = ipc.sendSync('get-spellchecker-locale');
+function setSpellChecker() {
-webFrame.setSpellCheckProvider(spellCheckerLocale, false, {
+  const spellCheckerLocale = ipc.sendSync('get-spellchecker-locale');
-  spellCheck(text) {
+  webFrame.setSpellCheckProvider(spellCheckerLocale, false, {
-    const res = ipc.sendSync('checkspell', text);
+    spellCheck(text) {
-    return res === null ? true : res;
+      const res = ipc.sendSync('checkspell', text);
-  }
+      return res === null ? true : res;
-});
+    }
+  });
+}
+setSpellChecker();
+ipc.on('set-spellcheker', setSpellChecker);

src/common/settings.js

@@ -7,7 +7,7 @@ function merge(base, target) {
   return Object.assign({}, base, target);
 }
 
-function loadDefault(version) {
+function loadDefault(version, spellCheckerLocale) {
   var ver = version;
   if (version == null) {
     ver = settingsVersion;
@@ -25,7 +25,7 @@ function loadDefault(version) {
       },
       showUnreadBadge: true,
       useSpellChecker: false,
-      spellCheckerLocale: 'en-US'
+      spellCheckerLocale: spellCheckerLocale || 'en-US'
     };
   default:
     return {};

src/main.js

@@ -451,10 +451,10 @@ app.on('ready', () => {
   });
   ipcMain.emit('update-menu', true, config);
 
-  ipcMain.on('update-dict', (event, locale) => {
+  ipcMain.on('update-dict', () => {
     if (config.useSpellChecker) {
       spellChecker = new SpellChecker(
-      locale,
+      config.spellCheckerLocale,
       path.resolve(app.getAppPath(), 'node_modules/simple-spellchecker/dict'),
       (err) => {
         if (err) {
@@ -480,7 +480,7 @@ app.on('ready', () => {
   ipcMain.on('get-spellchecker-locale', (event) => {
     event.returnValue = config.spellCheckerLocale;
   });
-  ipcMain.emit('update-dict', true, config.spellCheckerLocale);
+  ipcMain.emit('update-dict');
 
   // Open the DevTools.
   // mainWindow.openDevTools();

src/main/SpellChecker.js

@@ -66,4 +66,23 @@ class SpellChecker {
   }
 }
 
+SpellChecker.getSpellCheckerLocale = (electronLocale) => {
+  if (electronLocale.match(/^en-?/)) {
+    return 'en-US';
+  }
+  if (electronLocale.match(/^fr-?/)) {
+    return 'fr-FR';
+  }
+  if (electronLocale.match(/^de-?/)) {
+    return 'de-DE';
+  }
+  if (electronLocale.match(/^es-?/)) {
+    return 'es-ES';
+  }
+  if (electronLocale.match(/^nl-?/)) {
+    return 'nl-NL';
+  }
+  return 'en-US';
+};
+
 module.exports = SpellChecker;

test/specs/browser/settings_test.js

@@ -206,15 +206,13 @@ describe('browser/settings.html', function desc() {
         env.addClientCommands(this.app.client);
         return this.app.client.
           loadSettingsPage().
-          isExisting('#selectSpellCheckerLocale').then((existing) => existing.should.equal(true)).
+          isExisting('#inputSpellChecker').then((existing) => existing.should.equal(true)).
-          scroll('#selectSpellCheckerLocale').
+          scroll('#inputSpellChecker').
           click('#inputSpellChecker').
-          element('#selectSpellCheckerLocale').selectByVisibleText('French').
           pause(700).
           then(() => {
             const config1 = JSON.parse(fs.readFileSync(env.configFilePath, 'utf-8'));
             config1.useSpellChecker.should.equal(true);
-            config1.spellCheckerLocale.should.equal('fr-FR');
           });
       });
     });