web: fix search not working in readonly editor

Zimang · May 16, 2024 · 46599f6 · 46599f6
1 parent d1b532a
commit 46599f6
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/apps/web/src/common/key-map.js → apps/web/src/common/key-map.ts b/apps/web/src/common/key-map.js → 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
@@ -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
@@ -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;
         }}