feat: add "toggle grid" to command palette (#7887)

packages/excalidraw/actions/actionToggleGridMode.tsx

@@ -2,10 +2,13 @@ import { CODES, KEYS } from "../keys";
 import { register } from "./register";
 import { GRID_SIZE } from "../constants";
 import { AppState } from "../types";
+import { gridIcon } from "../components/icons";
 
 export const actionToggleGridMode = register({
   name: "gridMode",
-  label: "labels.showGrid",
+  icon: gridIcon,
+  keywords: ["snap"],
+  label: "labels.toggleGrid",
   viewMode: true,
   trackEvent: {
     category: "canvas",

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -309,6 +309,7 @@ function CommandPaletteInner({
         actionManager.actions.zoomToFit,
         actionManager.actions.zenMode,
         actionManager.actions.viewMode,
+        actionManager.actions.gridMode,
         actionManager.actions.objectsSnapMode,
         actionManager.actions.toggleShortcuts,
         actionManager.actions.selectAll,

packages/excalidraw/components/HelpDialog.tsx

@@ -273,7 +273,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               shortcuts={[getShortcutKey("Alt+S")]}
             />
             <Shortcut
-              label={t("labels.showGrid")}
+              label={t("labels.toggleGrid")}
               shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
             />
             <Shortcut

packages/excalidraw/components/icons.tsx

@@ -2116,3 +2116,16 @@ export const youtubeIcon = createIcon(
   </g>,
   tablerIconProps,
 );
+
+export const gridIcon = createIcon(
+  <g strokeWidth={1.5}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M3 6h18" />
+    <path d="M3 12h18" />
+    <path d="M3 18h18" />
+    <path d="M6 3v18" />
+    <path d="M12 3v18" />
+    <path d="M18 3v18" />
+  </g>,
+  tablerIconProps,
+);

packages/excalidraw/locales/en.json

@@ -87,7 +87,7 @@
     "group": "Group selection",
     "ungroup": "Ungroup selection",
     "collaborators": "Collaborators",
-    "showGrid": "Show grid",
+    "toggleGrid": "Toggle grid",
     "addToLibrary": "Add to library",
     "removeFromLibrary": "Remove from library",
     "libraryLoadingMessage": "Loading library…",

packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap

@@ -7870,8 +7870,51 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
       "separator",
       {
         "checked": [Function],
+        "icon": <svg
+          aria-hidden="true"
+          className=""
+          fill="none"
+          focusable="false"
+          role="img"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          viewBox="0 0 24 24"
+        >
+          <g
+            strokeWidth={1.5}
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+              stroke="none"
+            />
+            <path
+              d="M3 6h18"
+            />
+            <path
+              d="M3 12h18"
+            />
+            <path
+              d="M3 18h18"
+            />
+            <path
+              d="M6 3v18"
+            />
+            <path
+              d="M12 3v18"
+            />
+            <path
+              d="M18 3v18"
+            />
+          </g>
+        </svg>,
         "keyTest": [Function],
-        "label": "labels.showGrid",
+        "keywords": [
+          "snap",
+        ],
+        "label": "labels.toggleGrid",
         "name": "gridMode",
         "perform": [Function],
         "predicate": [Function],

packages/excalidraw/tests/excalidraw.test.tsx

@@ -101,7 +101,7 @@ describe("<Excalidraw/>", () => {
         clientY: 1,
       });
       const contextMenu = document.querySelector(".context-menu");
-      fireEvent.click(queryByText(contextMenu as HTMLElement, "Show grid")!);
+      fireEvent.click(queryByText(contextMenu as HTMLElement, "Toggle grid")!);
       expect(h.state.gridSize).toBe(GRID_SIZE);
     });