Show shortcut context menu (#2501)

Co-authored-by: rene_mbp <harryloveslearning@googlemail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/App.tsx

@@ -3592,16 +3592,19 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       ContextMenu.push({
         options: [
           navigator.clipboard && {
+            shortcutName: "paste",
             label: t("labels.paste"),
             action: () => this.pasteFromClipboard(null),
           },
           probablySupportsClipboardBlob &&
             elements.length > 0 && {
+              shortcutName: "copyAsPng",
               label: t("labels.copyAsPng"),
               action: this.copyToClipboardAsPng,
             },
           probablySupportsClipboardWriteText &&
             elements.length > 0 && {
+              shortcutName: "copyAsSvg",
               label: t("labels.copyAsSvg"),
               action: this.copyToClipboardAsSvg,
             },
@@ -3609,10 +3612,12 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             CANVAS_ONLY_ACTIONS.includes(action.name),
           ),
           {
+            shortcutName: "toggleGridMode",
             label: t("labels.toggleGridMode"),
             action: this.toggleGridMode,
           },
           {
+            shortcutName: "toggleStats",
             label: t("labels.toggleStats"),
             action: this.toggleStats,
           },
@@ -3630,22 +3635,27 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     ContextMenu.push({
       options: [
         {
+          shortcutName: "cut",
           label: t("labels.cut"),
           action: this.cutAll,
         },
         navigator.clipboard && {
+          shortcutName: "copy",
           label: t("labels.copy"),
           action: this.copyAll,
         },
         navigator.clipboard && {
+          shortcutName: "paste",
           label: t("labels.paste"),
           action: () => this.pasteFromClipboard(null),
         },
         probablySupportsClipboardBlob && {
+          shortcutName: "copyAsPng",
           label: t("labels.copyAsPng"),
           action: this.copyToClipboardAsPng,
         },
         probablySupportsClipboardWriteText && {
+          shortcutName: "copyAsSvg",
           label: t("labels.copyAsSvg"),
           action: this.copyToClipboardAsSvg,
         },

src/components/ContextMenu.scss

@@ -29,6 +29,18 @@
     background-color: transparent;
     border: none;
     white-space: nowrap;
+
+    display: grid;
+    grid-template-columns: 1fr 0.2fr;
+    div:nth-child(1) {
+      justify-self: start;
+      margin-inline-end: 20px;
+    }
+    div:nth-child(2) {
+      justify-self: end;
+      opacity: 0.6;
+      font-size: 0.7rem;
+    }
   }
 
   .context-menu-option:hover {

src/components/ContextMenu.tsx

@@ -4,8 +4,13 @@ import clsx from "clsx";
 import { Popover } from "./Popover";
 
 import "./ContextMenu.scss";
+import {
+  getShortcutFromShortcutName,
+  ShortcutName,
+} from "../actions/shortcuts";
 
 type ContextMenuOption = {
+  shortcutName: ShortcutName;
   label: string;
   action(): void;
 };
@@ -38,10 +43,15 @@ const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => {
           className="context-menu"
           onContextMenu={(event) => event.preventDefault()}
         >
-          {options.map(({ action, label }, idx) => (
-            <li key={idx} onClick={onCloseRequest}>
+          {options.map(({ action, shortcutName, label }, idx) => (
+            <li data-testid={shortcutName} key={idx} onClick={onCloseRequest}>
               <button className="context-menu-option" onClick={action}>
-                {label}
+                <div>{label}</div>
+                <div>
+                  {shortcutName
+                    ? getShortcutFromShortcutName(shortcutName)
+                    : ""}
+                </div>
               </button>
             </li>
           ))}