feat: Add 'Search in document' to command menu, add shortcut (#8596)

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,

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>
           ))}

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, "⇧");
+}