From 2a8e562e98c4be9a18aa231f53b60092704d9983 Mon Sep 17 00:00:00 2001
From: Jilles Soeters <jilles.soeters@udemy.com>
Date: Wed, 15 Jan 2020 18:39:15 -0800
Subject: [PATCH] Add numeric hotkeys (#380)

* Add numeric hotkeys

* Nit: add space after comma
---
 src/index.tsx  | 4 ++--
 src/shapes.tsx | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 30f03466ff54..ef9dc52b3f03 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -433,14 +433,14 @@ export class App extends React.Component<{}, AppState> {
   private renderShapesSwitcher() {
     return (
       <>
-        {SHAPES.map(({ value, icon }) => (
+        {SHAPES.map(({ value, icon }, index) => (
           <ToolIcon
             key={value}
             type="radio"
             icon={icon}
             checked={this.state.elementType === value}
             name="editor-current-shape"
-            title={`${capitalizeString(value)} — ${capitalizeString(value)[0]}`}
+            title={`${capitalizeString(value)} — ${capitalizeString(value)[0]}, ${index + 1}`}
             onChange={() => {
               this.setState({ elementType: value });
               elements = clearSelection(elements);
diff --git a/src/shapes.tsx b/src/shapes.tsx
index 17a40be9f48b..7be709f52794 100644
--- a/src/shapes.tsx
+++ b/src/shapes.tsx
@@ -74,12 +74,14 @@ export const SHAPES = [
   }
 ];
 
-export const shapesShortcutKeys = SHAPES.map(shape => shape.value[0]);
+export const shapesShortcutKeys = SHAPES.map((shape, index) => [
+    shape.value[0], (index + 1).toString()]
+).flat(1);
 
 export function findShapeByKey(key: string) {
   const defaultElement = "selection";
-  return SHAPES.reduce((element, shape) => {
-    if (shape.value[0] !== key) return element;
+  return SHAPES.reduce((element, shape, index) => {
+    if (shape.value[0] !== key && key !== (index + 1).toString()) return element;
 
     return shape.value;
   }, defaultElement);