feat: Change shortcuts menu to help menu (#2812)

Co-authored-by: Panayiotis Lipiridis <lipiridis@gmail.com>

src/actions/actionMenu.tsx

@@ -74,13 +74,13 @@ export const actionShortcuts = register({
     return {
       appState: {
         ...appState,
-        showShortcutsDialog: true,
+        showHelpDialog: true,
       },
       commitToHistory: false,
     };
   },
   PanelComponent: ({ updateData }) => (
-    <HelpIcon title={t("shortcutsDialog.title")} onClick={updateData} />
+    <HelpIcon title={t("helpDialog.title")} onClick={updateData} />
   ),
   keyTest: (event) => event.key === KEYS.QUESTION_MARK,
 });

src/actions/shortcuts.ts

@@ -34,7 +34,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   delete: [getShortcutKey("Del")],
   duplicateSelection: [
     getShortcutKey("CtrlOrCmd+D"),
-    getShortcutKey(`Alt+${t("shortcutsDialog.drag")}`),
+    getShortcutKey(`Alt+${t("helpDialog.drag")}`),
   ],
   sendBackward: [getShortcutKey("CtrlOrCmd+[")],
   bringForward: [getShortcutKey("CtrlOrCmd+]")],

src/appState.ts

@@ -63,7 +63,7 @@ export const getDefaultAppState = (): Omit<
     selectionElement: null,
     shouldAddWatermark: false,
     shouldCacheIgnoreZoom: false,
-    showShortcutsDialog: false,
+    showHelpDialog: false,
     showStats: false,
     startBoundElement: null,
     suggestedBindings: [],
