feat: find in page on electron

src/electron/electron/find_in_page.cljs

@@ -0,0 +1,12 @@
+(ns electron.find-in-page
+  (:require [electron.window :as win]))
+
+(defn find!
+  [^js window search option]
+  (when window
+    (.findInPage ^js (.-webContents window) search option)))
+
+(defn clear!
+  [^js window]
+  (when window
+    (.stopFindInPage ^js (.-webContents window) "clearSelection")))

src/electron/electron/handler.cljs

@@ -21,7 +21,8 @@
             [electron.plugin :as plugin]
             [electron.window :as win]
             [electron.file-sync-rsapi :as rsapi]
-            [electron.backup-file :as backup-file]))
+            [electron.backup-file :as backup-file]
+            [electron.find-in-page :as find]))
 
 (defmulti handle (fn [_window args] (keyword (first args))))
 
@@ -536,6 +537,12 @@
     (f)
     (state/set-state! :window/once-persist-done nil)))
 
+(defmethod handle :find-in-page [^js win [_ search option]]
+  (find/find! win search (bean/->js option)))
+
+(defmethod handle :clear-find-in-page [^js win [_]]
+  (find/clear! win))
+
 (defn set-ipc-handler! [window]
   (let [main-channel "main"]
     (.handle ipcMain main-channel

src/electron/electron/window.cljs

@@ -118,7 +118,7 @@
 (defn setup-window-listeners!
   [^js win]
   (when win
-    (let [web-contents (. win -webContents)          
+    (let [web-contents (. win -webContents)
           new-win-handler
           (fn [e url]
             (let [url (if (string/starts-with? url "file:")
@@ -140,7 +140,7 @@
 
           context-menu-handler
           (context-menu/setup-context-menu! win)]
-      
+
       (doto web-contents
         (.on "new-window" new-win-handler)
         (.on "will-navigate" will-navigate-handler))
@@ -159,3 +159,7 @@
         (.off win "enter-full-screen")
         (.off win "leave-full-screen")))
     #()))
+
+(defn get-active-window
+  []
+  (.getFocusedWindow BrowserWindow))

src/main/frontend/components/find_in_page.cljs

@@ -0,0 +1,82 @@
+(ns frontend.components.find-in-page
+  (:require [rum.core :as rum]
+            [frontend.ui :as ui]
+            [frontend.state :as state]
+            [frontend.util :as util]
+            [frontend.handler.search :as search-handler]
+            [goog.dom :as gdom]
+            [goog.functions :refer [debounce]]
+            [frontend.mixins :as mixins]
+            [clojure.string :as string]))
+
+(defn focus-input!
+  []
+  (when-let [element ^js (gdom/getElement "search-in-page-input")]
+    (.focus element)))
+
+(defn find-in-page!
+  []
+  (search-handler/electron-find-in-page! focus-input!))
+
+(defonce debounced-search (debounce find-in-page! 500))
+
+(defn- enter-to-search
+  [e]
+  (when (and (= (.-code e) "Enter")
+             (not (state/editing?)))
+    (let [shift? (.-shiftKey e)]
+      (state/set-state! [:ui/find-in-search :backward?] shift?)
+      (search-handler/electron-find-in-page!))))
+
+(rum/defc search-inner <
+  {:did-mount (fn [state]
+                (js/document.addEventListener "keyup" enter-to-search)
+                state)
+   :will-unmount (fn [state]
+                   (js/document.removeEventListener "keyup" enter-to-search)
+                   state)}
+  (mixins/event-mixin
+   (fn [state]
+     (mixins/hide-when-esc-or-outside
+      state
+      :node (gdom/getElement "search-in-page")
+      :on-hide (fn []
+                 (search-handler/electron-exit-find-in-page!)))))
+  [{:keys [q backward?]}]
+  [:div#search-in-page.flex.flex-row.absolute.top-2.right-4.shadow-lg.px-2.py-1.faster-fade-in
+   [:div.flex
+    [:input#search-in-page-input.form-input.block.w-48.sm:text-sm.sm:leading-5.my-2.border-none.mr-4.outline-none
+     {:auto-focus true
+      :placeholder "Find in page"
+      :on-change (fn [e]
+                   (let [value (util/evalue e)]
+                     (state/set-state! [:ui/find-in-search :q] value)
+                     (debounced-search)))}]]
+   (ui/button
+     (ui/icon "caret-up" {:style {:font-size 18}})
+     :on-click (fn []
+                 (state/set-state! [:ui/find-in-search :backward?] true)
+                 (search-handler/electron-find-in-page!))
+     :intent "link"
+     :small? true)
+
+   (ui/button
+     (ui/icon "caret-down" {:style {:font-size 18}})
+     :on-click (fn []
+                 (state/set-state! [:ui/find-in-search :backward?] false)
+                 (search-handler/electron-find-in-page!))
+     :intent "link"
+     :small? true)
+
+   (ui/button
+     [:span.px-1 "X"]
+     :on-click (fn []
+                 (search-handler/electron-exit-find-in-page!))
+     :intent "link"
+     :small? true)])
+
+(rum/defc search < rum/reactive
+  []
+  (let [{:keys [active?] :as opt} (state/sub :ui/find-in-search)]
+    (when active?
+      (search-inner opt))))

src/main/frontend/components/find_in_page.css

@@ -0,0 +1,16 @@
+#search-in-page {
+  z-index: 999;
+  background-color: var(--ls-primary-background-color);
+
+  .form-input:focus {
+      box-shadow: none;
+  }
+
+  .ui__button[intent='link'], .ui__button[intent='link']:focus {
+      border-color: none;
+  }
+
+  .ui__button {
+      margin-top: 0;
+  }
+}

src/main/frontend/components/sidebar.cljs

@@ -12,6 +12,7 @@
             [frontend.components.svg :as svg]
             [frontend.components.theme :as theme]
             [frontend.components.widgets :as widgets]
+            [frontend.components.find-in-page :as find-in-page]
             [frontend.config :as config]
             [frontend.context.i18n :refer [t]]
             [frontend.db :as db]
@@ -333,6 +334,9 @@
 
      [:div#main-content-container.scrollbar-spacing.w-full.flex.justify-center.flex-row
 
+      (when (util/electron?)
+        (find-in-page/search))
+
       (when show-action-bar?
         (action-bar/action-bar))
 

src/main/frontend/handler/search.cljs

@@ -9,7 +9,8 @@
             [promesa.core :as p]
             [logseq.graph-parser.text :as text]
             [frontend.util.drawer :as drawer]
-            [frontend.util.property :as property]))
+            [frontend.util.property :as property]
+            [electron.ipc :as ipc]))
 
 (defn add-search-to-recent!
   [repo q]
@@ -48,6 +49,34 @@
                search-key (if more? :search/more-result :search/result)]
            (swap! state/state assoc search-key result)))))))
 
