chore(Recipe): Refactor recipe plugin

7 files changed, 208 insertions, 123 deletions

diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 7163209ee..6e56de92f 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -96,7 +96,7 @@ export default @observer class ServiceWebview extends Component {
             ref={(element) => { this.webview = element; }}
             autosize
             src={service.url}
-            preload="./webview/plugin.js"
+            preload="./webview/recipe.js"
             partition={`persist:service-${service.id}`}
             onDidAttach={() => setWebviewReference({
               serviceId: service.id,
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 99b091589..ccb4eed04 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -400,6 +400,18 @@ export default class ServicesStore extends Store {
       const url = args[0];
 
       this.actions.app.openExternalUrl({ url });
+    } else if (channel === 'set-service-spellchecker-language') {
+      if (!args) {
+        console.warn('Did not receive locale');
+      } else {
+        this.actions.service.updateService({
+          serviceId,
+          serviceData: {
+            spellcheckerLanguage: args[0] === 'reset' ? '' : args[0],
+          },
+          redirect: false,
+        });
+      }
     }
   }
 
@@ -625,7 +637,7 @@ export default class ServicesStore extends Store {
     const service = this.one(serviceId);
 
     if (service.webview) {
-      service.webview.send('initializeRecipe', service);
+      service.webview.send('initialize-recipe', service);
     }
   }
 
diff --git a/src/webview/contextMenu.js b/src/webview/contextMenu.js
index ad156128c..f9afa1913 100644
--- a/src/webview/contextMenu.js
+++ b/src/webview/contextMenu.js
@@ -4,6 +4,7 @@
 import { clipboard, remote, ipcRenderer, shell } from 'electron';
 
 import { isDevMode, isMac } from '../environment';
+import { SPELLCHECKER_LOCALES } from '../i18n/languages';
 
 const debug = require('debug')('Franz:contextMenu');
 
@@ -21,7 +22,7 @@ function delUnusedElements(menuTpl) {
   });
 }
 
-const buildMenuTpl = (props, suggestions) => {
+const buildMenuTpl = (props, suggestions, defaultSpellcheckerLanguage, spellcheckerLanguage) => {
   const { editFlags } = props;
   const textSelection = props.selectionText.trim();
   const hasText = textSelection.length > 0;
@@ -190,6 +191,49 @@ const buildMenuTpl = (props, suggestions) => {
     });
   }
 
+  const spellcheckingLanguages = [];
+  Object.keys(SPELLCHECKER_LOCALES).sort(Intl.Collator().compare).forEach((key) => {
+    spellcheckingLanguages.push({
+      id: `lang-${key}`,
+      label: SPELLCHECKER_LOCALES[key],
+      type: 'radio',
+      checked: spellcheckerLanguage === key,
+      click() {
+        debug('Setting service spellchecker to', key);
+        ipcRenderer.sendToHost('set-service-spellchecker-language', key);
+      },
+    });
+  });
+
+  menuTpl.push({
+    type: 'separator',
+  }, {
+    id: 'spellchecker',
+    label: 'Spellchecker',
+    submenu: [
+      {
+        id: 'spellchecker',
+        label: 'Available Languages',
+        enabled: false,
+      }, {
+        type: 'separator',
+      },
+      {
+        id: 'resetToDefault',
+        label: `Reset to system default (${SPELLCHECKER_LOCALES[defaultSpellcheckerLanguage]})`,
+        type: 'radio',
+        click() {
+          debug('Resetting service spellchecker to system default');
+          ipcRenderer.sendToHost('set-service-spellchecker-language', 'reset');
+        },
+      },
+      {
+        type: 'separator',
+      },
+      ...spellcheckingLanguages],
+  });
+
+
   if (isDevMode) {
     menuTpl.push({
       type: 'separator',
@@ -205,7 +249,7 @@ const buildMenuTpl = (props, suggestions) => {
   return delUnusedElements(menuTpl);
 };
 
-export default function contextMenu(spellcheckProvider) {
+export default function contextMenu(spellcheckProvider, getDefaultSpellcheckerLanguage, getSpellcheckerLanguage) {
   webContents.on('context-menu', (e, props) => {
     e.preventDefault();
 
@@ -216,7 +260,14 @@ export default function contextMenu(spellcheckProvider) {
       debug('Suggestions', suggestions);
     }
 
-    const menu = Menu.buildFromTemplate(buildMenuTpl(props, suggestions.slice(0, 5)));
+    const menu = Menu.buildFromTemplate(
+      buildMenuTpl(
+        props,
+        suggestions.slice(0, 5),
+        getDefaultSpellcheckerLanguage(),
+        getSpellcheckerLanguage(),
+      ),
+    );
 
     menu.popup(remote.getCurrentWindow());
   });
diff --git a/src/webview/darkmode.js b/src/webview/darkmode.js
index 9830ef33c..73c7007c6 100644
--- a/src/webview/darkmode.js
+++ b/src/webview/darkmode.js
@@ -1,7 +1,13 @@
+/* eslint no-bitwise: ["error", { "int32Hint": true }] */
+
 import path from 'path';
 import fs from 'fs-extra';
 
-const ID = 'franz-theme-dark-mode';
+const debug = require('debug')('Franz:DarkMode');
+
+const chars = [...'abcdefghijklmnopqrstuvwxyz'];
+
+const ID = [...Array(20)].map(() => chars[Math.random() * chars.length | 0]).join``;
 
 export function injectDarkModeStyle(recipePath) {
   const darkModeStyle = path.join(recipePath, 'darkmode.css');
@@ -12,6 +18,8 @@ export function injectDarkModeStyle(recipePath) {
     styles.innerHTML = data.toString();
 
     document.querySelector('head').appendChild(styles);
+
+    debug('Injected Dark Mode style with ID', ID);
   }
 }
 
@@ -20,6 +28,8 @@ export function removeDarkModeStyle() {
 
   if (style) {
     style.remove();
+
+    debug('Removed Dark Mode Style with ID', ID);
   }
 }
 
diff --git a/src/webview/notifications.js b/src/webview/notifications.js
index 2020bbdc6..f8fe53e1b 100644
--- a/src/webview/notifications.js
+++ b/src/webview/notifications.js
@@ -1,10 +1,13 @@
-const { ipcRenderer } = require('electron');
-const uuidV1 = require('uuid/v1');
+import { ipcRenderer } from 'electron';
+import uuidV1 from 'uuid/v1';
+
+const debug = require('debug')('Franz:Notifications');
 
 class Notification {
   static permission = 'granted';
 
   constructor(title = '', options = {}) {
+    debug('New notification', title, options);
     this.title = title;
     this.options = options;
     this.notificationId = uuidV1();
diff --git a/src/webview/plugin.js b/src/webview/plugin.js
deleted file mode 100644
index 6d4e65062..000000000
--- a/src/webview/plugin.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import { ipcRenderer } from 'electron';
-import path from 'path';
-import { observable } from 'mobx';
-
-import RecipeWebview from './lib/RecipeWebview';
-
-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');
-
-window.franzSettings = {};
-let serviceData;
-let overrideSpellcheckerLanguage = false;
-
-
-ipcRenderer.on('initializeRecipe', (e, data) => {
-  const modulePath = path.join(data.recipe.path, 'webview.js');
-  // Delete module from cache
-  delete require.cache[require.resolve(modulePath)];
-  try {
-    // eslint-disable-next-line
-    require(modulePath)(new RecipeWebview(), data);
-    debug('Initialize Recipe', data);
-
-    serviceData = data;
-
-    if (data.isDarkModeEnabled) {
-      injectDarkModeStyle(data.recipe.path);
-      debug('Add dark theme styles');
-    }
-
-    if (data.spellcheckerLanguage) {
-      debug('Overriding spellchecker language to', data.spellcheckerLanguage);
-      switchDict(data.spellcheckerLanguage);
-
-      overrideSpellcheckerLanguage = true;
-    }
-  } catch (err) {
-    debug('Recipe initialization failed', err);
-  }
-});
-
-// Needs to run asap to intialize dictionaries
-(async () => {
-  const spellcheckingProvider = await spellchecker();
-  contextMenu(spellcheckingProvider);
-})();
-
-ipcRenderer.on('settings-update', async (e, data) => {
-  debug('Settings update received', data);
-
-  if (!data.enableSpellchecking) {
-    disableSpellchecker();
-  } else if (!overrideSpellcheckerLanguage) {
-    debug('Setting spellchecker language based on app settings to', data.spellcheckerLanguage);
-    switchDict(data.spellcheckerLanguage);
-  }
-
-  window.franzSettings = data;
-});
-
-ipcRenderer.on('service-settings-update', (e, data) => {
-  debug('Service settings update received', data);
-
-  serviceData = data;
-
-  if (data.isDarkModeEnabled && !isDarkModeStyleInjected()) {
-    injectDarkModeStyle(serviceData.recipe.path);
-
-    debug('Enable service dark mode');
-  } else if (!data.isDarkModeEnabled && isDarkModeStyleInjected()) {
-    removeDarkModeStyle();
-
-    debug('Disable service dark mode');
-  }
-
-  if (data.spellcheckerLanguage) {
-    debug('Overriding spellchecker language to', data.spellcheckerLanguage);
-    switchDict(data.spellcheckerLanguage);
-
-    overrideSpellcheckerLanguage = true;
-  } else {
-    debug('Going back to default spellchecker language to', window.franzSettings.spellcheckerLanguage);
-    switchDict(window.franzSettings.spellcheckerLanguage);
-
-    overrideSpellcheckerLanguage = false;
-  }
-});
-
-// Needed for current implementation of electrons 'login' event 🤦‍
-ipcRenderer.on('get-service-id', (event) => {
-  debug('Asking for service id', event);
-
-  event.sender.send('service-id', serviceData.id);
-});
-
-
-document.addEventListener('DOMContentLoaded', () => {
-  ipcRenderer.sendToHost('hello');
-}, false);
-
-// Patching window.open
-const originalWindowOpen = window.open;
-
-window.open = (url, frameName, features) => {
-  // We need to differentiate if the link should be opened in a popup or in the systems default browser
-  if (!frameName && !features) {
-    return ipcRenderer.sendToHost('new-window', url);
-  }
-
-  return originalWindowOpen(url, frameName, features);
-};
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
new file mode 100644
index 000000000..a2c157af8
--- /dev/null
+++ b/src/webview/recipe.js
@@ -0,0 +1,124 @@
+import { ipcRenderer } from 'electron';
+import path from 'path';
+import { autorun, computed, observable } from 'mobx';
+
+import RecipeWebview from './lib/RecipeWebview';
+
+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');
+
+class RecipeController {
+  @observable settings = {
+    overrideSpellcheckerLanguage: false,
+    app: {},
+    service: {},
+  };
+
+  spellcheckProvider = null;
+
+  ipcEvents = {
+    'initialize-recipe': 'loadRecipeModule',
+    'settings-update': 'updateAppSettings',
+    'service-settings-update': 'updateServiceSettings',
+    'get-service-id': 'serviceIdEcho',
+  }
+
+  constructor() {
+    this.initialize();
+  }
+
+  @computed get spellcheckerLanguage() {
+    return this.settings.service.spellcheckerLanguage || this.settings.app.spellcheckerLanguage;
+  }
+
+  async initialize() {
+    Object.keys(this.ipcEvents).forEach((channel) => {
+      ipcRenderer.on(channel, (event, data) => {
+        debug('Received IPC event for channel', channel, 'with', data);
+        this[this.ipcEvents[channel]](event, data);
+      });
+    });
+
+    debug('Send "hello" to host');
+    setTimeout(() => ipcRenderer.sendToHost('hello'), 100);
+
+    this.spellcheckingProvider = await spellchecker();
+    contextMenu(
+      this.spellcheckingProvider,
+      () => this.settings.app.spellcheckerLanguage,
+      () => this.spellcheckerLanguage);
+
+    autorun(() => this.update());
+  }
+
+  loadRecipeModule(event, data) {
+    debug('loadRecipeModule');
+    const modulePath = path.join(data.recipe.path, 'webview.js');
+    // Delete module from cache
+    delete require.cache[require.resolve(modulePath)];
+    try {
+      // eslint-disable-next-line
+      require(modulePath)(new RecipeWebview(), data);
+      debug('Initialize Recipe', data);
+
+      this.settings.service = data;
+    } catch (err) {
+      console.error('Recipe initialization failed', err);
+    }
+  }
+
+  update() {
+    debug('enableSpellchecking', this.settings.app.enableSpellchecking);
+    debug('isDarkModeEnabled', this.settings.service.isDarkModeEnabled);
+    debug('System spellcheckerLanguage', this.settings.app.spellcheckerLanguage);
+    debug('Service spellcheckerLanguage', this.settings.service.spellcheckerLanguage);
+
+    if (this.settings.app.enableSpellchecking) {
+      debug('Setting spellchecker language to', this.spellcheckerLanguage);
+      switchDict(this.spellcheckerLanguage);
+    } else {
+      disableSpellchecker();
+    }
+
+    console.log(this.settings.service);
+    if (this.settings.service.isDarkModeEnabled) {
+      debug('Enable dark mode');
+      injectDarkModeStyle(this.settings.service.recipe.path);
+    } else if (isDarkModeStyleInjected()) {
+      debug('Remove dark mode');
+      removeDarkModeStyle();
+    }
+  }
+
+  updateAppSettings(event, data) {
+    this.settings.app = Object.assign(this.settings.app, data);
+  }
+
+  updateServiceSettings(event, data) {
+    this.settings.service = Object.assign(this.settings.service, data);
+  }
+
+  serviceIdEcho(event) {
+    event.sender.send('service-id', this.settings.service.id);
+  }
+}
+
+/* eslint-disable no-new */
+new RecipeController();
+/* eslint-enable no-new */
+
+// Patching window.open
+const originalWindowOpen = window.open;
+
+window.open = (url, frameName, features) => {
+  // We need to differentiate if the link should be opened in a popup or in the systems default browser
+  if (!frameName && !features) {
+    return ipcRenderer.sendToHost('new-window', url);
+  }
+
+  return originalWindowOpen(url, frameName, features);
+};