Fix ability to use arrow keys to navigate between shapes (#646)

This is the only way to navigate using the keyboard and was prevented by #596. Now it works fine.

Test Plan:
- Click on selection icon
- Use left/right arrow keys to move between tool icons, that works.

- Click on a shape, cmd+c
- Click on the selection icon
- Cmd+v, it pastes correctly

src/index.tsx

@@ -42,7 +42,13 @@ import { renderScene } from "./renderer";
 import { AppState } from "./types";
 import { ExcalidrawElement } from "./element/types";
 
-import { isInputLike, debounce, capitalizeString, distance } from "./utils";
+import {
+  isInputLike,
+  isToolIcon,
+  debounce,
+  capitalizeString,
+  distance,
+} from "./utils";
 import { KEYS, isArrowKey } from "./keys";
 
 import { findShapeByKey, shapesShortcutKeys, SHAPES } from "./shapes";
@@ -209,7 +215,7 @@ export class App extends React.Component<any, AppState> {
   };
 
   private onCut = (e: ClipboardEvent) => {
-    if (isInputLike(e.target)) return;
+    if (isInputLike(e.target) && !isToolIcon(e.target)) return;
     e.clipboardData?.setData(
       "text/plain",
       JSON.stringify(
@@ -223,7 +229,7 @@ export class App extends React.Component<any, AppState> {
     e.preventDefault();
   };
   private onCopy = (e: ClipboardEvent) => {
-    if (isInputLike(e.target)) return;
+    if (isInputLike(e.target) && !isToolIcon(e.target)) return;
     e.clipboardData?.setData(
       "text/plain",
       JSON.stringify(
@@ -235,7 +241,7 @@ export class App extends React.Component<any, AppState> {
     e.preventDefault();
   };
   private onPaste = (e: ClipboardEvent) => {
-    if (isInputLike(e.target)) return;
+    if (isInputLike(e.target) && !isToolIcon(e.target)) return;
     const paste = e.clipboardData?.getData("text") || "";
     this.addElementsFromPaste(paste);
     e.preventDefault();
@@ -329,7 +335,6 @@ export class App extends React.Component<any, AppState> {
   private onKeyDown = (event: KeyboardEvent) => {
     if (event.key === KEYS.ESCAPE && !this.state.draggingElement) {
       elements = clearSelection(elements);
-      this.setState({});
       this.setState({ elementType: "selection" });
       if (window.document.activeElement instanceof HTMLElement) {
         window.document.activeElement.blur();

src/utils.ts

@@ -30,11 +30,10 @@ export function isInputLike(
   | HTMLSelectElement
   | HTMLDivElement {
   return (
-    ((target instanceof HTMLElement && target.dataset.type === "wysiwyg") ||
+    (target instanceof HTMLElement && target.dataset.type === "wysiwyg") ||
     target instanceof HTMLInputElement ||
     target instanceof HTMLTextAreaElement ||
-      target instanceof HTMLSelectElement) &&
-    !isToolIcon(target)
+    target instanceof HTMLSelectElement
   );
 }