+(defn electron-find-in-page!
+  ([]
+   (electron-find-in-page! nil))
+  ([on-success]
+   (when (util/electron?)
+     (let [{:keys [active? backward? q]} (:ui/find-in-search @state/state)
+           option (cond->
+                    {}
+
+                    (not active?)
+                    (assoc :findNext true)
+
+                    backward?
+                    (assoc :forward false))]
+       (when-not active? (state/set-state! [:ui/find-in-search :active?] true))
+       (when-not (string/blank? q)
+         (ipc/ipc "find-in-page" q option)
+         (when on-success
+           (js/setTimeout #(on-success) 500)))))))
+
+(defn electron-exit-find-in-page!
+  [& {:keys [clear-state?]
+      :or {clear-state? true}}]
+  (when (util/electron?)
+    (ipc/ipc "clear-find-in-page")
+    (when clear-state?
+      (state/set-state! :ui/find-in-search nil))))
+
 (defn clear-search!
   ([]
    (clear-search! true))

src/main/frontend/modules/shortcut/config.cljs

@@ -249,6 +249,10 @@
                                                 (editor-handler/escape-editing)
                                                 (route-handler/go-to-search! :global))}
 
+   :go/electron-find-in-page       {:binding "mod+f"
+                                    :fn      #(when (util/electron?)
+                                                (search-handler/electron-find-in-page!))}
+
    :go/journals                    {:binding "g j"
                                     :fn      route-handler/go-to-journals!}
 
@@ -501,6 +505,7 @@
                           :ui/toggle-brackets
                           :go/search-in-page
                           :go/search
+                          :go/electron-find-in-page
                           :go/backward
                           :go/forward
                           :search/re-index
@@ -553,6 +558,7 @@
     :editor/select-all-blocks
     :go/search
     :go/search-in-page
+    :go/electron-find-in-page
     :editor/undo
     :editor/redo
     :editor/copy

src/main/frontend/modules/shortcut/dicts.cljc

@@ -77,6 +77,7 @@
    :editor/zoom-out                "Zoom out editing block / Backwards otherwise"
    :ui/toggle-brackets             "Toggle whether to display brackets"
    :go/search-in-page              "Search in the current page"
+   :go/electron-find-in-page       "Find in page"
    :go/search                      "Full text search"
    :go/journals                    "Go to journals"
    :go/backward                    "Backwards"

src/main/frontend/state.cljs

@@ -231,6 +231,8 @@
      :file-sync/download-init-progress      nil
 
      :encryption/graph-parsing?             false
+
+     :ui/find-in-search                     nil
      })))
 
 ;; block uuid -> {content(String) -> ast}