4 files changed, 125 insertions, 343 deletions

diff --git a/src/webview/contextMenu.js b/src/webview/contextMenu.js
index acd62d675..eeb825ece 100644
--- a/src/webview/contextMenu.js
+++ b/src/webview/contextMenu.js
@@ -1,323 +1,50 @@
-// This is heavily based on https://github.com/sindresorhus/electron-context-menu
-// ❤ @sindresorhus
+import { remote } from 'electron';
+import { ContextMenuBuilder, ContextMenuListener } from 'electron-spellchecker';
 
-import {
-  clipboard, remote, ipcRenderer, shell,
-} from 'electron';
-
-import { isDevMode, isMac } from '../environment';
-import { SPELLCHECKER_LOCALES } from '../i18n/languages';
-
-const debug = require('debug')('Ferdi: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, isSpellcheckEnabled, defaultSpellcheckerLanguage, spellcheckerLanguage) => {
-  const { editFlags } = props;
-  const textSelection = props.selectionText.trim();
-  const hasText = textSelection.length > 0;
-  const can = type => editFlags[`can${type}`] && hasText;
-
-  const canGoBack = webContents.canGoBack();
-  const canGoForward = webContents.canGoForward();
+export default async function setupContextMenu(handler) {
+  const addCustomMenuItems = (menu, menuInfo) => {
+    // Add "Paste as plain text" item when right-clicking editable content
+    if (
+      menuInfo.editFlags.canPaste
+      && !menuInfo.linkText
+      && !menuInfo.hasImageContents
+    ) {
+      menu.insert(
+        3,
+        new remote.MenuItem({
+          label: 'Paste as plain text',
+          accelerator: 'CommandOrControl+Shift+V',
+          click: () => webContents.pasteAndMatchStyle(),
+        }),
+      );
+    }
 
-  // @adlk: we can't use roles here due to a bug with electron where electron.remote.webContents.getFocusedWebContents() returns the first webview in DOM instead of the focused one
-  // Github issue creation is pending
-  let menuTpl = [
-    {
-      type: 'separator',
-    }, {
-      id: 'createTodo',
-      label: `Create todo: "${textSelection.length > 15 ? `${textSelection.slice(0, 15)}...` : textSelection}"`,
-      visible: hasText,
-      click() {
-        debug('Create todo from selected text', textSelection);
-        ipcRenderer.sendToHost('feature:todos', {
-          action: 'todos:create',
-          data: {
-            title: textSelection,
-            url: window.location.href,
+    // Add "Open Link in Ferdi" item for links
+    if (menuInfo.linkURL) {
+      menu.insert(
+        2,
+        new remote.MenuItem({
+          label: 'Open Link in Ferdi',
+          click: () => {
+            window.location.href = menuInfo.linkURL;
           },
-        });
-      },
-    },
-    {
-      type: 'separator',
-    }, {
-      id: 'lookup',
-      label: `Look Up "${textSelection.length > 15 ? `${textSelection.slice(0, 15)}...` : textSelection}"`,
-      visible: isMac && props.mediaType === 'none' && hasText,
-      click() {
-        debug('Show definition for selection', textSelection);
-        webContents.showDefinitionForSelection();
-      },
-    }, {
-      type: 'separator',
-    }, {
-      id: 'cut',
-      label: 'Cut',
-      click() {
-        if (can('Cut')) {
-          webContents.cut();
-        }
-      },
-      enabled: can('Cut'),
-      visible: hasText && props.isEditable,
-    }, {
-      id: 'copy',
-      label: 'Copy',
-      click() {
-        if (can('Copy')) {
-          webContents.copy();
-        }
-      },
-      enabled: can('Copy'),
-      visible: props.isEditable || hasText,
-    }, {
-      id: 'paste',
-      label: 'Paste',
-      click() {
-        if (editFlags.canPaste) {
-          webContents.paste();
-        }
-      },
-      enabled: editFlags.canPaste,
-      visible: props.isEditable,
-    }, {
-      type: 'separator',
-      visible: props.isEditable && hasText,
-    }, {
-      id: 'searchTextSelection',
-      label: `Search Google for "${textSelection.length > 15 ? `${textSelection.slice(0, 15)}...` : textSelection}"`,
-      visible: hasText,
-      click() {
-        const url = `https://www.google.com/search?q=${textSelection}`;
-        debug('Search on Google', url);
-        shell.openExternal(url);
-      },
-    }, {
-      type: 'separator',
-    },
-  ];
-
-  if (props.linkURL && props.mediaType === 'none') {
-    menuTpl = [{
-      type: 'separator',
-    }, {
-      id: 'openLink',
-      label: 'Open Link in Browser',
-      click() {
-        debug('Open link in Browser', props.linkURL);
-        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() {
-        debug('Open image in Browser', props.srcURL);
-        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 (canGoBack || canGoForward) {
-    menuTpl.push({
-      type: 'separator',
-    }, {
-      id: 'goBack',
-      label: 'Go Back',
-      enabled: canGoBack,
-      click() {
-        webContents.goBack();
-      },
-    }, {
-      id: 'goForward',
-      label: 'Go Forward',
-      enabled: canGoForward,
-      click() {
-        webContents.goForward();
-      },
-    }, {
-      type: 'separator',
-    });
-  }
-
-  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: 'Spell Checking',
-    visible: isSpellcheckEnabled,
-    submenu: [
-      {
-        id: 'spellchecker',
-        label: 'Available Languages',
-        enabled: false,
-      }, {
-        type: 'separator',
-      },
-      {
-        id: 'resetToDefault',
-        label: `Reset to system default (${defaultSpellcheckerLanguage === 'automatic' ? 'Automatic' : SPELLCHECKER_LOCALES[defaultSpellcheckerLanguage]})`,
-        type: 'radio',
-        visible: defaultSpellcheckerLanguage !== spellcheckerLanguage || (defaultSpellcheckerLanguage !== 'automatic' && spellcheckerLanguage === 'automatic'),
-        click() {
-          debug('Resetting service spellchecker to system default');
-          ipcRenderer.sendToHost('set-service-spellchecker-language', 'reset');
-        },
-      },
-      {
-        id: 'automaticDetection',
-        label: 'Automatic language detection',
-        type: 'radio',
-        checked: spellcheckerLanguage === 'automatic',
-        click() {
-          debug('Detect language automatically');
-          ipcRenderer.sendToHost('set-service-spellchecker-language', 'automatic');
-        },
-      },
-      {
-        type: 'separator',
-        visible: defaultSpellcheckerLanguage !== spellcheckerLanguage,
-      },
-      ...spellcheckingLanguages],
-  });
-
-
-  if (isDevMode) {
-    menuTpl.push({
-      type: 'separator',
-    }, {
-      id: 'inspect',
-      label: 'Inspect Element',
-      click() {
-        webContents.inspectElement(props.x, props.y);
-      },
-    });
-  }
-
-  return delUnusedElements(menuTpl);
-};
-
-export default function contextMenu(spellcheckProvider, isSpellcheckEnabled, getDefaultSpellcheckerLanguage, getSpellcheckerLanguage) {
-  webContents.on('context-menu', async (e, props) => {
-    e.preventDefault();
-
-    let suggestions = [];
-    if (spellcheckProvider && props.misspelledWord) {
-      debug('Mispelled word', props.misspelledWord);
-      suggestions = await spellcheckProvider.getSuggestion(props.misspelledWord);
-
-      debug('Suggestions', suggestions);
+        }),
+      );
     }
 
-    const menu = Menu.buildFromTemplate(
-      buildMenuTpl(
-        props,
-        suggestions.slice(0, 5),
-        isSpellcheckEnabled(),
-        getDefaultSpellcheckerLanguage(),
-        getSpellcheckerLanguage(),
-      ),
-    );
-
-    menu.popup();
+    return menu;
+  };
+
+  const contextMenuBuilder = new ContextMenuBuilder(
+    handler,
+    null,
+    true,
+    addCustomMenuItems,
+  );
+  // eslint-disable-next-line no-new
+  new ContextMenuListener((info) => {
+    contextMenuBuilder.showPopupMenu(info);
   });
 }
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index 74d05fc2d..4fac21c55 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -19,6 +19,8 @@ class RecipeWebview {
 
   loopFunc = () => null;
 
+  darkModeHandler = false;
+
   /**
    * Initialize the loop
    *
@@ -67,17 +69,28 @@ class RecipeWebview {
    *                          be an absolute path to the file
    */
   injectCSS(...files) {
-    files.forEach((file) => {
-      const data = fs.readFileSync(file);
-      const styles = document.createElement('style');
-      styles.innerHTML = data.toString();
+    files.forEach(async (file) => {
+      if (await fs.exists(file)) {
+        const data = await fs.readFile(file);
+        const styles = document.createElement('style');
+        styles.innerHTML = data.toString();
 
-      document.querySelector('head').appendChild(styles);
+        document.querySelector('head').appendChild(styles);
 
-      debug('Append styles', styles);
+        debug('Append styles', styles);
+      }
     });
   }
 
+  /**
+   * Set a custom handler for turning on and off dark mode
+   *
+   * @param {function} handler
+   */
+  handleDarkMode(handler) {
+    this.darkModeHandler = handler;
+  }
+
   onNotify(fn) {
     if (typeof fn === 'function') {
       window.Notification.prototype.onNotify = fn;
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 1a22542d8..bad5a93b2 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -1,10 +1,11 @@
 /* eslint-disable import/first */
-import { ipcRenderer } from 'electron';
+import { ipcRenderer, remote } from 'electron';
 import path from 'path';
 import { autorun, computed, observable } from 'mobx';
 import fs from 'fs-extra';
 import { loadModule } from 'cld3-asm';
 import { debounce } from 'lodash';
+import { FindInPage } from 'electron-find';
 
 // For some services darkreader tries to use the chrome extension message API
 // This will cause the service to fail loading
@@ -23,7 +24,6 @@ import RecipeWebview from './lib/RecipeWebview';
 
 import spellchecker, { switchDict, disable as disableSpellchecker, getSpellcheckerLocaleByFuzzyIdentifier } from './spellchecker';
 import { injectDarkModeStyle, isDarkModeStyleInjected, removeDarkModeStyle } from './darkmode';
-import contextMenu from './contextMenu';
 import './notifications';
 
 import { DEFAULT_APP_SETTINGS } from '../config';
@@ -48,10 +48,15 @@ class RecipeController {
     'settings-update': 'updateAppSettings',
     'service-settings-update': 'updateServiceSettings',
     'get-service-id': 'serviceIdEcho',
+    'find-in-page': 'openFindInPage',
   };
 
   universalDarkModeInjected = false;
 
+  recipe = null;
+
+  hasUpdatedBeforeRecipeLoaded = false;
+
   constructor() {
     this.initialize();
   }
@@ -62,6 +67,8 @@ class RecipeController {
 
   cldIdentifier = null;
 
+  findInPage = null;
+
   async initialize() {
     Object.keys(this.ipcEvents).forEach((channel) => {
       ipcRenderer.on(channel, (...args) => {
@@ -72,16 +79,15 @@ class RecipeController {
 
     debug('Send "hello" to host');
     setTimeout(() => ipcRenderer.sendToHost('hello'), 100);
-
-    this.spellcheckingProvider = await spellchecker();
-    contextMenu(
-      this.spellcheckingProvider,
-      () => this.settings.app.enableSpellchecking,
-      () => this.settings.app.spellcheckerLanguage,
-      () => this.spellcheckerLanguage,
-    );
-
+    await spellchecker();
     autorun(() => this.update());
+
+    document.addEventListener('DOMContentLoaded', () => {
+      this.findInPage = new FindInPage(remote.getCurrentWebContents(), {
+        inputFocusColor: '#CE9FFC',
+        textColor: '#212121',
+      });
+    });
   }
 
   loadRecipeModule(event, config, recipe) {
@@ -91,11 +97,15 @@ class RecipeController {
     // Delete module from cache
     delete require.cache[require.resolve(modulePath)];
     try {
+      this.recipe = new RecipeWebview();
       // eslint-disable-next-line
-      require(modulePath)(new RecipeWebview(), {...config, recipe,});
+      require(modulePath)(this.recipe, {...config, recipe,});
       debug('Initialize Recipe', config, recipe);
 
       this.settings.service = Object.assign(config, { recipe });
+
+      // Make sure to update the WebView, otherwise the custom darkmode handler may not be used
+      this.update();
     } catch (err) {
       console.error('Recipe initialization failed', err);
     }
@@ -134,6 +144,10 @@ class RecipeController {
     }
   }
 
+  openFindInPage() {
+    this.findInPage.openFindWindow();
+  }
+
   update() {
     debug('enableSpellchecking', this.settings.app.enableSpellchecking);
     debug('isDarkModeEnabled', this.settings.service.isDarkModeEnabled);
@@ -160,12 +174,25 @@ class RecipeController {
       }
     }
 
+    if (!this.recipe) {
+      this.hasUpdatedBeforeRecipeLoaded = true;
+    }
+
     console.log(
       'Darkmode enabled?',
       this.settings.service.isDarkModeEnabled,
       'Dark theme active?',
       this.settings.app.isDarkThemeActive,
     );
+
+    const handlerConfig = {
+      removeDarkModeStyle,
+      disableDarkMode,
+      enableDarkMode,
+      injectDarkModeStyle: () => injectDarkModeStyle(this.settings.service.recipe.path),
+      isDarkModeStyleInjected,
+    };
+
     if (this.settings.service.isDarkModeEnabled && this.settings.app.isDarkThemeActive !== false) {
       debug('Enable dark mode');
 
@@ -175,7 +202,19 @@ class RecipeController {
 
       console.log('darkmode.css exists? ', darkModeExists ? 'Yes' : 'No');
 
-      if (darkModeExists) {
+      // Check if recipe has a custom dark mode handler
+      if (this.recipe && this.recipe.darkModeHandler) {
+        console.log('Using custom dark mode handler');
+
+        // Remove other dark mode styles if they were already loaded
+        if (this.hasUpdatedBeforeRecipeLoaded) {
+          this.hasUpdatedBeforeRecipeLoaded = false;
+          removeDarkModeStyle();
+          disableDarkMode();
+        }
+
+        this.recipe.darkModeHandler(true, handlerConfig);
+      } else if (darkModeExists) {
         console.log('Injecting darkmode.css');
         injectDarkModeStyle(this.settings.service.recipe.path);
 
@@ -195,7 +234,16 @@ class RecipeController {
       debug('Remove dark mode');
       console.log('DarkMode disabled - removing remaining styles');
 
-      if (isDarkModeStyleInjected()) {
+      if (this.recipe && this.recipe.darkModeHandler) {
+        // Remove other dark mode styles if they were already loaded
+        if (this.hasUpdatedBeforeRecipeLoaded) {
+          this.hasUpdatedBeforeRecipeLoaded = false;
+          removeDarkModeStyle();
+          disableDarkMode();
+        }
+
+        this.recipe.darkModeHandler(false, handlerConfig);
+      } else if (isDarkModeStyleInjected()) {
         console.log('Removing injected darkmode.css');
         removeDarkModeStyle();
       } else {
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index 8a1c8782b..a33a506b2 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,13 +1,12 @@
 import { webFrame } from 'electron';
-import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
-
+import { SpellCheckHandler } from 'electron-spellchecker';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
+import setupContextMenu from './contextMenu';
 
 const debug = require('debug')('Franz:spellchecker');
 
 let handler;
 let currentDict;
-let contextMenuBuilder;
 let _isEnabled = false;
 
 export async function switchDict(locale) {
@@ -46,12 +45,7 @@ export default async function initialize(languageCode = 'en-us') {
     debug('Init spellchecker');
 
     switchDict(locale);
-
-    contextMenuBuilder = new ContextMenuBuilder(handler);
-    // eslint-disable-next-line no-new
-    new ContextMenuListener((info) => {
-      contextMenuBuilder.showPopupMenu(info);
-    });
+    setupContextMenu(handler);
 
     return handler;
   } catch (err) {