Show shortcuts dialog when pressing `?` (#1224)

src/appState.ts

@@ -39,6 +39,7 @@ export function getDefaultAppState(): AppState {
     selectedElementIds: {},
     collaborators: new Map(),
     shouldCacheIgnoreZoom: false,
+    showShortcutsDialog: false,
   };
 }
 
@@ -55,6 +56,7 @@ export function clearAppStateForLocalStorage(appState: AppState) {
     isCollaborating,
     isLoading,
     errorMessage,
+    showShortcutsDialog,
     ...exportedState
   } = appState;
   return exportedState;

src/components/App.tsx

@@ -1006,6 +1006,12 @@ export class App extends React.Component<any, AppState> {
       return;
     }
 
+    if (event.key === KEYS.QUESTION_MARK) {
+      this.setState({
+        showShortcutsDialog: true,
+      });
+    }
+
     if (event.code === "KeyC" && event.altKey && event.shiftKey) {
       this.copyToClipboardAsPng();
       event.preventDefault();

src/components/LayerUI.tsx

@@ -23,6 +23,7 @@ import { ZoomActions, SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
 import { RoomDialog } from "./RoomDialog";
 import { ErrorDialog } from "./ErrorDialog";
+import { ShortcutsDialog } from "./ShortcutsDialog";
 import { LoadingMessage } from "./LoadingMessage";
 
 interface LayerUIProps {
@@ -112,6 +113,11 @@ export const LayerUI = React.memo(
             onClose={() => setAppState({ errorMessage: null })}
           />
         )}
+        {appState.showShortcutsDialog && (
+          <ShortcutsDialog
+            onClose={() => setAppState({ showShortcutsDialog: null })}
+          />
+        )}
         <FixedSideContainer side="top">
           <HintViewer appState={appState} elements={elements} />
           <div className="App-menu App-menu_top">

src/components/Modal.tsx

@@ -28,7 +28,14 @@ export function Modal(props: {
       aria-labelledby={props.labelledBy}
     >
       <div className="Modal__background" onClick={props.onCloseRequest}></div>
-      <div className="Modal__content" style={{ maxWidth: props.maxWidth }}>
+      <div
+        className="Modal__content"
+        style={{
+          maxWidth: props.maxWidth,
+          maxHeight: "100%",
+          overflowY: "scroll",
+        }}
+      >
         {props.children}
       </div>
     </div>,

src/components/ShortcutsDialog.tsx

@@ -0,0 +1,228 @@
+import React from "react";
+import { t } from "../i18n";
+import { isDarwin } from "../keys";
+import { Dialog } from "./Dialog";
+import { getShortcutKey } from "../utils";
+
+const ShortcutIsland = (props: {
+  title: string;
+  children: React.ReactNode;
+}) => (
+  <div
+    style={{
+      width: "49%",
+      border: "1px solid #ced4da",
+      marginBottom: "16px",
+    }}
+    {...props}
+  >
+    <h3
+      style={{
+        margin: "0",
+        padding: "4px",
+        backgroundColor: "#e9ecef",
+        textAlign: "center",
+      }}
+    >
+      {props.title}
+    </h3>
+    {props.children}
+  </div>
+);
+
+const Shortcut = (props: { title: string; shortcuts: string[] }) => (
+  <div
+    style={{
+      borderTop: "1px solid #ced4da",
+    }}
+    {...props}
+  >
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        margin: "0",
+        padding: "4px",
+        alignItems: "center",
+      }}
+    >
+      <div
+        style={{
+          flexBasis: 0,
+          flexGrow: 2,
+          lineHeight: 1.4,
+        }}
+      >
+        {props.title}
+      </div>
+      <div
+        style={{
+          display: "flex",
+          flexBasis: 0,
+          flexGrow: 1,
+          justifyContent: "center",
+        }}
+      >
+        {props.shortcuts.map((shortcut) => (
+          <ShortcutKey>{shortcut}</ShortcutKey>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+const ShortcutKey = (props: { children: React.ReactNode }) => (
+  <span
+    style={{
+      border: "1px solid #ced4da",
+      padding: "2px 8px",
+      margin: "0 8px",
+      backgroundColor: "#e9ecef",
+      borderRadius: "2px",
+      fontSize: "0.8em",
+    }}
+    {...props}
+  />
+);
+
+const Footer = () => (
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      borderTop: "1px solid #ced4da",
+      marginTop: 8,
+      paddingTop: 16,
+    }}
+  >
+    <a
+      href="https://blog.excalidraw.com"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {t("shortcutsDialog.blog")}
+    </a>
+    <a
+      href="https://howto.excalidraw.com"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {t("shortcutsDialog.howto")}
+    </a>
+    <a
+      href="https://github.com/excalidraw/excalidraw/issues"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {t("shortcutsDialog.github")}
+    </a>
+  </div>
+);
+
+export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
+  const handleClose = React.useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+
+  return (
+    <>
+      <Dialog
+        maxWidth={800}
+        onCloseRequest={handleClose}
+        title={t("shortcutsDialog.title")}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: "wrap",
+            justifyContent: "space-between",
+          }}
+        >
+          <ShortcutIsland title={t("shortcutsDialog.shapes")}>
+            <Shortcut title={t("toolBar.selection")} shortcuts={["S", "1"]} />
+            <Shortcut title={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
+            <Shortcut title={t("toolBar.diamond")} shortcuts={["D", "3"]} />
+            <Shortcut title={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
+            <Shortcut title={t("toolBar.arrow")} shortcuts={["A", "5"]} />
+            <Shortcut title={t("toolBar.line")} shortcuts={["L", "6"]} />
+            <Shortcut title={t("toolBar.text")} shortcuts={["T", "7"]} />
+            <Shortcut title={t("toolBar.lock")} shortcuts={["Q"]} />
+          </ShortcutIsland>
+          <ShortcutIsland title={t("shortcutsDialog.editor")}>
+            <Shortcut
+              title={t("labels.copy")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+C", "")]}
+            />
+            <Shortcut
+              title={t("labels.paste")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+V", "")]}
+            />
+            <Shortcut
+              title={t("labels.copyAsPng")}
+              shortcuts={[getShortcutKey("Shift+Alt+C", "")]}
+            />
+            <Shortcut
+              title={t("labels.copyStyles")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+C", "")]}
+            />
+            <Shortcut
+              title={t("labels.pasteStyles")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+V", "")]}
+            />
+            <Shortcut
+              title={t("labels.delete")}
+              shortcuts={[getShortcutKey("Del", "")]}
+            />
+            <Shortcut
+              title={t("labels.sendToBack")}
+              shortcuts={[
+                isDarwin
+                  ? getShortcutKey("CtrlOrCmd+Alt+[", "")
+                  : getShortcutKey("CtrlOrCmd+Shift+[", ""),
+              ]}
+            />
+            <Shortcut
+              title={t("labels.bringToFront")}
+              shortcuts={[
+                isDarwin
+                  ? getShortcutKey("CtrlOrCmd+Alt+]", "")
+                  : getShortcutKey("CtrlOrCmd+Shift+]", ""),
+              ]}
+            />
+            <Shortcut
+              title={t("labels.sendBackward")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+[", "")]}
+            />
+            <Shortcut
+              title={t("labels.bringForward")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+]", "")]}
+            />
+            <Shortcut
+              title={t("labels.duplicateSelection")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+D", "")]}
+            />
+          </ShortcutIsland>
+          <ShortcutIsland title={t("shortcutsDialog.view")}>
+            <Shortcut
+              title={t("buttons.zoomIn")}
+              shortcuts={[getShortcutKey("CtrlOrCmd++", "")]}
+            />
+            <Shortcut
+              title={t("buttons.zoomOut")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+-", "")]}
+            />
+            <Shortcut
+              title={t("buttons.resetZoom")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+0", "")]}
+            />
+          </ShortcutIsland>
+        </div>
+        <Footer />
+      </Dialog>
+    </>
+  );
+};

src/keys.ts

@@ -12,6 +12,7 @@ export const KEYS = {
   CTRL_OR_CMD: isDarwin ? "metaKey" : "ctrlKey",
   TAB: "Tab",
   SPACE: " ",
+  QUESTION_MARK: "?",
 } as const;
 
 export type Key = keyof typeof KEYS;

src/locales/en.json

@@ -127,5 +127,14 @@
   },
   "errorDialog": {
     "title": "Error"
+  },
+  "shortcutsDialog": {
+    "title": "Keyboard shortcuts",
+    "shapes": "Shapes",
+    "editor": "Editor",
+    "view": "View",
+    "blog": "Read our blog",
+    "howto": "Follow our guides",
+    "github": "Found an issue? Submit"
   }
 }

src/styles.scss

@@ -22,6 +22,16 @@ body {
   cursor: text;
 }
 
+a {
+  font-weight: 500;
+  text-decoration: none;
+  color: #1c7ed6; /* OC Blue 7 */
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 canvas {
   touch-action: none;
   user-select: none;

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -37,6 +37,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -224,6 +225,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -335,6 +337,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -587,6 +590,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -735,6 +739,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -917,6 +922,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -1106,6 +1112,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -1386,6 +1393,7 @@ Object {
   "selectedElementIds": Object {},
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -1985,6 +1993,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -2096,6 +2105,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -2207,6 +2217,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -2318,6 +2329,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -2451,6 +2463,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -2584,6 +2597,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -2717,6 +2731,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -2828,6 +2843,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -2939,6 +2955,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -3072,6 +3089,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -3183,6 +3201,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": true,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -3252,6 +3271,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -3930,6 +3950,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -4291,6 +4312,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -4580,6 +4602,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -4797,6 +4820,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -4958,6 +4982,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -5607,6 +5632,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -6184,6 +6210,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -6689,6 +6716,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -7123,6 +7151,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -7520,6 +7549,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -7845,6 +7875,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -8098,6 +8129,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -8295,6 +8327,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -8980,6 +9013,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -9593,6 +9627,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -10134,6 +10169,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -10599,6 +10635,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -10838,6 +10875,7 @@ Object {
   "selectedElementIds": Object {},
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -10891,6 +10929,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": true,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -10944,6 +10983,7 @@ Object {
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
@@ -11225,6 +11265,7 @@ Object {
   "selectedElementIds": Object {},
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }

src/types.ts

@@ -56,6 +56,7 @@ export type AppState = {
     }
   >;
   shouldCacheIgnoreZoom: boolean;
+  showShortcutsDialog: boolean;
 };
 
 export type PointerCoords = Readonly<{

src/utils.ts

@@ -144,16 +144,17 @@ export function resetCursor() {
   document.documentElement.style.cursor = "";
 }
 
-export const getShortcutKey = (shortcut: string): string => {
+export const getShortcutKey = (shortcut: string, prefix = " — "): string => {
   const isMac = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
   if (isMac) {
-    return ` — ${shortcut
+    return `${prefix}${shortcut
       .replace("CtrlOrCmd+", "⌘")
       .replace("Alt+", "⌥")
       .replace("Ctrl+", "⌃")
-      .replace("Shift+", "⇧")}`;
+      .replace("Shift+", "⇧")
+      .replace("Del", "⌫")}`;
   }
-  return ` — ${shortcut.replace("CtrlOrCmd", "Ctrl")}`;
+  return `${prefix}${shortcut.replace("CtrlOrCmd", "Ctrl")}`;
 };
 export function viewportCoordsToSceneCoords(
   { clientX, clientY }: { clientX: number; clientY: number },