feat: keyboard shortcuts for primary actions (#2030)

packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx

@@ -30,6 +30,7 @@ import ConfirmDeleteAccountContainer from '@/Components/ConfirmDeleteAccountModa
 import DarkModeHandler from '../DarkModeHandler/DarkModeHandler'
 import ApplicationProvider from './ApplicationProvider'
 import { ErrorBoundary } from '@/Utils/ErrorBoundary'
+import CommandProvider from './CommandProvider'
 
 type Props = {
   application: WebApplication
@@ -196,85 +197,90 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
 
   return (
     <ApplicationProvider application={application}>
-      <AndroidBackHandlerProvider application={application}>
-        <DarkModeHandler application={application} />
-        <ResponsivePaneProvider paneController={application.getViewControllerManager().paneController}>
-          <PremiumModalProvider application={application} featuresController={viewControllerManager.featuresController}>
-            <div className={platformString + ' main-ui-view sn-component h-full'}>
-              <div id="app" className="app app-column-container" ref={appColumnContainerRef}>
-                <FileDragNDropProvider
-                  application={application}
-                  featuresController={viewControllerManager.featuresController}
-                  filesController={viewControllerManager.filesController}
-                >
-                  <Navigation application={application} />
-                  <ContentListView
+      <CommandProvider service={application.keyboardService}>
+        <AndroidBackHandlerProvider application={application}>
+          <DarkModeHandler application={application} />
+          <ResponsivePaneProvider paneController={application.getViewControllerManager().paneController}>
+            <PremiumModalProvider
+              application={application}
+              featuresController={viewControllerManager.featuresController}
+            >
+              <div className={platformString + ' main-ui-view sn-component h-full'}>
+                <div id="app" className="app app-column-container" ref={appColumnContainerRef}>
+                  <FileDragNDropProvider
                     application={application}
-                    accountMenuController={viewControllerManager.accountMenuController}
+                    featuresController={viewControllerManager.featuresController}
                     filesController={viewControllerManager.filesController}
-                    itemListController={viewControllerManager.itemListController}
-                    navigationController={viewControllerManager.navigationController}
-                    noAccountWarningController={viewControllerManager.noAccountWarningController}
+                  >
+                    <Navigation application={application} />
+                    <ContentListView
+                      application={application}
+                      accountMenuController={viewControllerManager.accountMenuController}
+                      filesController={viewControllerManager.filesController}
+                      itemListController={viewControllerManager.itemListController}
+                      navigationController={viewControllerManager.navigationController}
+                      noAccountWarningController={viewControllerManager.noAccountWarningController}
+                      notesController={viewControllerManager.notesController}
+                      selectionController={viewControllerManager.selectionController}
+                      searchOptionsController={viewControllerManager.searchOptionsController}
+                      linkingController={viewControllerManager.linkingController}
+                    />
+                    <ErrorBoundary>
+                      <NoteGroupView application={application} />
+                    </ErrorBoundary>
+                  </FileDragNDropProvider>
+                </div>
+
+                <>
+                  <Footer application={application} applicationGroup={mainApplicationGroup} />
+                  <SessionsModal application={application} viewControllerManager={viewControllerManager} />
+                  <PreferencesViewWrapper viewControllerManager={viewControllerManager} application={application} />
+                  <RevisionHistoryModal
+                    application={application}
+                    historyModalController={viewControllerManager.historyModalController}
                     notesController={viewControllerManager.notesController}
                     selectionController={viewControllerManager.selectionController}
-                    searchOptionsController={viewControllerManager.searchOptionsController}
-                    linkingController={viewControllerManager.linkingController}
+                    subscriptionController={viewControllerManager.subscriptionController}
                   />
-                  <ErrorBoundary>
-                    <NoteGroupView application={application} />
-                  </ErrorBoundary>
-                </FileDragNDropProvider>
+                </>
+
+                {renderChallenges()}
+
+                <>
+                  <NotesContextMenu
+                    application={application}
+                    navigationController={viewControllerManager.navigationController}
+                    notesController={viewControllerManager.notesController}
+                    linkingController={viewControllerManager.linkingController}
+                    historyModalController={viewControllerManager.historyModalController}
+                  />
+                  <TagContextMenuWrapper
+                    navigationController={viewControllerManager.navigationController}
+                    featuresController={viewControllerManager.featuresController}
+                  />
+                  <FileContextMenuWrapper
+                    filesController={viewControllerManager.filesController}
+                    selectionController={viewControllerManager.selectionController}
+                  />
+                  <PurchaseFlowWrapper application={application} viewControllerManager={viewControllerManager} />
+                  <ConfirmSignoutContainer
+                    applicationGroup={mainApplicationGroup}
+                    viewControllerManager={viewControllerManager}
+                    application={application}
+                  />
+                  <ToastContainer />
+                  <FilePreviewModalWrapper application={application} viewControllerManager={viewControllerManager} />
+                  <PermissionsModalWrapper application={application} />
+                  <ConfirmDeleteAccountContainer
+                    application={application}
+                    viewControllerManager={viewControllerManager}
+                  />
+                </>
               </div>
-
-              <>
-                <Footer application={application} applicationGroup={mainApplicationGroup} />
-                <SessionsModal application={application} viewControllerManager={viewControllerManager} />
-                <PreferencesViewWrapper viewControllerManager={viewControllerManager} application={application} />
-                <RevisionHistoryModal
-                  application={application}
-                  historyModalController={viewControllerManager.historyModalController}
-                  notesController={viewControllerManager.notesController}
-                  selectionController={viewControllerManager.selectionController}
-                  subscriptionController={viewControllerManager.subscriptionController}
-                />
-              </>
-
-              {renderChallenges()}
-
-              <>
-                <NotesContextMenu
-                  application={application}
-                  navigationController={viewControllerManager.navigationController}
-                  notesController={viewControllerManager.notesController}
-                  linkingController={viewControllerManager.linkingController}
-                  historyModalController={viewControllerManager.historyModalController}
-                />
-                <TagContextMenuWrapper
-                  navigationController={viewControllerManager.navigationController}
-                  featuresController={viewControllerManager.featuresController}
-                />
-                <FileContextMenuWrapper
-                  filesController={viewControllerManager.filesController}
-                  selectionController={viewControllerManager.selectionController}
-                />
-                <PurchaseFlowWrapper application={application} viewControllerManager={viewControllerManager} />
-                <ConfirmSignoutContainer
-                  applicationGroup={mainApplicationGroup}
-                  viewControllerManager={viewControllerManager}
-                  application={application}
-                />
-                <ToastContainer />
-                <FilePreviewModalWrapper application={application} viewControllerManager={viewControllerManager} />
-                <PermissionsModalWrapper application={application} />
-                <ConfirmDeleteAccountContainer
-                  application={application}
-                  viewControllerManager={viewControllerManager}
-                />
-              </>
-            </div>
-          </PremiumModalProvider>
-        </ResponsivePaneProvider>
-      </AndroidBackHandlerProvider>
+            </PremiumModalProvider>
+          </ResponsivePaneProvider>
+        </AndroidBackHandlerProvider>
+      </CommandProvider>
     </ApplicationProvider>
   )
 }

packages/web/src/javascripts/Components/ApplicationView/CommandProvider.tsx

@@ -0,0 +1,36 @@
+import { ReactNode, createContext, useContext, memo } from 'react'
+
+import { observer } from 'mobx-react-lite'
+import { KeyboardService } from '@standardnotes/ui-services'
+
+const CommandServiceContext = createContext<KeyboardService | undefined>(undefined)
+
+export const useCommandService = () => {
+  const value = useContext(CommandServiceContext)
+
+  if (!value) {
+    throw new Error('Component must be a child of <CommandServiceProvider />')
+  }
+
+  return value
+}
+
+type ChildrenProps = {
+  children: ReactNode
+}
+
+type ProviderProps = {
+  service: KeyboardService
+} & ChildrenProps
+
+const MemoizedChildren = memo(({ children }: ChildrenProps) => <>{children}</>)
+
+const CommandServiceProvider = ({ service, children }: ProviderProps) => {
+  return (
+    <CommandServiceContext.Provider value={service}>
+      <MemoizedChildren children={children} />
+    </CommandServiceContext.Provider>
+  )
+}
+
+export default observer(CommandServiceProvider)