Add "Find in Page" feature (#446)

* Add "Find in Page" feature

* Add custom theme to overlay

* Fix lint

1 files changed, 16 insertions, 1 deletions

diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 07d29f477..79392e20e 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
@@ -47,6 +48,7 @@ class RecipeController {
     'settings-update': 'updateAppSettings',
     'service-settings-update': 'updateServiceSettings',
     'get-service-id': 'serviceIdEcho',
+    'find-in-page': 'openFindInPage',
   };
 
   universalDarkModeInjected = false;
@@ -61,6 +63,8 @@ class RecipeController {
 
   cldIdentifier = null;
 
+  findInPage = null;
+
   async initialize() {
     Object.keys(this.ipcEvents).forEach((channel) => {
       ipcRenderer.on(channel, (...args) => {
@@ -73,6 +77,13 @@ class RecipeController {
     setTimeout(() => ipcRenderer.sendToHost('hello'), 100);
     await spellchecker();
     autorun(() => this.update());
+
+    document.addEventListener('DOMContentLoaded', () => {
+      this.findInPage = new FindInPage(remote.getCurrentWebContents(), {
+        inputFocusColor: '#CE9FFC',
+        textColor: '#212121',
+      });
+    });
   }
 
   loadRecipeModule(event, config, recipe) {
@@ -125,6 +136,10 @@ class RecipeController {
     }
   }
 
+  openFindInPage() {
+    this.findInPage.openFindWindow();
+  }
+
   update() {
     debug('enableSpellchecking', this.settings.app.enableSpellchecking);
     debug('isDarkModeEnabled', this.settings.service.isDarkModeEnabled);