@@ -142,7 +142,7 @@ const APP_STATE_STORAGE_CONF = (<
   selectionElement: { browser: false, export: false },
   shouldAddWatermark: { browser: true, export: false },
   shouldCacheIgnoreZoom: { browser: true, export: false },
-  showShortcutsDialog: { browser: false, export: false },
+  showHelpDialog: { browser: false, export: false },
   showStats: { browser: true, export: false },
   startBoundElement: { browser: false, export: false },
   suggestedBindings: { browser: false, export: false },

src/components/Actions.tsx

@@ -163,9 +163,9 @@ export const ShapesSwitcher = ({
     {SHAPES.map(({ value, icon, key }, index) => {
       const label = t(`toolBar.${value}`);
       const letter = typeof key === "string" ? key : key[0];
-      const shortcut = `${capitalizeString(letter)} ${t(
-        "shortcutsDialog.or",
-      )} ${index + 1}`;
+      const shortcut = `${capitalizeString(letter)} ${t("helpDialog.or")} ${
+        index + 1
+      }`;
       return (
         <ToolButton
           className="Shape"

src/components/App.tsx

@@ -1249,7 +1249,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
     if (event.key === KEYS.QUESTION_MARK) {
       this.setState({
-        showShortcutsDialog: true,
+        showHelpDialog: true,
       });
     }
 

src/components/Dialog.scss

@@ -15,6 +15,7 @@
     padding: calc(var(--space-factor) * 2);
     text-align: center;
     font-variant: small-caps;
+    font-size: 1.2em;
   }
 
   .Dialog__titleContent {

src/components/Dialog.tsx

@@ -80,7 +80,7 @@ export const Dialog = (props: {
       onCloseRequest={props.onCloseRequest}
     >
       <Island ref={setIslandNode}>
-        <h3 id="dialog-title" className="Dialog__title">
+        <h2 id="dialog-title" className="Dialog__title">
           <span className="Dialog__titleContent">{props.title}</span>
           <button
             className="Modal__close"
@@ -89,7 +89,7 @@ export const Dialog = (props: {
           >
             {useIsMobile() ? back : close}
           </button>
-        </h3>
+        </h2>
         <div className="Dialog__content">{props.children}</div>
       </Island>
     </Modal>

src/components/ShortcutsDialog.scss → src/components/HelpDialog.scss

@@ -1,23 +1,28 @@
 @import "../css/_variables";
 
 .excalidraw {
-  .ShortcutsDialog-island {
+  .HelpDialog h3 {
+    border-bottom: 1px solid var(--button-gray-2);
+    padding-bottom: 4px;
+  }
+
+  .HelpDialog--island {
     border: 1px solid var(--button-gray-2);
     margin-bottom: 16px;
   }
 
-  .ShortcutsDialog-island-title {
+  .HelpDialog--island-title {
     margin: 0;
     padding: 4px;
     background-color: var(--button-gray-1);
     text-align: center;
   }
 
-  .ShorcutsDialog-shortcut {
+  .HelpDialog--shortcut {
     border-top: 1px solid var(--button-gray-2);
   }
 
-  .ShorcutsDialog-key {
+  .HelpDialog--key {
     word-break: keep-all;
     border: 1px solid var(--button-gray-2);
     padding: 2px 8px;
@@ -32,12 +37,20 @@
     font-family: inherit;
   }
 
-  .ShortcutsDialog-footer {
+  .HelpDialog--header {
     display: flex;
     flex-direction: row;
     justify-content: space-evenly;
-    border-top: 1px solid var(--button-gray-2);
-    margin-top: 8px;
-    padding-top: 16px;
+    margin-bottom: 32px;
+    padding-bottom: 16px;
+  }
+
+  .HelpDialog--btn {
+    border: 1px solid var(--link-color);
+    padding: 8px 32px;
+    border-radius: 4px;
+  }
+  .HelpDialog--btn:hover {
+    text-decoration: none;
   }
 }

src/components/HelpDialog.tsx

@@ -0,0 +1,348 @@
+import React from "react";
+import { t } from "../i18n";
+import { isDarwin } from "../keys";
+import { Dialog } from "./Dialog";
+import { getShortcutKey } from "../utils";
+import "./HelpDialog.scss";
+
+const Header = () => (
+  <div className="HelpDialog--header">
+    <a
+      className="HelpDialog--btn"
+      href="https://github.com/excalidraw/excalidraw#documentation"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {t("helpDialog.documentation")}
+    </a>
+    <a
+      className="HelpDialog--btn"
+      href="https://blog.excalidraw.com"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {t("helpDialog.blog")}
+    </a>
+    <a
+      className="HelpDialog--btn"
+      href="https://github.com/excalidraw/excalidraw/issues"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {t("helpDialog.github")}
+    </a>
+  </div>
+);
+
+const Section = (props: { title: string; children: React.ReactNode }) => (
+  <>
+    <h3>{props.title}</h3>
+    {props.children}
+  </>
+);
+
+const Columns = (props: { children: React.ReactNode }) => (
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "space-between",
+    }}
+  >
+    {props.children}
+  </div>
+);
+
+const Column = (props: { children: React.ReactNode }) => (
+  <div style={{ width: "49%" }}>{props.children}</div>
+);
+
+const ShortcutIsland = (props: {
+  caption: string;
+  children: React.ReactNode;
+}) => (
+  <div className="HelpDialog--island">
+    <h3 className="HelpDialog--island-title">{props.caption}</h3>
+    {props.children}
+  </div>
+);
+
+const Shortcut = (props: {
+  label: string;
+  shortcuts: string[];
+  isOr: boolean;
+}) => {
+  return (
+    <div className="HelpDialog--shortcut">
+      <div
+        style={{
+          display: "flex",
+          margin: "0",
+          padding: "4px 8px",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            lineHeight: 1.4,
+          }}
+        >
+          {props.label}
+        </div>
+        <div
+          style={{
+            display: "flex",
+            flex: "0 0 auto",
+            justifyContent: "flex-end",
+            marginInlineStart: "auto",
+            minWidth: "30%",
+          }}
+        >
+          {props.shortcuts.map((shortcut, index) => (
+            <React.Fragment key={index}>
+              <ShortcutKey>{shortcut}</ShortcutKey>
+              {props.isOr &&
+                index !== props.shortcuts.length - 1 &&
+                t("helpDialog.or")}
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Shortcut.defaultProps = {
+  isOr: true,
+};
+
+const ShortcutKey = (props: { children: React.ReactNode }) => (
+  <kbd className="HelpDialog--key" {...props} />
+);
+
+export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
+  const handleClose = React.useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+
+  return (
+    <>
+      <Dialog
+        onCloseRequest={handleClose}
+        title={t("helpDialog.title")}
+        className={"HelpDialog"}
+      >
+        <Header />
+        <Section title={t("helpDialog.shortcuts")}>
+          <Columns>
+            <Column>
+              <ShortcutIsland caption={t("helpDialog.shapes")}>
+                <Shortcut
+                  label={t("toolBar.selection")}
+                  shortcuts={["V", "1"]}
+                />
+                <Shortcut
+                  label={t("toolBar.rectangle")}
+                  shortcuts={["R", "2"]}
+                />
+                <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
+                <Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
+                <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
+                <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
+                <Shortcut
+                  label={t("toolBar.draw")}
+                  shortcuts={["Shift+P", "7"]}
+                />
+                <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
+                <Shortcut
+                  label={t("helpDialog.textNewLine")}
+                  shortcuts={[
+                    getShortcutKey("Enter"),
+                    getShortcutKey("Shift+Enter"),
+                  ]}
+                />
+                <Shortcut
+                  label={t("helpDialog.textFinish")}
+                  shortcuts={[
+                    getShortcutKey("Esc"),
+                    getShortcutKey("CtrlOrCmd+Enter"),
+                  ]}
+                />
+                <Shortcut
+                  label={t("helpDialog.curvedArrow")}
+                  shortcuts={[
+                    "A",
+                    t("helpDialog.click"),
+                    t("helpDialog.click"),
+                    t("helpDialog.click"),
+                  ]}
+                  isOr={false}
+                />
+                <Shortcut
+                  label={t("helpDialog.curvedLine")}
+                  shortcuts={[
+                    "L",
+                    t("helpDialog.click"),
+                    t("helpDialog.click"),
+                    t("helpDialog.click"),
+                  ]}
+                  isOr={false}
+                />
+                <Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} />
+                <Shortcut
+                  label={t("helpDialog.preventBinding")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd")]}
+                />
+              </ShortcutIsland>
+              <ShortcutIsland caption={t("helpDialog.view")}>
+                <Shortcut
+                  label={t("buttons.zoomIn")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd++")]}
+                />
+                <Shortcut
+                  label={t("buttons.zoomOut")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+-")]}
+                />
+                <Shortcut
+                  label={t("buttons.resetZoom")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+0")]}
+                />
+                <Shortcut
+                  label={t("helpDialog.zoomToFit")}
+                  shortcuts={["Shift+1"]}
+                />
+                <Shortcut
+                  label={t("helpDialog.zoomToSelection")}
+                  shortcuts={["Shift+2"]}
+                />
+                <Shortcut label={t("buttons.fullScreen")} shortcuts={["F"]} />
+                <Shortcut
+                  label={t("buttons.zenMode")}
+                  shortcuts={[getShortcutKey("Alt+Z")]}
+                />
+                <Shortcut
+                  label={t("labels.gridMode")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
+                />
+              </ShortcutIsland>
+            </Column>
+            <Column>
+              <ShortcutIsland caption={t("helpDialog.editor")}>
+                <Shortcut
+                  label={t("labels.selectAll")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+A")]}
+                />
+                <Shortcut
+                  label={t("labels.multiSelect")}
+                  shortcuts={[getShortcutKey(`Shift+${t("helpDialog.click")}`)]}
+                />
+                <Shortcut
+                  label={t("labels.moveCanvas")}
+                  shortcuts={[
+                    getShortcutKey(`Space+${t("helpDialog.drag")}`),
+                    getShortcutKey(`Wheel+${t("helpDialog.drag")}`),
+                  ]}
+                  isOr={true}
+                />
+                <Shortcut
+                  label={t("labels.cut")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+X")]}
+                />
+                <Shortcut
+                  label={t("labels.copy")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+C")]}
+                />
+                <Shortcut
+                  label={t("labels.paste")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+V")]}
+                />
+                <Shortcut
+                  label={t("labels.copyAsPng")}
+                  shortcuts={[getShortcutKey("Shift+Alt+C")]}
+                />
+                <Shortcut
+                  label={t("labels.copyStyles")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Alt+C")]}
+                />
+                <Shortcut
+                  label={t("labels.pasteStyles")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Alt+V")]}
+                />
+                <Shortcut
+                  label={t("labels.delete")}
+                  shortcuts={[getShortcutKey("Del")]}
+                />
+                <Shortcut
+                  label={t("labels.sendToBack")}
+                  shortcuts={[
+                    isDarwin
+                      ? getShortcutKey("CtrlOrCmd+Alt+[")
+                      : getShortcutKey("CtrlOrCmd+Shift+["),
+                  ]}
+                />
+                <Shortcut
+                  label={t("labels.bringToFront")}
+                  shortcuts={[
+                    isDarwin
+                      ? getShortcutKey("CtrlOrCmd+Alt+]")
+                      : getShortcutKey("CtrlOrCmd+Shift+]"),
+                  ]}
+                />
+                <Shortcut
+                  label={t("labels.sendBackward")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+[")]}
+                />
+                <Shortcut
+                  label={t("labels.bringForward")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+]")]}
+                />
+                <Shortcut
+                  label={t("labels.alignTop")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Up")]}
+                />
+                <Shortcut
+                  label={t("labels.alignBottom")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Down")]}
+                />
+                <Shortcut
+                  label={t("labels.alignLeft")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Left")]}
+                />
+                <Shortcut
+                  label={t("labels.alignRight")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Right")]}
+                />
+                <Shortcut
+                  label={t("labels.duplicateSelection")}
+                  shortcuts={[
+                    getShortcutKey("CtrlOrCmd+D"),
+                    getShortcutKey(`Alt+${t("helpDialog.drag")}`),
+                  ]}
+                />
+                <Shortcut
+                  label={t("buttons.undo")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Z")]}
+                />
+                <Shortcut
+                  label={t("buttons.redo")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Z")]}
+                />
+                <Shortcut
+                  label={t("labels.group")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+G")]}
+                />
+                <Shortcut
+                  label={t("labels.ungroup")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+G")]}
+                />
+              </ShortcutIsland>
+            </Column>
+          </Columns>
+        </Section>
+      </Dialog>
+    </>
+  );
+};

src/components/HelpIcon.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { questionCircle } from "../components/icons";
 
 type HelpIconProps = {
   title?: string;
@@ -7,19 +8,8 @@ type HelpIconProps = {
   onClick?(): void;
 };
 
-const ICON = (
-  <svg
-    width="30"
-    height="22"
-    viewBox="0 0 512 512"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" />
-  </svg>
-);
-
 export const HelpIcon = (props: HelpIconProps) => (
   <label title={`${props.title} — ?`} className="help-icon">
-    <div onClick={props.onClick}>{ICON}</div>
+    <div onClick={props.onClick}>{questionCircle}</div>
   </label>
 );

src/components/LayerUI.tsx

@@ -36,7 +36,7 @@ import { LockIcon } from "./LockIcon";
 import { MobileMenu } from "./MobileMenu";
 import { PasteChartDialog } from "./PasteChartDialog";
 import { Section } from "./Section";
-import { ShortcutsDialog } from "./ShortcutsDialog";
+import { HelpDialog } from "./HelpDialog";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { Tooltip } from "./Tooltip";
@@ -566,10 +566,8 @@ const LayerUI = ({
           onClose={() => setAppState({ errorMessage: null })}
         />
       )}
-      {appState.showShortcutsDialog && (
-        <ShortcutsDialog
-          onClose={() => setAppState({ showShortcutsDialog: false })}
-        />
+      {appState.showHelpDialog && (
+        <HelpDialog onClose={() => setAppState({ showHelpDialog: false })} />
       )}
       {appState.pasteDialog.shown && (
         <PasteChartDialog

src/components/ShortcutsDialog.tsx

@@ -1,321 +0,0 @@
-import React from "react";
-import { t } from "../i18n";
-import { isDarwin } from "../keys";
-import { Dialog } from "./Dialog";
-import { getShortcutKey } from "../utils";
-import "./ShortcutsDialog.scss";
-
-const Columns = (props: { children: React.ReactNode }) => (
-  <div
-    style={{
-      display: "flex",
-      flexDirection: "row",
-      flexWrap: "wrap",
-      justifyContent: "space-between",
-    }}
-  >
-    {props.children}
-  </div>
-);
-
-const Column = (props: { children: React.ReactNode }) => (
-  <div style={{ width: "49%" }}>{props.children}</div>
-);
-
-const ShortcutIsland = (props: {
-  caption: string;
-  children: React.ReactNode;
-}) => (
-  <div className="ShortcutsDialog-island">
-    <h3 className="ShortcutsDialog-island-title">{props.caption}</h3>
-    {props.children}
-  </div>
-);
-
-const Shortcut = (props: {
-  label: string;
-  shortcuts: string[];
-  isOr: boolean;
-}) => {
-  return (
-    <div className="ShorcutsDialog-shortcut">
-      <div
-        style={{
-          display: "flex",
-          margin: "0",
-          padding: "4px 8px",
-          alignItems: "center",
-        }}
-      >
-        <div
-          style={{
-            lineHeight: 1.4,
-          }}
-        >
-          {props.label}
-        </div>
-        <div
-          style={{
-            display: "flex",
-            flex: "0 0 auto",
-            justifyContent: "flex-end",
-            marginInlineStart: "auto",
-            minWidth: "30%",
-          }}
-        >
-          {props.shortcuts.map((shortcut, index) => (
-            <React.Fragment key={index}>
-              <ShortcutKey>{shortcut}</ShortcutKey>
-              {props.isOr &&
-                index !== props.shortcuts.length - 1 &&
-                t("shortcutsDialog.or")}
-            </React.Fragment>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Shortcut.defaultProps = {
-  isOr: true,
-};
-
-const ShortcutKey = (props: { children: React.ReactNode }) => (
-  <kbd className="ShorcutsDialog-key" {...props} />
-);
-
-const Footer = () => (
-  <div className="ShortcutsDialog-footer">
-    <a
-      href="https://blog.excalidraw.com"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {t("shortcutsDialog.blog")}
-    </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 onCloseRequest={handleClose} title={t("shortcutsDialog.title")}>
-        <Columns>
-          <Column>
-            <ShortcutIsland caption={t("shortcutsDialog.shapes")}>
-              <Shortcut label={t("toolBar.selection")} shortcuts={["V", "1"]} />
-              <Shortcut label={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
-              <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
-              <Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
-              <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
-              <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
-              <Shortcut
-                label={t("toolBar.draw")}
-                shortcuts={["Shift+P", "7"]}
-              />
-              <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
-              <Shortcut
-                label={t("shortcutsDialog.textNewLine")}
-                shortcuts={[
-                  getShortcutKey("Enter"),
-                  getShortcutKey("Shift+Enter"),
-                ]}
-              />
-              <Shortcut
-                label={t("shortcutsDialog.textFinish")}
-                shortcuts={[
-                  getShortcutKey("Esc"),
-                  getShortcutKey("CtrlOrCmd+Enter"),
-                ]}
-              />
-              <Shortcut
-                label={t("shortcutsDialog.curvedArrow")}
-                shortcuts={[
-                  "A",
-                  t("shortcutsDialog.click"),
-                  t("shortcutsDialog.click"),
-                  t("shortcutsDialog.click"),
-                ]}
-                isOr={false}
-              />
-              <Shortcut
-                label={t("shortcutsDialog.curvedLine")}
-                shortcuts={[
-                  "L",
-                  t("shortcutsDialog.click"),
-                  t("shortcutsDialog.click"),
-                  t("shortcutsDialog.click"),
-                ]}
-                isOr={false}
-              />
-              <Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} />
-              <Shortcut
-                label={t("shortcutsDialog.preventBinding")}
-                shortcuts={[getShortcutKey("CtrlOrCmd")]}
-              />
-            </ShortcutIsland>
-            <ShortcutIsland caption={t("shortcutsDialog.view")}>
-              <Shortcut
-                label={t("buttons.zoomIn")}
-                shortcuts={[getShortcutKey("CtrlOrCmd++")]}
-              />
-              <Shortcut
-                label={t("buttons.zoomOut")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+-")]}
-              />
-              <Shortcut
-                label={t("buttons.resetZoom")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+0")]}
-              />
-              <Shortcut
-                label={t("shortcutsDialog.zoomToFit")}
-                shortcuts={["Shift+1"]}
-              />
-              <Shortcut
-                label={t("shortcutsDialog.zoomToSelection")}
-                shortcuts={["Shift+2"]}
-              />
-              <Shortcut label={t("buttons.fullScreen")} shortcuts={["F"]} />
-              <Shortcut
-                label={t("buttons.zenMode")}
-                shortcuts={[getShortcutKey("Alt+Z")]}
-              />
-              <Shortcut
-                label={t("labels.gridMode")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
-              />
-            </ShortcutIsland>
-          </Column>
-          <Column>
-            <ShortcutIsland caption={t("shortcutsDialog.editor")}>
-              <Shortcut
-                label={t("labels.selectAll")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+A")]}
-              />
-              <Shortcut
-                label={t("labels.multiSelect")}
-                shortcuts={[
-                  getShortcutKey(`Shift+${t("shortcutsDialog.click")}`),
-                ]}
-              />
-              <Shortcut
-                label={t("labels.moveCanvas")}
-                shortcuts={[
-                  getShortcutKey(`Space+${t("shortcutsDialog.drag")}`),
-                  getShortcutKey(`Wheel+${t("shortcutsDialog.drag")}`),
-                ]}
-                isOr={true}
-              />
-              <Shortcut
-                label={t("labels.cut")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+X")]}
-              />
-              <Shortcut
-                label={t("labels.copy")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+C")]}
-              />
-              <Shortcut
-                label={t("labels.paste")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+V")]}
-              />
-              <Shortcut
-                label={t("labels.copyAsPng")}
-                shortcuts={[getShortcutKey("Shift+Alt+C")]}
-              />
-              <Shortcut
-                label={t("labels.copyStyles")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Alt+C")]}
-              />
-              <Shortcut
-                label={t("labels.pasteStyles")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Alt+V")]}
-              />
-              <Shortcut
-                label={t("labels.delete")}
-                shortcuts={[getShortcutKey("Del")]}
-              />
-              <Shortcut
-                label={t("labels.sendToBack")}
-                shortcuts={[
-                  isDarwin
-                    ? getShortcutKey("CtrlOrCmd+Alt+[")
-                    : getShortcutKey("CtrlOrCmd+Shift+["),
-                ]}
-              />
-              <Shortcut
-                label={t("labels.bringToFront")}
-                shortcuts={[
-                  isDarwin
-                    ? getShortcutKey("CtrlOrCmd+Alt+]")
-                    : getShortcutKey("CtrlOrCmd+Shift+]"),
-                ]}
-              />
-              <Shortcut
-                label={t("labels.sendBackward")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+[")]}
-              />
-              <Shortcut
-                label={t("labels.bringForward")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+]")]}
-              />
-              <Shortcut
-                label={t("labels.alignTop")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Up")]}
-              />
-              <Shortcut
-                label={t("labels.alignBottom")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Down")]}
-              />
-              <Shortcut
-                label={t("labels.alignLeft")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Left")]}
-              />
-              <Shortcut
-                label={t("labels.alignRight")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Right")]}
-              />
-              <Shortcut
-                label={t("labels.duplicateSelection")}
-                shortcuts={[
-                  getShortcutKey("CtrlOrCmd+D"),
-                  getShortcutKey(`Alt+${t("shortcutsDialog.drag")}`),
-                ]}
-              />
-              <Shortcut
-                label={t("buttons.undo")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Z")]}
-              />
-              <Shortcut
-                label={t("buttons.redo")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Z")]}
-              />
-              <Shortcut
-                label={t("labels.group")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+G")]}
-              />
-              <Shortcut
-                label={t("labels.ungroup")}
-                shortcuts={[getShortcutKey("CtrlOrCmd+Shift+G")]}
-              />
-            </ShortcutIsland>
-          </Column>
-        </Columns>
-        <Footer />
-      </Dialog>
-    </>
-  );
-};

src/css/styles.scss

@@ -13,7 +13,7 @@
   a {
     font-weight: 500;
     text-decoration: none;
-    color: $oc-blue-7; /* OC Blue 7 */
+    color: var(--link-color);
 
     &:hover {
       text-decoration: underline;
@@ -431,6 +431,7 @@
     cursor: pointer;
     fill: $oc-gray-6;
     bottom: 14px;
+    width: 1.5rem;
 
     :root[dir="ltr"] & {
       right: 14px;

src/css/theme.scss

@@ -32,6 +32,7 @@
   --popup-text-color: #{$oc-black};
   --popup-text-inverted-color: #{$oc-white};
   --dialog-border: #{$oc-gray-6};
+  --link-color: #{$oc-blue-7};
 }
 
 .excalidraw {

src/locales/en.json

@@ -199,24 +199,26 @@
   "errorDialog": {
     "title": "Error"
   },
-  "shortcutsDialog": {
-    "title": "Keyboard shortcuts",
-    "shapes": "Shapes",
-    "or": "or",
+  "helpDialog": {
+    "blog": "Read our blog",
     "click": "click",
-    "drag": "drag",
     "curvedArrow": "Curved arrow",
     "curvedLine": "Curved line",
+    "documentation": "Documentation",
+    "drag": "drag",
     "editor": "Editor",
-    "view": "View",
-    "blog": "Read our blog",
-    "howto": "Follow our guides",
     "github": "Found an issue? Submit",
-    "textNewLine": "Add new line (text)",
+    "howto": "Follow our guides",
+    "or": "or",
+    "preventBinding": "Prevent arrow binding",
+    "shapes": "Shapes",
+    "shortcuts": "Keyboard shortcuts",
     "textFinish": "Finish editing (text)",
+    "textNewLine": "Add new line (text)",
+    "title": "Help",
+    "view": "View",
     "zoomToFit": "Zoom to fit all elements",
-    "zoomToSelection": "Zoom to selection",
-    "preventBinding": "Prevent arrow binding"
+    "zoomToSelection": "Zoom to selection"
   },
   "encrypted": {
     "tooltip": "Your drawings are end-to-end encrypted so Excalidraw's servers will never see them."

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

@@ -70,7 +70,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -536,7 +536,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -984,7 +984,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -1760,7 +1760,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -1967,7 +1967,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -2418,7 +2418,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -2666,7 +2666,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -2831,7 +2831,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -3303,7 +3303,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -3612,7 +3612,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -3816,7 +3816,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -4056,7 +4056,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -4307,7 +4307,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -4708,7 +4708,7 @@ Object {
   },
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -4979,7 +4979,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -5304,7 +5304,7 @@ Object {
   },
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -5488,7 +5488,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -5650,7 +5650,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -6108,7 +6108,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -6417,7 +6417,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -8454,7 +8454,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -8815,7 +8815,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -9066,7 +9066,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -9318,7 +9318,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -9626,7 +9626,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -9788,7 +9788,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -9950,7 +9950,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -10112,7 +10112,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -10304,7 +10304,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -10496,7 +10496,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -10688,7 +10688,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -10880,7 +10880,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -11042,7 +11042,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -11204,7 +11204,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -11396,7 +11396,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -11558,7 +11558,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -11761,7 +11761,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -12468,7 +12468,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -12715,7 +12715,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": true,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -12813,7 +12813,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -12913,7 +12913,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -13075,7 +13075,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -13381,7 +13381,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -13687,7 +13687,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -13847,7 +13847,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -14043,7 +14043,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -14296,7 +14296,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -14612,7 +14612,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -15449,7 +15449,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -15755,7 +15755,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -16065,7 +16065,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -16441,7 +16441,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -16612,7 +16612,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -16925,7 +16925,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -17165,7 +17165,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -17420,7 +17420,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -17735,7 +17735,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -17835,7 +17835,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -18008,7 +18008,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -18814,7 +18814,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -18916,7 +18916,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -19692,7 +19692,7 @@ Object {
   },
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -20093,7 +20093,7 @@ Object {
   },
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -20340,7 +20340,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": true,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -20440,7 +20440,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -20934,7 +20934,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],
@@ -21032,7 +21032,7 @@ Object {
   "selectionElement": null,
   "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
-  "showShortcutsDialog": false,
+  "showHelpDialog": false,
   "showStats": false,
   "startBoundElement": null,
   "suggestedBindings": Array [],

src/types.ts

@@ -81,7 +81,7 @@ export type AppState = {
   selectedElementIds: { [id: string]: boolean };
   previousSelectedElementIds: { [id: string]: boolean };
   shouldCacheIgnoreZoom: boolean;
-  showShortcutsDialog: boolean;
+  showHelpDialog: boolean;
   toastMessage: string | null;
   zenModeEnabled: boolean;
   appearance: "light" | "dark";