From b1d8acbad14d5ecb53c2d5a56f4d3078e0d5e19c Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Sat, 1 Mar 2025 13:45:31 -0500
Subject: [PATCH] feat: Add 'Search in document' to command menu, add shortcut
 (#8596)

---
 app/actions/definitions/documents.tsx        |  2 ++
 app/components/CommandBar/CommandBarItem.tsx |  3 +-
 shared/utils/keyboard.ts                     | 29 ++++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/app/actions/definitions/documents.tsx b/app/actions/definitions/documents.tsx
index d7e2950f2a..165c526b03 100644
--- a/app/actions/definitions/documents.tsx
+++ b/app/actions/definitions/documents.tsx
@@ -683,6 +683,7 @@ export const searchInDocument = createAction({
   name: ({ t }) => t("Search in document"),
   analyticsName: "Search document",
   section: ActiveDocumentSection,
+  shortcut: [`Meta+/`],
   icon: <SearchIcon />,
   visible: ({ stores, activeDocumentId }) => {
     if (!activeDocumentId) {
@@ -1210,6 +1211,7 @@ export const rootDocumentActions = [
   unpublishDocument,
   subscribeDocument,
   unsubscribeDocument,
+  searchInDocument,
   duplicateDocument,
   leaveDocument,
   moveTemplateToWorkspace,
diff --git a/app/components/CommandBar/CommandBarItem.tsx b/app/components/CommandBar/CommandBarItem.tsx
index 6f34115c54..74bb222547 100644
--- a/app/components/CommandBar/CommandBarItem.tsx
+++ b/app/components/CommandBar/CommandBarItem.tsx
@@ -3,6 +3,7 @@ import { ArrowIcon, BackIcon } from "outline-icons";
 import * as React from "react";
 import styled, { css, useTheme } from "styled-components";
 import { s, ellipsis } from "@shared/styles";
+import { normalizeKeyDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import Key from "~/components/Key";
 import Text from "~/components/Text";
@@ -70,7 +71,7 @@ function CommandBarItem(
                 ""
               )}
               {sc.split("+").map((key) => (
-                <Key key={key}>{key}</Key>
+                <Key key={key}>{normalizeKeyDisplay(key)}</Key>
               ))}
             </React.Fragment>
           ))}
diff --git a/shared/utils/keyboard.ts b/shared/utils/keyboard.ts
index c842888cfa..6b6d6d0ad2 100644
--- a/shared/utils/keyboard.ts
+++ b/shared/utils/keyboard.ts
@@ -1,13 +1,42 @@
 import { isMac } from "./browser";
 
+/**
+ * Returns the display string for the alt key
+ */
 export const altDisplay = isMac() ? "⌥" : "Alt";
 
+/**
+ * Returns the display string for the meta key
+ */
 export const metaDisplay = isMac() ? "⌘" : "Ctrl";
 
+/**
+ * Returns the name of the modifier key
+ */
 export const meta = isMac() ? "cmd" : "ctrl";
 
+/**
+ * Returns true if the given event is a modifier key (Cmd or Ctrl on Mac, Alt on
+ * @param event The event to check
+ * @returns True if the event is a modifier key
+ */
 export function isModKey(
   event: KeyboardEvent | MouseEvent | React.KeyboardEvent
 ) {
   return isMac() ? event.metaKey : event.ctrlKey;
 }
+
+/**
+ * Returns a string with the appropriate display strings for the given key
+ *
+ * @param key The key to display
+ * @returns The display string for the key
+ */
+export function normalizeKeyDisplay(key: string) {
+  return key
+    .replace(/Meta/i, metaDisplay)
+    .replace(/Cmd/i, metaDisplay)
+    .replace(/Alt/i, altDisplay)
+    .replace(/Control/i, metaDisplay)
+    .replace(/Shift/i, "⇧");
+}