From 46599f66dad6ac3732cb4c65c5ce96646bb436c0 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Thu, 16 May 2024 10:32:33 +0500
Subject: [PATCH] web: fix search not working in readonly editor

---
 .../web/src/common/{key-map.js => key-map.ts} | 30 +++++++++++++++----
 apps/web/src/components/editor/action-bar.tsx |  1 -
 apps/web/src/components/editor/tiptap.tsx     |  4 +--
 3 files changed, 26 insertions(+), 9 deletions(-)
 rename apps/web/src/common/{key-map.js => key-map.ts} (78%)

diff --git a/apps/web/src/common/key-map.js b/apps/web/src/common/key-map.ts
similarity index 78%
rename from apps/web/src/common/key-map.js
rename to apps/web/src/common/key-map.ts
index 6f521bd029..40f46da265 100644
--- a/apps/web/src/common/key-map.js
+++ b/apps/web/src/common/key-map.ts
@@ -18,9 +18,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import hotkeys from "hotkeys-js";
-import { navigate } from "../navigation";
-// import { store as themestore } from "../stores/theme-store";
 import { GlobalKeyboard } from "../utils/keyboard";
+import { useEditorStore } from "../stores/editor-store";
+import { useStore as useSearchStore } from "../stores/search-store";
+import { useEditorManager } from "../components/editor/manager";
 
 const KEYMAP = [
   // {
@@ -57,11 +58,24 @@ const KEYMAP = [
     keys: ["command+f", "ctrl+f"],
     description: "Search all notes",
     global: false,
-    action: (e) => {
-      if (e.target?.classList.contains("ProseMirror")) return;
+    action: (e: KeyboardEvent) => {
+      const isInEditor =
+        e.target instanceof HTMLElement &&
+        !!e.target?.closest(".editor-container");
+      if (isInEditor) {
+        const activeSession = useEditorStore.getState().getActiveSession();
+        if (activeSession?.type === "readonly") {
+          e.preventDefault();
+          const editor = useEditorManager
+            .getState()
+            .getEditor(activeSession.id);
+          editor?.editor?.startSearch();
+        }
+        return;
+      }
       e.preventDefault();
 
-      navigate("/search/notes");
+      useSearchStore.setState({ isSearching: true, searchType: "notes" });
     }
   }
   // {
@@ -137,7 +151,11 @@ export function registerKeyMap() {
   KEYMAP.forEach((key) => {
     hotkeys(
       key.keys.join(","),
-      { element: key.global ? GlobalKeyboard : window },
+      {
+        element: key.global
+          ? (GlobalKeyboard as unknown as HTMLElement)
+          : document.body
+      },
       key.action
     );
   });
diff --git a/apps/web/src/components/editor/action-bar.tsx b/apps/web/src/components/editor/action-bar.tsx
index 36dde0d365..dad62784a2 100644
--- a/apps/web/src/components/editor/action-bar.tsx
+++ b/apps/web/src/components/editor/action-bar.tsx
@@ -152,7 +152,6 @@ export function EditorActionBar() {
         activeSession &&
         activeSession.type !== "new" &&
         activeSession.type !== "locked" &&
-        activeSession.type !== "readonly" &&
         activeSession.type !== "diff" &&
         activeSession.type !== "conflicted",
       onClick: editor?.startSearch
diff --git a/apps/web/src/components/editor/tiptap.tsx b/apps/web/src/components/editor/tiptap.tsx
index d883c49c90..4a8d986f95 100644
--- a/apps/web/src/components/editor/tiptap.tsx
+++ b/apps/web/src/components/editor/tiptap.tsx
@@ -344,7 +344,6 @@ function TipTap(props: TipTapProps) {
     };
   }, []);
 
-  if (readonly) return null;
   return (
     <>
       <ScopedThemeProvider
@@ -418,7 +417,7 @@ function TiptapWrapper(
         editorContainer={() => {
           if (editorContainerRef.current) return editorContainerRef.current;
           const editorContainer = document.createElement("div");
-          editorContainer.classList.add("selectable");
+          editorContainer.classList.add("selectable", "editor-container");
           editorContainer.style.flex = "1";
           editorContainer.style.cursor = "text";
           editorContainer.style.color =
@@ -427,6 +426,7 @@ function TiptapWrapper(
           editorContainer.style.fontSize = `${editorConfig.fontSize}px`;
           editorContainer.style.fontFamily =
             getFontById(editorConfig.fontFamily)?.font || "sans-serif";
+          editorContainer.tabIndex = -1;
           editorContainerRef.current = editorContainer;
           return editorContainer;
         }}