From 890ed9f31fd95f302ad4f7a9e0bb64b75bd93a7e Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Sat, 13 Apr 2024 19:12:29 +0200
Subject: [PATCH] feat: add "toggle grid" to command palette (#7887)

---
 .../actions/actionToggleGridMode.tsx          |  5 ++-
 .../CommandPalette/CommandPalette.tsx         |  1 +
 packages/excalidraw/components/HelpDialog.tsx |  2 +-
 packages/excalidraw/components/icons.tsx      | 13 ++++++
 packages/excalidraw/locales/en.json           |  2 +-
 .../__snapshots__/contextmenu.test.tsx.snap   | 45 ++++++++++++++++++-
 packages/excalidraw/tests/excalidraw.test.tsx |  2 +-
 7 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/packages/excalidraw/actions/actionToggleGridMode.tsx b/packages/excalidraw/actions/actionToggleGridMode.tsx
index 412da0119a..46e1879d96 100644
--- a/packages/excalidraw/actions/actionToggleGridMode.tsx
+++ b/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",
diff --git a/packages/excalidraw/components/CommandPalette/CommandPalette.tsx b/packages/excalidraw/components/CommandPalette/CommandPalette.tsx
index f021632b83..17480319fb 100644
--- a/packages/excalidraw/components/CommandPalette/CommandPalette.tsx
+++ b/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,
diff --git a/packages/excalidraw/components/HelpDialog.tsx b/packages/excalidraw/components/HelpDialog.tsx
index 23c9f8f47d..c362889b39 100644
--- a/packages/excalidraw/components/HelpDialog.tsx
+++ b/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
diff --git a/packages/excalidraw/components/icons.tsx b/packages/excalidraw/components/icons.tsx
index 2f7be43fb6..02965c91da 100644
--- a/packages/excalidraw/components/icons.tsx
+++ b/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,
+);
diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json
index a0a5a19584..fb5b148d35 100644
--- a/packages/excalidraw/locales/en.json
+++ b/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…",
diff --git a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
index 5723ebe607..579ce84d27 100644
--- a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
+++ b/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],
diff --git a/packages/excalidraw/tests/excalidraw.test.tsx b/packages/excalidraw/tests/excalidraw.test.tsx
index 98d0e9006b..be7efc914c 100644
--- a/packages/excalidraw/tests/excalidraw.test.tsx
+++ b/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);
     });