diff --git a/README.md b/README.md
index d5c74d8..86bfd0a 100644
--- a/README.md
+++ b/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
+## Keyboard Shortcuts
+
+| Shortcut | Description |
+| ------------------------------- | ------------------- |
+| Ctrl + F | Focus on search bar |
+| Shift + + | 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).
diff --git a/loom-editor/package-lock.json b/loom-editor/package-lock.json
index d5ea508..3c450fc 100644
--- a/loom-editor/package-lock.json
+++ b/loom-editor/package-lock.json
@@ -6455,6 +6455,11 @@
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
"integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
},
+ "hotkeys-js": {
+ "version": "3.8.1",
+ "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.1.tgz",
+ "integrity": "sha512-YlhVQtyG9f1b7GhtzdhR0Pl+cImD1ZrKI6zYUa7QLd0zuThiL7RzZ+ANJyy7z+kmcCpNYBf5PjBa3CjiQ5PFpw=="
+ },
"hpack.js": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -10785,6 +10790,14 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",
"integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA=="
},
+ "react-hotkeys-hook": {
+ "version": "2.2.2",
+ "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-2.2.2.tgz",
+ "integrity": "sha512-5XBGCSleJZ7AzQ+wCoFeJj/myByIzqgR3D97xRNEQsGOsFvXLp4V8rbDbHceTqGq7WDjQmX96zegViz8U5CwMQ==",
+ "requires": {
+ "hotkeys-js": "3.8.1"
+ }
+ },
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/loom-editor/package.json b/loom-editor/package.json
index b3c0b6c..2aec60e 100644
--- a/loom-editor/package.json
+++ b/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"
},
diff --git a/loom-editor/src/components/App.tsx b/loom-editor/src/components/App.tsx
index 4fe063f..e96b401 100644
--- a/loom-editor/src/components/App.tsx
+++ b/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 = () => (
-