Fixes #495

common/deps.ts

@@ -43,7 +43,11 @@ export {
 
 export type { NodeType, SyntaxNode, SyntaxNodeRef, Tree } from "@lezer/common";
 
-export { searchKeymap } from "@codemirror/search";
+export {
+  closeSearchPanel,
+  openSearchPanel,
+  searchKeymap,
+} from "@codemirror/search";
 export {
   Decoration,
   drawSelection,

plug-api/silverbullet-syscall/editor.ts

@@ -178,3 +178,7 @@ export function foldAll() {
 export function unfoldAll() {
   return syscall("editor.unfoldAll");
 }
+
+export function openSearchPanel() {
+  return syscall("editor.openSearchPanel");
+}

plugs/editor/editor.plug.yaml

@@ -270,11 +270,18 @@ functions:
     command:
       name: "Outline: Unfold All"
       key: "Ctrl-Alt-Shift-]"
+  findInPageCommand:
+    path: editor.ts:findInPageCommand
+    command:
+      name: "Editor: Find in Page"
+      key: "Ctrl-f"
+      mac: "Cmd-f"
 
   # Demo
   customFlashMessage:
     path: editor.ts:customFlashMessage
     command:
       name: "Flash: Custom Message"
+      hide: true
       contexts:
       - internal

plugs/editor/editor.ts

@@ -51,3 +51,8 @@ export async function reloadSettingsAndCommands() {
   await editor.reloadSettingsAndCommands();
   await editor.flashNotification("Reloaded settings and commands");
 }
+
+export async function findInPageCommand() {
+  await editor.openSearchPanel();
+  return false;
+}

web/editor_state.ts

@@ -287,9 +287,11 @@ export function createCommandKeyBindings(client: Client): KeyBinding[] {
                 "error",
               );
             },
-          ).then(() => {
+          ).then((returnValue: any) => {
             // Always be focusing the editor after running a command
+            if (returnValue !== false) {
               client.focus();
+            }
           });
           return true;
         },
@@ -322,11 +324,13 @@ export function createCommandKeyBindings(client: Client): KeyBinding[] {
                 `Error running command: ${e.message}`,
                 "error",
               );
-            })
+            }).then((returnValue: any) => {
-            .then(() => {
               // Always be focusing the editor after running a command
+              if (returnValue !== false) {
                 client.focus();
+              }
             });
+
           return true;
         },
       });
@@ -342,7 +346,6 @@ export function createKeyBindings(client: Client): Extension {
     ...smartQuoteKeymap,
     ...closeBracketsKeymap,
     ...standardKeymap,
-    ...searchKeymap,
     ...historyKeymap,
     ...completionKeymap,
     indentWithTab,

web/editor_ui.tsx

@@ -7,6 +7,7 @@ import { TopBar } from "./components/top_bar.tsx";
 import reducer from "./reducer.ts";
 import { Action, AppViewState, initialViewState } from "./types.ts";
 import {
+  closeSearchPanel,
   featherIcons,
   preactRender,
   runScopeHandlers,
@@ -27,7 +28,13 @@ export class MainUI {
     // Make keyboard shortcuts work even when the editor is in read only mode or not focused
     globalThis.addEventListener("keydown", (ev) => {
       if (!client.editorView.hasFocus) {
-        if ((ev.target as any).closest(".cm-content")) {
+        const target = ev.target as HTMLElement;
+        if (target.className === "cm-textfield" && ev.key === "Escape") {
+          // Search panel is open, let's close it
+          console.log("Closing search panel");
+          closeSearchPanel(client.editorView);
+          return;
+        } else if (target.closest(".cm-content")) {
           // In some cm element, let's back out
           return;
         }
@@ -119,9 +126,6 @@ export class MainUI {
           <CommandPalette
             onTrigger={(cmd) => {
               dispatch({ type: "hide-palette" });
-              setTimeout(() => {
-                client.focus();
-              });
               if (cmd) {
                 dispatch({ type: "command-run", command: cmd.command.name });
                 cmd
@@ -129,9 +133,11 @@ export class MainUI {
                   .catch((e: any) => {
                     console.error("Error running command", e.message);
                   })
-                  .then(() => {
+                  .then((returnValue: any) => {
                     // Always be focusing the editor after running a command
+                    if (returnValue !== false) {
                       client.focus();
+                    }
                   });
               }
             }}

web/syscalls/editor.ts

@@ -14,6 +14,7 @@ import { SysCallMapping } from "../../plugos/system.ts";
 import type { FilterOption } from "../types.ts";
 import { UploadFile } from "../../plug-api/types.ts";
 import { PageRef } from "$sb/lib/page.ts";
+import { openSearchPanel } from "../deps.ts";
 
 export function editorSyscalls(client: Client): SysCallMapping {
   const syscalls: SysCallMapping = {
@@ -268,6 +269,9 @@ export function editorSyscalls(client: Client): SysCallMapping {
     "editor.unfoldAll": () => {
       unfoldAll(client.editorView);
     },
+    "editor.openSearchPanel": () => {
+      openSearchPanel(client.editorView);
+    },
   };
 
   return syscalls;