Feature/implement project hotkeys 79 (#143)

* Add project hotkeys * version
zachhannum · Sep 14, 2022 · 977152c · 977152c
1 parent 49cd47d
commit 977152c
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 8 deletions.
diff --git a/app/renderer/App.tsx b/app/renderer/App.tsx
@@ -5,7 +5,7 @@ import { SidebarPane, PreviewPane, MainPane, Modals } from './panes';
 import theme from './theme/theme';
 import GlobalStyles from './theme/globalStyles';
 import { WinControls } from './controls';
-import { useOpenProject } from './hooks';
+import { useOpenProject, useProjectHotkeys } from './hooks';
 
 const AppContainer = styled.div`
   display: flex;
@@ -19,6 +19,7 @@ const AppContainer = styled.div`
 
 const App = () => {
   useOpenProject();
+  useProjectHotkeys();
   return (
     <ThemeProvider theme={theme}>
       {window.windowApi.os() === 'win32' && <WinControls />}

diff --git a/app/renderer/components/MoreOptionsSidebarMenu.tsx b/app/renderer/components/MoreOptionsSidebarMenu.tsx
@@ -17,6 +17,7 @@ import {
 } from '../icons';
 import useStore from '../store/useStore';
 import { saveProject } from '../utils/projectUtils';
+import { useCommandKeyString } from '../hooks';
 
 const StyledMenuDivider = styled.div`
   height: 2px;
@@ -29,6 +30,7 @@ const MoreOptionsSidebarMenu = () => {
   const theme = useTheme();
   const [showMenu, setShowMenu] = useState(false);
   const buttonRef = useRef<HTMLAnchorElement>(null);
+  const commandKeyString = useCommandKeyString();
   const isProjectOpen = useStore((state) => state.isProjectOpen);
   const activeSectionId = useStore((state) => state.activeSectionId);
   const previewEnabled = useStore((state) => state.previewEnabled);
@@ -75,7 +77,7 @@ const MoreOptionsSidebarMenu = () => {
           <MoreOptionsSidebarItem
             hover
             iconElement={<NewBookIcon />}
-            rightElement={<span>⌘N</span>}
+            rightElement={<span>{commandKeyString}N</span>}
             label="New Book"
             onClick={() => {
               setShowMenu(false);
@@ -85,7 +87,7 @@ const MoreOptionsSidebarMenu = () => {
           <MoreOptionsSidebarItem
             hover
             iconElement={<OpenBookIcon />}
-            rightElement={<span>⌘O</span>}
+            rightElement={<span>{commandKeyString}O</span>}
             label="Open Book"
             onClick={() => {
               setShowMenu(false);
@@ -97,7 +99,7 @@ const MoreOptionsSidebarMenu = () => {
               <MoreOptionsSidebarItem
                 hover
                 iconElement={<SaveIcon />}
-                rightElement={<span>⌘S</span>}
+                rightElement={<span>{commandKeyString}S</span>}
                 label="Save Book"
                 onClick={() => {
                   if (isProjectOpen) {
@@ -109,7 +111,7 @@ const MoreOptionsSidebarMenu = () => {
               <MoreOptionsSidebarItem
                 hover
                 iconElement={<GenerateBookIcon />}
-                rightElement={<span>⌘G</span>}
+                rightElement={<span>{commandKeyString}G</span>}
                 label="Generate Book"
                 onClick={() => {
                   setShowMenu(false);

diff --git a/app/renderer/hooks/index.ts b/app/renderer/hooks/index.ts
@@ -7,3 +7,5 @@ export { default as useOnWheel } from './useOnWheel';
 export { default as useOnClickOutside } from './useOnClickOutside';
 export { default as useIsHovering } from './useIsHovering';
 export { default as useOnBookPdfGenerated } from './useOnBookPdfGenerated';
+export { default as useProjectHotkeys } from './useProjectHotkeys';
+export { default as useCommandKeyString } from './useCommandKeyString';
diff --git a/app/renderer/hooks/useCommandKeyString.ts b/app/renderer/hooks/useCommandKeyString.ts
@@ -0,0 +1,5 @@
+const useCommandKeyString = () => {
+  return window.windowApi.os() === 'darwin' ? '⌘' : 'Ctrl';
+};
+
+export default useCommandKeyString;
diff --git a/app/renderer/hooks/useProjectHotkeys.ts b/app/renderer/hooks/useProjectHotkeys.ts
@@ -0,0 +1,53 @@
+import { useEffect, useCallback, useMemo } from 'react';
+import useStore from '../store/useStore';
+import { saveProject } from '../utils/projectUtils';
+
+const useProjectHotkeys = () => {
+  const { setGenerateBookModalOpen, setPreviewEnabled, setNewBookModalOpen } =
+    useStore.getState();
+  const isProjectOpen = useStore((state) => state.isProjectOpen);
+  const isPreviewEnabled = useStore((state) => state.previewEnabled);
+  const activeSectionId = useStore((state) => state.activeSectionId);
+
+  const shortcuts = useMemo(
+    () => ({
+      o: window.projectApi.openProject,
+      g: () => {
+        if (isProjectOpen) {
+          setGenerateBookModalOpen(true);
+        }
+      },
+      s: saveProject,
+      n: () => {
+        setNewBookModalOpen(true);
+      },
+      p: () => {
+        if (isProjectOpen && activeSectionId !== '') {
+          setPreviewEnabled(!isPreviewEnabled);
+        }
+      },
+    }),
+    [isProjectOpen, isPreviewEnabled, activeSectionId]
+  );
+  const handleKeypress = useCallback(
+    (event: KeyboardEvent) => {
+      const commandKeyPressed =
+        window.windowApi.os() === 'darwin' ? event.metaKey : event.ctrlKey;
+      if (commandKeyPressed) {
+        if (event.key in shortcuts) {
+          shortcuts[event.key]();
+        }
+      }
+    },
+    [isProjectOpen, isPreviewEnabled, activeSectionId]
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeypress);
+    return () => {
+      document.removeEventListener('keydown', handleKeypress);
+    };
+  }, [handleKeypress]);
+};
+
+export default useProjectHotkeys;
diff --git a/app/renderer/panes/MainPane.tsx b/app/renderer/panes/MainPane.tsx
@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import Color from 'color';
 import { Editor } from '../components';
 import useStore from '../store/useStore';
+import { useCommandKeyString } from '../hooks';
 
 const MainContent = styled.div`
   --top-padding: calc(
@@ -70,6 +71,7 @@ const MainPane = () => {
   const isProjectOpen = useStore((state) => state.isProjectOpen);
   const activeSectionId = useStore((state) => state.activeSectionId);
   const activeSectionName = useStore((state) => state.activeSectionName);
+  const commandKeyString = useCommandKeyString();
   return (
     <MainContent>
       {isProjectOpen && activeSectionId !== '' ? (
@@ -86,11 +88,11 @@ const MainPane = () => {
           <NoProjectHotkeys>
             <NoProjectHotkey>
               <span>Open a project</span>
-              <span>⌘O</span>
+              <span>{commandKeyString}O</span>
             </NoProjectHotkey>
             <NoProjectHotkey>
               <span>Start a new project</span>
-              <span>⌘N</span>
+              <span>{commandKeyString}N</span>
             </NoProjectHotkey>
           </NoProjectHotkeys>
         </NoProjectDiv>

diff --git a/release/app/package.json b/release/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "calamus",
-  "version": "0.5.7-pre-alpha",
+  "version": "0.5.8-pre-alpha",
   "description": "Write and Publish Books with Ease",
   "main": "./dist/main/main.js",
   "author": {