5 files changed, 88 insertions, 32 deletions

diff --git a/src/webview/ime.js b/src/webview/ime.js
deleted file mode 100644
index 43df6267c..000000000
--- a/src/webview/ime.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const { ipcRenderer } = require('electron');
-const { claimDocumentFocus } = require('../helpers/webview-ime-focus-helpers');
-
-ipcRenderer.on('claim-document-focus', claimDocumentFocus);
-
-window.addEventListener('DOMContentLoaded', () => {
-  if (document.querySelector('[autofocus]')) {
-    ipcRenderer.sendToHost('autofocus');
-  }
-});
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index b8acc1258..be29142af 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -40,8 +40,8 @@ class RecipeWebview {
       && this.countCache.indirect === indirect) return;
 
     const count = {
-      direct,
-      indirect,
+      direct: direct > 0 ? direct : 0,
+      indirect: indirect > 0 ? indirect : 0,
     };
 
     ipcRenderer.sendToHost('messages', count);
@@ -66,7 +66,7 @@ class RecipeWebview {
 
   onNotify(fn) {
     if (typeof fn === 'function') {
-      window.Notification.onNotify = fn;
+      window.Notification.prototype.onNotify = fn;
     }
   }
 
diff --git a/src/webview/notifications.js b/src/webview/notifications.js
index 4055b10de..4f602bfdb 100644
--- a/src/webview/notifications.js
+++ b/src/webview/notifications.js
@@ -10,9 +10,9 @@ class Notification {
     this.notificationId = uuidV1();
 
     ipcRenderer.sendToHost('notification', this.onNotify({
+      title: this.title,
+      options: this.options,
       notificationId: this.notificationId,
-      title,
-      options,
     }));
 
     ipcRenderer.once(`notification-onclick:${this.notificationId}`, () => {
diff --git a/src/webview/plugin.js b/src/webview/plugin.js
index ffc9084e4..9903ee07a 100644
--- a/src/webview/plugin.js
+++ b/src/webview/plugin.js
@@ -1,11 +1,12 @@
-const { ipcRenderer } = require('electron');
-const path = require('path');
+import { ipcRenderer } from 'electron';
+import { ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
+import path from 'path';
 
-const RecipeWebview = require('./lib/RecipeWebview');
+import { isDevMode } from '../environment';
+import RecipeWebview from './lib/RecipeWebview';
 
-require('./notifications.js');
-require('./spellchecker.js');
-require('./ime.js');
+import Spellchecker from './spellchecker.js';
+import './notifications.js';
 
 ipcRenderer.on('initializeRecipe', (e, data) => {
   const modulePath = path.join(data.recipe.path, 'webview.js');
@@ -19,6 +20,22 @@ ipcRenderer.on('initializeRecipe', (e, data) => {
   }
 });
 
+const spellchecker = new Spellchecker();
+spellchecker.initialize();
+
+const contextMenuBuilder = new ContextMenuBuilder(spellchecker.handler, null, isDevMode);
+
+new ContextMenuListener((info) => { // eslint-disable-line
+  contextMenuBuilder.showPopupMenu(info);
+});
+
+ipcRenderer.on('settings-update', (e, data) => {
+  console.log('settings-update', data);
+  spellchecker.toggleSpellchecker(data.enableSpellchecking);
+});
+
+// initSpellche
+
 document.addEventListener('DOMContentLoaded', () => {
   ipcRenderer.sendToHost('hello');
 }, false);
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index ec8807874..a504a4039 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,14 +1,63 @@
-import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
+import { SpellCheckHandler } from 'electron-spellchecker';
 
-window.spellCheckHandler = new SpellCheckHandler();
-setTimeout(() => {
-  window.spellCheckHandler.attachToInput();
-}, 1000);
+import { isMac } from '../environment';
 
-// TODO: should we set the language to user settings?
-// window.spellCheckHandler.switchLanguage('en-US');
+export default class Spellchecker {
+  isInitialized = false;
+  handler = null;
+  initRetries = 0;
+  DOMCheckInterval = null;
+
+  get inputs() {
+    return document.querySelectorAll('input[type="text"], [contenteditable="true"], textarea');
+  }
+
+  initialize() {
+    this.handler = new SpellCheckHandler();
+
+    if (!isMac) {
+      this.attach();
+    } else {
+      this.isInitialized = true;
+    }
+  }
+
+  attach() {
+    let initFailed = false;
+
+    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 (!initFailed) {
+      this.isInitialized = true;
+    }
+  }
+
+  toggleSpellchecker(enable = false) {
+    this.inputs.forEach((input) => {
+      input.setAttribute('spellcheck', enable);
+    });
+
+    this.intervalHandler(enable);
+  }
+
+  intervalHandler(enable) {
+    clearInterval(this.DOMCheckInterval);
+
+    if (enable) {
+      this.DOMCheckInterval = setInterval(() => this.toggleSpellchecker(enable), 30000);
+    }
+  }
+}
 
-const contextMenuBuilder = new ContextMenuBuilder(window.spellCheckHandler);
-const contextMenuListener = new ContextMenuListener((info) => { // eslint-disable-line
-  contextMenuBuilder.showPopupMenu(info);
-});