feat: add more tag hot keys (#47)

src/react/components/common/tagInput/tagIndexKeys.ts

@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+export const tagIndexKeys: string[] = [
+    "1", "2", "3", "4", "5", "6", "7", "8", "9", "0",
+    "q", "w", "e", "r", "t", "y", "u", "i", "o", "p",
+    "a", "s", "d", "f", "g", "h", "j", "k", "l",
+    "z", "x", "c", "v", "b", "n", "m",
+];

src/react/components/common/tagInput/tagInputItem.tsx

@@ -6,6 +6,7 @@ import { FontIcon, IconButton } from "office-ui-fabric-react";
 import { ITag, ILabel, FieldType, FieldFormat } from "../../../../models/applicationState";
 import { strings } from "../../../../common/strings";
 import TagInputItemLabel from "./tagInputItemLabel";
+import { tagIndexKeys } from "./tagIndexKeys";
 
 export interface ITagClickProps {
     ctrlKey?: boolean;
@@ -248,8 +249,10 @@ export default class TagInputItem extends React.Component<ITagInputItemProps, IT
 
     private getDisplayIndex = () => {
         const index = this.props.index;
-        const displayIndex = (index === 9) ? 0 : index + 1;
-        return (displayIndex < 10) ? displayIndex : null;
+        if (index >= 0 && index < tagIndexKeys.length) {
+            return tagIndexKeys[index];
+        }
+        return null;
     }
 
     private isTypeOrFormatSpecified = () => {

src/react/components/pages/editorPage/canvas.tsx

@@ -156,7 +156,7 @@ export default class Canvas extends React.Component<ICanvasProps, ICanvasState>
                         key={"Delete"}
                         keyEventType={KeyEventType.KeyDown}
                         accelerators={["Delete", "Backspace", "Left", "ArrowLeft", "Right", "ArrowRight",
-                            "D", "d", "A", "a"]}
+                            "{", "[", "}", "]"]}
                         handler={this.handleKeyDown} />
                 <ImageMap
                     ref={(ref) => this.imageMap = ref}
@@ -813,8 +813,8 @@ export default class Canvas extends React.Component<ICanvasProps, ICanvasState>
                 this.nextPage();
                 break;
 
-            case "D":
-            case "d":
+            case "}":
+            case "]":
                 if (!this.pendingFlag) {
                     this.pendingFlag = true;
                     setTimeout(() => {
@@ -824,8 +824,8 @@ export default class Canvas extends React.Component<ICanvasProps, ICanvasState>
                 }
                 break;
 
-            case "A":
-            case "a":
+            case "{":
+            case "[":
                 if (!this.pendingFlag) {
                     this.pendingFlag = true;
                     setTimeout(() => {

src/react/components/pages/editorPage/editorPage.tsx

@@ -23,6 +23,7 @@ import { AssetPreview } from "../../common/assetPreview/assetPreview";
 import { KeyboardBinding } from "../../common/keyboardBinding/keyboardBinding";
 import { KeyEventType } from "../../common/keyboardManager/keyboardManager";
 import { TagInput } from "../../common/tagInput/tagInput";
+import { tagIndexKeys } from "../../common/tagInput/tagIndexKeys";
 import Canvas from "./canvas";
 import CanvasHelpers from "./canvasHelpers";
 import "./editorPage.scss";
@@ -184,7 +185,7 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
         return (
             <div className="editor-page">
                 {
-                    [...Array(10).keys()].map((index) =>
+                    tagIndexKeys.map((index) =>
                         (<KeyboardBinding
                             displayName={strings.editorPage.tags.hotKey.apply}
                             key={index}
@@ -413,22 +414,9 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
     }
 
     private getTagFromKeyboardEvent = (event: KeyboardEvent): ITag => {
-        let key = parseInt(event.key, 10);
-        if (isNaN(key)) {
-            try {
-                key = parseInt(event.key.split("+")[1], 10);
-            } catch (e) {
-                return;
-            }
-        }
-        let index: number;
+        const index = tagIndexKeys.indexOf(event.key);
         const tags = this.props.project.tags;
-        if (key === 0 && tags.length >= 10) {
-            index = 9;
-        } else if (key < 10) {
-            index = key - 1;
-        }
-        if (index < tags.length) {
+        if (index >= 0 && index < tags.length) {
             return tags[index];
         }
         return null;