electron-findbar 3.0.0 → 3.1.1

package/README.md

@@ -13,7 +13,7 @@
 
 ## Installation
 
-Install the `electron-findbar` package via npm:
+Install the `electron-findbar` package via [npm](https://www.npmjs.com/package/electron-findbar):
 
 ```sh
 npm install electron-findbar
@@ -21,7 +21,7 @@ npm install electron-findbar
 
 ## Overview
 
-The `electron-findbar` is a `BrowserWindow` component designed to emulate the Chrome findbar layout, leveraging the `webContents.findInPage` method to navigate through matches. Inter-process communication (IPC) is used for interaction between the `main` and `renderer` processes.
+The `electron-findbar` package creates a `BrowserWindow`-based component designed to emulate the Chrome findbar layout, leveraging the `webContents.findInPage` method to navigate through matches. Inter-process communication (IPC) is used for interaction between the `main` and `renderer` processes.
 
 ### Memory Usage
 
@@ -55,14 +55,14 @@ Alternatively, you can provide a custom `WebContents` as the second parameter. I
 const findbar = Findbar.from(baseWindow, webContents)
 ```
 
-Is also possible to create a findbar providing only the web contents. The BaseWindow.getAllWindows() will be used to query for the parent window:
+It is also possible to create a findbar providing only the web contents. The BaseWindow.getAllWindows() will be used to query for the parent window:
 
 ```js
 // Create or retrieve the findbar associated to the webContents.
 const findbar = Findbar.from(webContents)
 ```
 
-**Note:** The findbar is ALWAYS linked to the webContents not the window. The parent is only the window to connect the events and stay on top. If the `.from(webContents)` is used to retrieve an existing findbar previously created with a parent, the findbar will stay connected to the parent.
+**Note:** The findbar is ALWAYS linked to the webContents, not the window. The parent is only the window to connect the events and stay on top. If the `.from(webContents)` is used to retrieve an existing findbar previously created with a parent, the findbar will stay connected to the parent.
 
 #### Retrieve if exists
 
@@ -305,10 +305,11 @@ If the `contextIsolation` is enabled, the `electron-findbar/remote` will not be
 ```js
 const $remote = (ipc => ({
     getLastState: async () => ipc.invoke('electron-findbar/last-state'),
-    inputChange: (value) => { ipc.send('electron-findbar/input-change', value) },
+    inputChange: (text) => { ipc.send('electron-findbar/input-change', text) },
     matchCase: (value) => { ipc.send('electron-findbar/match-case', value) },
     previous: () => { ipc.send('electron-findbar/previous') },
     next: () => { ipc.send('electron-findbar/next') },
+    open: () => { ipc.send('electron-findbar/open') },
     close: () => { ipc.send('electron-findbar/close') }
 })) (require('electron').ipcRenderer)
 
@@ -327,6 +328,49 @@ FindbarRemote.open()
 FindbarRemote.inputChange('findIt')
 ```
 
+## Changing the Parent Window
+
+There are scenarios where you might need to change the parent window.
+
+### Using updateParentWindow
+
+The `updateParentWindow` method allows you to change the parent window while preserving the findbar instance and its state:
+
+```javascript
+// Create a findbar for the initial window
+const findbar = Findbar.from(oldWindow, webContents)
+
+// Later, when you need to change the parent:
+findbar.updateParentWindow(newWindow)
+```
+
+This approach keeps the same findbar instance connected to the same webContents, but changes which window it's attached to. The findbar will close immediately.
+
+### Using detach
+
+Alternatively, the `detach` method disconnects a findbar instance from its webContents, allowing you to create a new instance in the next `Findbar.from` call:
+
+```javascript
+// Get the existing findbar
+const oldFindbar = Findbar.fromIfExists(webContents)
+
+// Detach it to free the association
+if (oldFindbar) {
+  oldFindbar.detach()
+}
+
+// Now create a new findbar with a different parent
+const newFindbar = Findbar.from([newWindow, ]webContents)
+```
+
+This approach is useful when you want to completely reset the findbar's configuration or when moving between very different window configurations.
+
+### Important Considerations
+
+- If the findbar is currently open when you change the parent window, it will automatically close.
+- Window options and handlers will be preserved when using `updateParentWindow`.
+- After calling `detach`, the old findbar instance can no longer be used.
+
 ## Author
 
 Created by [Emerson Capuchi Romaneli](https://github.com/ECRomaneli) (@ECRomaneli).

package/index.js

@@ -14,7 +14,7 @@ class Findbar {
     #findableContents
 
     /** @type { { active: number, total: number } } */
-    #matches
+    #matches = { active: 0, total: 0 }
 
     /** @type {(findbarWindow: BrowserWindow) => void} */
     #windowHandler
@@ -74,6 +74,8 @@ class Findbar {
         }
 
         this.#findableContents._findbar = this
+
+        this.#findableContents.once('destroyed', () => { this.detach() })
     }
 
     /**
@@ -116,10 +118,15 @@ class Findbar {
         if (this.#window) { this.#window.webContents._findbar = void 0 }
     }
 
-    setTheme(theme) {
-        if (this.#window && !this.#window.isDestroyed()) {
-            this.#window.webContents.send('electron-findbar/set-theme', theme)
-        }
+    /**
+     * Update the parent window of the findbar.
+     * @param {BaseWindow} [newParent] - The new parent window. If not provided, the parent will be set to the window containing the web contents.
+     * @returns {void}
+     */
+    updateParentWindow(newParent) {
+        if (this.#parent === newParent) { return }
+        this.close()
+        this.#parent = newParent ?? Findbar.#getBaseWindowFromWebContents(this.#findableContents)
     }
 
     /**
@@ -164,6 +171,7 @@ class Findbar {
      * @returns {void}
      */
     findPrevious() {
+        if (this.#matches.total < 2) { return }
         this.#matches.active === 1 && (this.#fixMove = false)
         this.isOpen() && this.#findInContent({ forward: false })
     }
@@ -173,6 +181,7 @@ class Findbar {
      * @returns {void}
      */
     findNext() {
+        if (this.#matches.total < 2) { return }
         this.#matches.active === this.#matches.total && (this.#fixMove = true)
         this.isOpen() && this.#findInContent({ forward: true })
     }
@@ -310,7 +319,7 @@ class Findbar {
             this.#parent.prependListener('move', boundsHandler)
         }
 
-        this.#window.once('close', () => {
+        this.#window.once('closed', () => {
             if (this.#parent && !this.#parent.isDestroyed()) {
                 this.#parent.off('show', showCascade)
                 this.#parent.off('hide', hideCascade)
@@ -339,7 +348,8 @@ class Findbar {
             this.#fixMove = null
         }
 
-        this.#matches = { active, total }
+        this.#matches.active = active
+        this.#matches.total = total
 
         this.#window.webContents.send('electron-findbar/matches', this.#matches)
     }
@@ -358,16 +368,16 @@ class Findbar {
      * @returns {WebContents | undefined} The web contents if any.
      */
     static #retrieveWebContents(window) {
-        return window.webContents ?? window.contentView?.children[0]
+        return window.webContents ?? window.contentView?.children[0]?.webContents
     }
 
     /**
      * Get the parent window from web contents.
-     * @param {WebContents} cont 
+     * @param {WebContents} w 
      * @returns {BaseWindow | undefined} Parent window if any.
      */
-    static #getBaseWindowFromWebContents(cont) {
-        return BaseWindow.getAllWindows().find(win => win.webContents === cont || win.contentView.children.some(child => child.webContents === cont))
+    static #getBaseWindowFromWebContents(w) {
+        return BaseWindow.getAllWindows().find(win => win.webContents === w || win.contentView.children.some(child => child.webContents === w))
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-findbar",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "description": "Chrome-like findbar for your Electron app.",
   "main": "index.js",
   "files": [