feat: add some basic keyboard shortcuts

apps/web/package.json

@@ -23,6 +23,7 @@
     "eventsource": "^1.0.7",
     "fast-sort": "^2.1.1",
     "framer-motion": "^3.3.0",
+    "hotkeys-js": "^3.8.3",
     "immer": "^8.0.1",
     "localforage": "^1.7.3",
     "localforage-getitems": "https://github.com/thecodrr/localForage-getItems.git",

apps/web/src/app-effects.js

@@ -7,6 +7,7 @@ import { resetReminders } from "./common/reminders";
 import { isUserPremium } from "./common";
 import { db } from "./common/db";
 import { CHECK_IDS, EV, EVENTS } from "notes-core/common";
+import { registerKeyMap } from "./common/key-map";
 
 function AppEffects({ isMobile, isTablet, setShow }) {
   const refreshColors = useStore((store) => store.refreshColors);
@@ -65,6 +66,7 @@ function AppEffects({ isMobile, isTablet, setShow }) {
         return { type, result: false };
       }
     });
+    registerKeyMap();
   }, []);
 
   useEffect(() => {

apps/web/src/common/key-map.js

@@ -0,0 +1,61 @@
+import hotkeys from "hotkeys-js";
+import { hashNavigate, navigate } from "../navigation";
+import { GlobalKeyboard } from "../utils/keyboard";
+
+const KEYMAP = [
+  {
+    keys: ["command+n", "ctrl+n", "command+alt+n", "ctrl+alt+n"],
+    description: "Create a new note",
+    global: true,
+    action: (e) => {
+      e.preventDefault();
+      hashNavigate("/notes/create", {
+        addNonce: true,
+        replace: true,
+        notify: true,
+      });
+    },
+  },
+  {
+    keys: [
+      "command+shift+n",
+      "ctrl+shift+n",
+      "command+shift+alt+n",
+      "ctrl+shift+alt+n",
+    ],
+    description: "Create a new notebook",
+    global: true,
+    action: (e) => {
+      e.preventDefault();
+      hashNavigate("/notebooks/create", {
+        replace: true,
+        notify: true,
+      });
+    },
+  },
+  {
+    keys: ["command+f", "ctrl+f"],
+    description: "Search all notes",
+    global: false,
+    action: (e) => {
+      if (e.currentTarget !== window) return;
+      e.preventDefault();
+
+      navigate("/search/notes");
+    },
+  },
+];
+
+export function registerKeyMap() {
+  hotkeys.filter = function (e) {
+    return true;
+  };
+
+  KEYMAP.forEach((key) => {
+    hotkeys(
+      key.keys.join(","),
+      { element: key.global ? GlobalKeyboard : window },
+      key.action
+    );
+  });
+}

apps/web/src/components/editor/tinymce.js

@@ -29,6 +29,7 @@ import { isUserPremium } from "../../common";
 import { showBuyDialog } from "../../common/dialog-controller";
 import { useStore as useThemeStore } from "../../stores/theme-store";
 import { isTablet } from "../../utils/dimensions";
+import { KeyboardEventManager } from "../../utils/keyboard";
 
 const markdownPatterns = [
   { start: "```", replacement: "<pre></pre>" },
@@ -134,6 +135,7 @@ function TinyMCE(props) {
       );
     }
   }, [tinymceRef, newSkin, oldSkin]);
+
   return (
     <Editor
       ref={tinymceRef}
@@ -227,11 +229,17 @@ function TinyMCE(props) {
         }
       }}
       onKeyDown={(e) => {
+        e.getModifierState = undefined;
+        KeyboardEventManager.publish("keydown", e);
         if (e.ctrlKey && e.key === "s") {
           e.preventDefault();
           onSave();
         }
       }}
+      onKeyUp={(e) => {
+        e.getModifierState = undefined;
+        KeyboardEventManager.publish("keyup", e);
+      }}
       onEditorChange={(content, editor) => {
         if (onWordCountChanged) {
           const text = editor.getContent({

apps/web/src/utils/keyboard.js

@@ -0,0 +1,22 @@
+import EventManager from "notes-core/utils/eventmanager";
+
+const GlobalKeyboard = {};
+
+const KeyboardEventManager = new EventManager();
+
+GlobalKeyboard.addEventListener = (name, handler) => {
+  KeyboardEventManager.subscribe(name, handler);
+};
+
+GlobalKeyboard.removeEventListener = (name, handler) =>
+  KeyboardEventManager.unsubscribe(name, handler);
+
+window.addEventListener("keydown", (e) => {
+  KeyboardEventManager.publish("keydown", e);
+});
+
+window.addEventListener("keyup", (e) => {
+  KeyboardEventManager.publish("keyup", e);
+});
+
+export { GlobalKeyboard, KeyboardEventManager };

apps/web/yarn.lock

@@ -6721,6 +6721,11 @@ hosted-git-info@^4.0.0:
   dependencies:
     lru-cache "^6.0.0"
 
+hotkeys-js@^3.8.3:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.3.tgz#0331c2cde770e62d51d5d023133f7c4395f59008"
+  integrity sha512-rUmoryG4lEAtkjF5tcYaihrVoE86Fdw1BLqO/UiBWOOF56h32a6ax8oV4urBlinVtNNtArLlBq8igGfZf2tQnw==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz"
@@ -8849,6 +8854,11 @@ moment-mini@^2.24.0:
   resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
   integrity sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==
 
+mousetrap@^1.6.5:
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9"
+  integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz"