Add keyboard shortcuts (#7)

This adds Ctrl + F (focus on search bar) and Shift + + (add new node) keyboard shortcuts.

README.md

@@ -26,6 +26,7 @@ Yarn Loom is a Visual Studio Code extension for editing [yarn files](https://yar
       - [Quick tag search](#quick-tag-search)
     - [Switching between the graph editor and a text editor](#switching-between-the-graph-editor-and-a-text-editor)
     - [Theme support](#theme-support)
+  - [Keyboard Shortcuts](#keyboard-shortcuts)
   - [Special Thanks](#special-thanks)
 
 ## Installing
@@ -171,6 +172,13 @@ If there is a theme where something doesn't look right or is unreadable, please
   <img src="./images/theme-change.gif" alt="Demo of switching themes in Visual Studio Code" />
 </details>
 
+## Keyboard Shortcuts
+
+| Shortcut                        | Description         |
+| ------------------------------- | ------------------- |
+| <kbd>Ctrl</kbd> + <kbd>F</kbd>  | Focus on search bar |
+| <kbd>Shift</kbd> + <kbd>+</kbd> | Add new node        |
+
 ## Special Thanks
 
 The syntax highlighting portion of this extension was copied over from the [Yarn VSCode Extension](https://github.com/YarnSpinnerTool/VSCodeExtension) and all credit for it goes to [@desplesda](https://github.com/desplesda).

loom-editor/package.json

@@ -7,6 +7,7 @@
     "d3": "^5.16.0",
     "loom-common": "file:../loom-common/out",
     "react-d3-graph": "^2.5.0",
+    "react-hotkeys-hook": "^2.2.2",
     "react-scripts": "3.4.1",
     "typesafe-actions": "^5.1.0"
   },

loom-editor/src/components/App.tsx

@@ -1,21 +1,28 @@
 /** @jsx jsx */
 import { jsx, css } from "@emotion/core";
 import { FunctionComponent } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 
 import "./App.css";
 import NodeGraph from "./NodeGraph";
 import NodeSearch from "./NodeSearch";
+import { createNewNode } from "loom-common/EditorActions";
 
 const appStyle = css`
   width: 100%;
   height: 100%;
 `;
 
-const App: FunctionComponent = () => (
-  <div css={appStyle}>
-    <NodeSearch />
-    <NodeGraph />
-  </div>
-);
+const App: FunctionComponent = () => {
+  // shift and plus key add a new node (note that = is used since shift modifies it to be plus)
+  useHotkeys("shift+=", () => window.vsCodeApi.postMessage(createNewNode()));
+
+  return (
+    <div css={appStyle}>
+      <NodeSearch />
+      <NodeGraph />
+    </div>
+  );
+};
 
 export default App;

loom-editor/src/components/NodeSearch/SearchBox.tsx

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx, css } from "@emotion/core";
 import { FunctionComponent, useRef } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 
 import { ReactComponent as CaseSensitiveIcon } from "../../icons/case-sensitive.svg";
 import { ReactComponent as RegExIcon } from "../../icons/regex.svg";
@@ -106,6 +107,9 @@ const SearchBox: FunctionComponent = () => {
   // used to focus back on the input when clicking buttons in this box
   const inputRef = useRef<HTMLInputElement>(null);
 
+  // ctrl+f focuses on the input box
+  useHotkeys("ctrl+f", () => inputRef.current?.focus());
+
   if (!state) {
     return null;
   }

loom-extension/README.md

@@ -23,6 +23,7 @@ Yarn Loom is a Visual Studio Code extension for editing [yarn files](https://yar
       - [Quick tag search](#quick-tag-search)
     - [Switching between the graph editor and a text editor](#switching-between-the-graph-editor-and-a-text-editor)
     - [Theme support](#theme-support)
+  - [Keyboard Shortcuts](#keyboard-shortcuts)
   - [Special Thanks](#special-thanks)
 
 ## Usage
@@ -162,6 +163,13 @@ If there is a theme where something doesn't look right or is unreadable, please
   <img src="https://github.com/TranquilMarmot/YarnLoom/raw/main/images/theme-change.gif" alt="Demo of switching themes in Visual Studio Code" />
 </details>
 
+## Keyboard Shortcuts
+
+| Shortcut                        | Description         |
+| ------------------------------- | ------------------- |
+| <kbd>Ctrl</kbd> + <kbd>F</kbd>  | Focus on search bar |
+| <kbd>Shift</kbd> + <kbd>+</kbd> | Add new node        |
+
 ## Special Thanks
 
 The syntax highlighting portion of this extension was copied over from the [Yarn VSCode Extension](https://github.com/YarnSpinnerTool/VSCodeExtension) and all credit for it goes to [@desplesda](https://github.com/desplesda).