feat: keyboard shortcuts for primary actions (#2030)

packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx

@@ -26,9 +26,16 @@ type Props = {
   focusPreviousItem: () => void
   focusedId: string | undefined
   setFocusedId: (id: string) => void
+  hoverLabel?: string
 }
 
-const ItemLinkAutocompleteInput = ({ linkingController, focusPreviousItem, focusedId, setFocusedId }: Props) => {
+const ItemLinkAutocompleteInput = ({
+  linkingController,
+  focusPreviousItem,
+  focusedId,
+  setFocusedId,
+  hoverLabel,
+}: Props) => {
   const application = useApplication()
   const { tags, linkItemToSelectedItem, createAndAddNewTag, isEntitledToNoteLinking, activeItem } = linkingController
 
@@ -128,6 +135,8 @@ const ItemLinkAutocompleteInput = ({ linkingController, focusPreviousItem, focus
             onKeyDown={onKeyDown}
             id={ElementIds.ItemLinkAutocompleteInput}
             autoComplete="off"
+            title={hoverLabel}
+            aria-label={hoverLabel}
           />
           {areSearchResultsVisible && (
             <DisclosurePanel

packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx

@@ -2,13 +2,15 @@ import { observer } from 'mobx-react-lite'
 import ItemLinkAutocompleteInput from './ItemLinkAutocompleteInput'
 import { LinkingController } from '@/Controllers/LinkingController'
 import LinkedItemBubble from './LinkedItemBubble'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { ElementIds } from '@/Constants/ElementIDs'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import { ContentType } from '@standardnotes/snjs'
 import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
 import { ItemLink } from '@/Utils/Items/Search/ItemLink'
+import { FOCUS_TAGS_INPUT_COMMAND, keyboardStringForShortcut } from '@standardnotes/ui-services'
+import { useCommandService } from '../ApplicationView/CommandProvider'
 
 type Props = {
   linkingController: LinkingController
@@ -16,6 +18,9 @@ type Props = {
 
 const LinkedItemBubblesContainer = ({ linkingController }: Props) => {
   const { toggleAppPane } = useResponsiveAppPane()
+
+  const commandService = useCommandService()
+
   const {
     allItemLinks,
     notesLinkingToActiveItem,
@@ -24,6 +29,23 @@ const LinkedItemBubblesContainer = ({ linkingController }: Props) => {
     activateItem,
   } = linkingController
 
+  useEffect(() => {
+    return commandService.addCommandHandler({
+      command: FOCUS_TAGS_INPUT_COMMAND,
+      onKeyDown: () => {
+        const input = document.getElementById(ElementIds.ItemLinkAutocompleteInput)
+        if (input) {
+          input.focus()
+        }
+      },
+    })
+  }, [commandService])
+
+  const shortcut = useMemo(
+    () => keyboardStringForShortcut(commandService.keyboardShortcutForCommand(FOCUS_TAGS_INPUT_COMMAND)),
+    [commandService],
+  )
+
   const [focusedId, setFocusedId] = useState<string>()
   const focusableIds = allItemLinks
     .map((link) => link.id)
@@ -75,7 +97,7 @@ const LinkedItemBubblesContainer = ({ linkingController }: Props) => {
   return (
     <div
       className={classNames(
-        'hidden min-w-80 max-w-full flex-wrap items-center gap-2 bg-transparent md:-mr-2 md:flex',
+        'note-view-linking-container hidden min-w-80 max-w-full flex-wrap items-center gap-2 bg-transparent md:-mr-2 md:flex',
         allItemLinks.length || notesLinkingToActiveItem.length ? 'mt-1' : 'mt-0.5',
       )}
     >
@@ -100,6 +122,7 @@ const LinkedItemBubblesContainer = ({ linkingController }: Props) => {
         linkingController={linkingController}
         focusPreviousItem={focusPreviousItem}
         setFocusedId={setFocusedId}
+        hoverLabel={`Focus input to add a link (${shortcut})`}
       />
     </div>
   )