feat: keyboard shortcuts for primary actions (#2030)

packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx

@@ -1,10 +1,11 @@
-import { KeyboardKey } from '@standardnotes/ui-services'
+import { CHANGE_EDITOR_COMMAND, KeyboardKey } from '@standardnotes/ui-services'
 import { WebApplication } from '@/Application/Application'
 import { SNNote } from '@standardnotes/snjs'
-import { FunctionComponent, useCallback, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useMemo, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import ChangeEditorMenu from '@/Components/ChangeEditor/ChangeEditorMenu'
 import Popover from '../Popover/Popover'
+import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 
 type ChangeEditorOptionProps = {
   application: WebApplication
@@ -27,6 +28,11 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
     setIsOpen((isOpen) => !isOpen)
   }, [])
 
+  const shortcut = useMemo(
+    () => application.keyboardService.keyboardShortcutForCommand(CHANGE_EDITOR_COMMAND),
+    [application],
+  )
+
   return (
     <div ref={menuContainerRef}>
       <button
@@ -43,7 +49,10 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
           <Icon type="dashboard" className={`${iconClassName} mr-2 text-neutral`} />
           Change note type
         </div>
-        <Icon type="chevron-right" className="text-neutral" />
+        <div className="flex">
+          {shortcut && <KeyboardShortcutIndicator className={'mr-2'} shortcut={shortcut} />}
+          <Icon type="chevron-right" className="text-neutral" />
+        </div>
       </button>
       <Popover
         align="start"