feat: Checkmark to toggle context-menu-items (#2645)

src/components/App.tsx

@@ -3643,13 +3643,15 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             CANVAS_ONLY_ACTIONS.includes(action.name),
           ),
           {
-            shortcutName: "toggleGridMode",
-            label: t("labels.toggleGridMode"),
+            checked: this.state.gridSize !== null,
+            shortcutName: "gridMode",
+            label: t("labels.gridMode"),
             action: this.toggleGridMode,
           },
           {
-            shortcutName: "toggleStats",
-            label: t("labels.toggleStats"),
+            checked: this.state.showStats,
+            shortcutName: "stats",
+            label: t("labels.stats"),
             action: this.toggleStats,
           },
         ],

src/components/ContextMenu.scss

@@ -34,6 +34,13 @@
     grid-template-columns: 1fr 0.2fr;
     align-items: center;
 
+    &.checkmark::before {
+      position: absolute;
+      left: 6px;
+      margin-bottom: 1px;
+      content: "\2713";
+    }
+
     &.dangerous {
       div:nth-child(1) {
         color: $oc-red-7;

src/components/ContextMenu.tsx

@@ -10,6 +10,7 @@ import {
 } from "../actions/shortcuts";
 
 type ContextMenuOption = {
+  checked?: boolean;
   shortcutName: ShortcutName;
   label: string;
   action(): void;
@@ -42,12 +43,12 @@ const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => {
           className="context-menu"
           onContextMenu={(event) => event.preventDefault()}
         >
-          {options.map(({ action, shortcutName, label }, idx) => (
+          {options.map(({ action, checked, shortcutName, label }, idx) => (
             <li data-testid={shortcutName} key={idx} onClick={onCloseRequest}>
               <button
-                className={`context-menu-option ${
-                  shortcutName === "delete" ? "dangerous" : ""
-                }`}
+                className={`context-menu-option 
+                ${shortcutName === "delete" ? "dangerous" : ""}
+                ${checked ? "checkmark" : ""}`}
                 onClick={action}
               >
                 <div>{label}</div>

src/components/ShortcutsDialog.tsx

@@ -219,7 +219,7 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
                 shortcuts={[getShortcutKey("Alt+Z")]}
               />
               <Shortcut
-                label={t("labels.toggleGridMode")}
+                label={t("labels.gridMode")}
                 shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
               />
             </ShortcutIsland>