Button for shortcuts (#1253)

src/actions/actionMenu.tsx

@@ -6,6 +6,7 @@ import { showSelectedShapeActions } from "../element";
 import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { KEYS } from "../keys";
+import { HelpIcon } from "../components/HelpIcon";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
@@ -63,3 +64,20 @@ export const actionFullScreen = register({
   },
   keyTest: (event) => event.keyCode === KEYS.F_KEY_CODE,
 });
+
+export const actionShortcuts = register({
+  name: "toggleShortcuts",
+  perform: (_elements, appState) => {
+    return {
+      appState: {
+        ...appState,
+        showShortcutsDialog: true,
+      },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ updateData }) => (
+    <HelpIcon title={t("buttons.showShortcuts")} onClick={updateData} />
+  ),
+  keyTest: (event) => event.key === KEYS.QUESTION_MARK,
+});

src/actions/index.ts

@@ -40,4 +40,5 @@ export {
   actionToggleCanvasMenu,
   actionToggleEditMenu,
   actionFullScreen,
+  actionShortcuts,
 } from "./actionMenu";

src/actions/types.ts

@@ -49,7 +49,8 @@ export type ActionName =
   | "zoomOut"
   | "resetZoom"
   | "changeFontFamily"
-  | "toggleFullScreen";
+  | "toggleFullScreen"
+  | "toggleShortcuts";
 
 export interface Action {
   name: ActionName;