Merge pull request #277 from yuya-oc/simple-spellchecker

Add spellchecker

Close #225

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

@@ -2,7 +2,7 @@ const React = require('react');
 const {findDOMNode} = require('react-dom');
 const {ipcRenderer, remote, shell} = require('electron');
 const url = require('url');
-const electronContextMenu = require('electron-context-menu');
+const contextMenu = require('../js/contextMenu');
 
 const ErrorView = require('./ErrorView.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,8 +81,14 @@ const MattermostView = React.createClass({
       // webview.openDevTools();
 
       if (!this.state.isContextMenuAdded) {
-        electronContextMenu({
-          window: 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

@@ -112,7 +112,9 @@ const SettingsPage = React.createClass({
       notifications: {
         flashWindow: this.state.notifications.flashWindow
       },
-      showUnreadBadge: this.state.showUnreadBadge
+      showUnreadBadge: this.state.showUnreadBadge,
+      useSpellChecker: this.state.useSpellChecker,
+      spellCheckerLocale: this.state.spellCheckerLocale
     };
 
     settings.writeFile(this.props.configFile, config, (err) => {
@@ -209,6 +211,13 @@ const SettingsPage = React.createClass({
     setImmediate(this.startSaveConfig);
   },
 
+  handleChangeUseSpellChecker() {
+    this.setState({
+      useSpellChecker: !this.refs.useSpellChecker.props.checked
+    });
+    setImmediate(this.startSaveConfig);
+  },
+
   updateTeam(index, newData) {
     var teams = this.state.teams;
     teams[index] = newData;
@@ -265,6 +274,21 @@ const SettingsPage = React.createClass({
         </Checkbox>);
     }
 
+    options.push(
+      <Checkbox
+        key='inputSpellChecker'
+        id='inputSpellChecker'
+        ref='useSpellChecker'
+        checked={this.state.useSpellChecker}
+        onChange={this.handleChangeUseSpellChecker}
+      >
+        {'Check spelling'}
+        <HelpBlock>
+          {'Highlight misspelled words in your messages.'}
+          {' Available for English, French, German, Spanish, and Dutch.'}
+        </HelpBlock>
+      </Checkbox>);
+
     if (process.platform === 'darwin' || process.platform === 'win32') {
       const TASKBAR = process.platform === 'win32' ? 'taskbar' : 'Dock';
       options.push(

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

@@ -0,0 +1,67 @@
+const {ipcRenderer} = require('electron');
+const electronContextMenu = require('electron-context-menu');
+
+function getSuggestionsMenus(win, suggestions) {
+  if (suggestions.length === 0) {
+    return [{
+      label: 'No Suggestions',
+      enabled: false
+    }];
+  }
+  return suggestions.map((s) => ({
+    label: s,
+    click() {
+      (win.webContents || win.getWebContents()).replaceMisspelling(s);
+    }
+  }));
+}
+
+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, options) {
+    const defaultOptions = {
+      useSpellChecker: false,
+      onSelectSpellCheckerLocale: null
+    };
+    const actualOptions = Object.assign({}, defaultOptions, options);
+    electronContextMenu({
+      window: win,
+      prepend(params) {
+        if (actualOptions.useSpellChecker) {
+          const prependMenuItems = [];
+          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/settings.jsx

@@ -9,12 +9,11 @@ const {remote} = require('electron');
 const React = require('react');
 const ReactDOM = require('react-dom');
 const SettingsPage = require('./components/SettingsPage.jsx');
+const contextMenu = require('./js/contextMenu');
 
 const configFile = remote.app.getPath('userData') + '/config.json';
 
-require('electron-context-menu')({
-  window: remote.getCurrentWindow()
-});
+contextMenu.setup(remote.getCurrentWindow());
 
 ReactDOM.render(
   <SettingsPage configFile={configFile}/>,

src/browser/webview/mattermost.js

@@ -2,6 +2,7 @@
 
 const electron = require('electron');
 const ipc = electron.ipcRenderer;
+const webFrame = electron.webFrame;
 const notification = require('../js/notification');
 
 Reflect.deleteProperty(global.Buffer); // http://electron.atom.io/docs/tutorial/security/#buffer-global
@@ -146,3 +147,15 @@ notification.override({
     ipc.sendToHost('onNotificationClick');
   }
 });
+
+function setSpellChecker() {
+  const spellCheckerLocale = ipc.sendSync('get-spellchecker-locale');
+  webFrame.setSpellCheckProvider(spellCheckerLocale, false, {
+    spellCheck(text) {
+      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;
@@ -23,7 +23,9 @@ function loadDefault(version) {
       notifications: {
         flashWindow: 0 // 0 = flash never, 1 = only when idle (after 10 seconds), 2 = always
       },
-      showUnreadBadge: true
+      showUnreadBadge: true,
+      useSpellChecker: false,
+      spellCheckerLocale: spellCheckerLocale || 'en-US'
     };
   default:
     return {};

src/main.js

@@ -63,11 +63,14 @@ const appMenu = require('./main/menus/app');
 const trayMenu = require('./main/menus/tray');
 const allowProtocolDialog = require('./main/allowProtocolDialog');
 
+const SpellChecker = require('./main/SpellChecker');
+
 const assetsDir = path.resolve(app.getAppPath(), 'assets');
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 var mainWindow = null;
+let spellChecker = null;
 
 var argv = require('yargs').parse(process.argv.slice(1));
 
@@ -99,6 +102,7 @@ try {
 ipcMain.on('update-config', () => {
   const configFile = app.getPath('userData') + '/config.json';
   config = settings.readFileSync(configFile);
+  ipcMain.emit('update-dict', true, config.spellCheckerLocale);
 });
 
 // Only for OS X
@@ -496,6 +500,37 @@ app.on('ready', () => {
   });
   ipcMain.emit('update-menu', true, config);
 
+  ipcMain.on('update-dict', () => {
+    if (config.useSpellChecker) {
+      spellChecker = new SpellChecker(
+      config.spellCheckerLocale,
+      path.resolve(app.getAppPath(), 'node_modules/simple-spellchecker/dict'),
+      (err) => {
+        if (err) {
+          console.error(err);
+        }
+      });
+    }
+  });
+  ipcMain.on('checkspell', (event, word) => {
+    let res = null;
+    if (config.useSpellChecker && spellChecker.isReady() && word !== null) {
+      res = spellChecker.spellCheck(word);
+    }
+    event.returnValue = res;
+  });
+  ipcMain.on('get-spelling-suggestions', (event, word) => {
+    if (config.useSpellChecker && spellChecker.isReady() && word !== null) {
+      event.returnValue = spellChecker.getSuggestions(word, 10);
+    } else {
+      event.returnValue = [];
+    }
+  });
+  ipcMain.on('get-spellchecker-locale', (event) => {
+    event.returnValue = config.spellCheckerLocale;
+  });
+  ipcMain.emit('update-dict');
+
   // Open the DevTools.
   // mainWindow.openDevTools();
 });

src/main/SpellChecker.js

@@ -0,0 +1,88 @@
+'use strict';
+
+const simpleSpellChecker = require('simple-spellchecker');
+
+/// Following approach for contractions is derived from electron-spellchecker.
+
+// NB: This is to work around electron/electron#1005, where contractions
+// are incorrectly marked as spelling errors. This lets people get away with
+// incorrectly spelled contracted words, but it's the best we can do for now.
+const contractions = [
+  "ain't", "aren't", "can't", "could've", "couldn't", "couldn't've", "didn't", "doesn't", "don't", "hadn't",
+  "hadn't've", "hasn't", "haven't", "he'd", "he'd've", "he'll", "he's", "how'd", "how'll", "how's", "I'd",
+  "I'd've", "I'll", "I'm", "I've", "isn't", "it'd", "it'd've", "it'll", "it's", "let's", "ma'am", "mightn't",
+  "mightn't've", "might've", "mustn't", "must've", "needn't", "not've", "o'clock", "shan't", "she'd", "she'd've",
+  "she'll", "she's", "should've", "shouldn't", "shouldn't've", "that'll", "that's", "there'd", "there'd've",
+  "there're", "there's", "they'd", "they'd've", "they'll", "they're", "they've", "wasn't", "we'd", "we'd've",
+  "we'll", "we're", "we've", "weren't", "what'll", "what're", "what's", "what've", "when's", "where'd",
+  "where's", "where've", "who'd", "who'll", "who're", "who's", "who've", "why'll", "why're", "why's", "won't",
+  "would've", "wouldn't", "wouldn't've", "y'all", "y'all'd've", "you'd", "you'd've", "you'll", "you're", "you've"
+];
+
+const contractionMap = contractions.reduce((acc, word) => {
+  acc[word.replace(/'.*/, '')] = true;
+  return acc;
+}, {});
+
+/// End: derived from electron-spellchecker.
+
+class SpellChecker {
+  constructor(locale, dictDir, callback) {
+    this.dict = null;
+    this.locale = locale;
+    simpleSpellChecker.getDictionary(locale, dictDir, (err, dict) => {
+      if (err) {
+        if (callback) {
+          callback(err);
+        }
+      } else {
+        this.dict = dict;
+        if (callback) {
+          callback(null, this);
+        }
+      }
+    });
+  }
+
+  isReady() {
+    return this.dict !== null;
+  }
+
+  spellCheck(word) {
+    if (word.toLowerCase() === 'mattermost') {
+      return true;
+    }
+    if (isFinite(word)) { // Numerals are not included in the dictionary
+      return true;
+    }
+    if (this.locale.match(/^en-?/) && contractionMap[word]) {
+      return true;
+    }
+    return this.dict.spellCheck(word);
+  }
+
+  getSuggestions(word, maxSuggestions) {
+    return this.dict.getSuggestions(word, maxSuggestions);
+  }
+}
+
+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;

src/package.json

@@ -22,6 +22,7 @@
     "react-addons-css-transition-group": "^15.4.2",
     "react-bootstrap": "~0.30.7",
     "react-dom": "^15.4.2",
+    "simple-spellchecker": "git://github.com/jfmdev/simple-spellchecker.git#723062952a0290c6285aeaf02f14d9c74c41cadb",
     "underscore": "^1.8.3",
     "yargs": "^3.32.0"
   }