feat(App): Improved spell checker & context menu

3 files changed, 260 insertions, 55 deletions

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;
+  }
+}