Add more shortcuts and minor refactor (#1347)

src/components/ShortcutsDialog.tsx

@@ -4,16 +4,37 @@ import { isDarwin } from "../keys";
 import { Dialog } from "./Dialog";
 import { getShortcutKey } from "../utils";
 
+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
     style={{
-      width: "49%",
       border: "1px solid #ced4da",
       marginBottom: "16px",
-      height: "-webkit-fill-available",
     }}
   >
     <h3
@@ -147,14 +168,8 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
         onCloseRequest={handleClose}
         title={t("shortcutsDialog.title")}
       >
-        <div
+        <Columns>
-          style={{
+          <Column>
-            display: "flex",
-            flexDirection: "row",
-            flexWrap: "wrap",
-            justifyContent: "space-between",
-          }}
-        >
             <ShortcutIsland caption={t("shortcutsDialog.shapes")}>
               <Shortcut label={t("toolBar.selection")} shortcuts={["S", "1"]} />
               <Shortcut label={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
@@ -163,6 +178,20 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
               <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
               <Shortcut label={t("toolBar.line")} shortcuts={["L", "6"]} />
               <Shortcut label={t("toolBar.text")} shortcuts={["T", "7"]} />
+              <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={[
@@ -185,6 +214,26 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
               />
               <Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} />
             </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("buttons.toggleFullScreen")}
+                shortcuts={["F"]}
+              />
+            </ShortcutIsland>
+          </Column>
+          <Column>
             <ShortcutIsland caption={t("shortcutsDialog.editor")}>
               <Shortcut
                 label={t("labels.selectAll")}
@@ -242,23 +291,17 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
                 label={t("labels.duplicateSelection")}
                 shortcuts={[getShortcutKey("CtrlOrCmd+D")]}
               />
+              <Shortcut
+                label={t("buttons.undo")}
+                shortcuts={[getShortcutKey("CtrlOrCmd+Z")]}
+              />
+              <Shortcut
+                label={t("buttons.redo")}
+                shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Z")]}
+              />
             </ShortcutIsland>
-          <ShortcutIsland caption={t("shortcutsDialog.view")}>
+          </Column>
-            <Shortcut
+        </Columns>
-              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("buttons.toggleFullScreen")} shortcuts={["F"]} />
-          </ShortcutIsland>
-        </div>
         <Footer />
       </Dialog>
     </>

src/locales/en.json

@@ -146,6 +146,8 @@
     "view": "View",
     "blog": "Read our blog",
     "howto": "Follow our guides",
-    "github": "Found an issue? Submit"
+    "github": "Found an issue? Submit",
+    "textNewLine": "Add new line (text)",
+    "textFinish": "Finish editing (text)"
   }
 }

src/utils.ts

@@ -162,7 +162,8 @@ export const getShortcutKey = (shortcut: string): string => {
       .replace("Alt+", "⌥")
       .replace("Ctrl+", "⌃")
       .replace("Shift+", "⇧")
-      .replace("Del", "⌫")}`;
+      .replace("Del", "⌫")
+      .replace("Enter", "Return")}`;
   }
   return `${shortcut.replace("CtrlOrCmd", "Ctrl")}`;
 };