Merge pull request #2897 from omnivore-app/fix/web-pdf-keyboard-shortcuts

Better keyboard shortcut handling for PDFs

packages/web/components/templates/article/PdfArticleContainer.tsx

@@ -11,7 +11,6 @@ import { createHighlightMutation } from '../../../lib/networking/mutations/creat
 import { deleteHighlightMutation } from '../../../lib/networking/mutations/deleteHighlightMutation'
 import { articleReadingProgressMutation } from '../../../lib/networking/mutations/articleReadingProgressMutation'
 import { mergeHighlightMutation } from '../../../lib/networking/mutations/mergeHighlightMutation'
-import { useCanShareNative } from '../../../lib/hooks/useCanShareNative'
 import { pspdfKitKey } from '../../../lib/appConfig'
 import { HighlightNoteModal } from './HighlightNoteModal'
 import { showErrorToast } from '../../../lib/toastHelpers'
@@ -22,7 +21,6 @@ import 'react-sliding-pane/dist/react-sliding-pane.css'
 import { NotebookContent } from './Notebook'
 import { NotebookHeader } from './NotebookHeader'
 import useWindowDimensions from '../../../lib/hooks/useGetWindowDimensions'
-import { usePersistedState } from '../../../lib/hooks/usePersistedState'
 
 export type PdfArticleContainerProps = {
   viewer: UserBasicData
@@ -419,6 +417,65 @@ export default function PdfArticleContainer(
           })
         }
       )
+
+      function keyDownHandler(event: globalThis.KeyboardEvent) {
+        const key = event.key.toLowerCase()
+        switch (key) {
+          case 'o':
+            document.dispatchEvent(new Event('openOriginalArticle'))
+            break
+          case 'u':
+            const query = window.sessionStorage.getItem('q')
+            if (query) {
+              window.location.assign(`/home?${query}`)
+            } else {
+              window.location.replace(`/home`)
+            }
+            break
+          case 'e':
+            document.dispatchEvent(new Event('archive'))
+            break
+          case '#':
+            document.dispatchEvent(new Event('delete'))
+            break
+          case 'h':
+            const root = (event.target as HTMLElement).querySelector(
+              '.PSPDFKit-Root'
+            )
+            const highlight = root?.querySelector(
+              '.PSPDFKit-Text-Markup-Inline-Toolbar-Highlight'
+            )
+            console.log('root ', root)
+            console.log('highlight overlay: ', highlight, highlight?.nodeName)
+            if (highlight && highlight?.nodeName == 'BUTTON') {
+              const button = highlight as HTMLButtonElement
+              button.click()
+            }
+            break
+          // case 'n':
+          // TODO: need to set a post creation event here, then
+          // go through the regular highlight creation
+          //   document.dispatchEvent(new Event('annotate'))
+          //   break
+          case 't':
+            props.setShowHighlightsModal(true)
+            break
+          case 'i':
+            document.dispatchEvent(new Event('showEditModal'))
+            break
+        }
+      }
+
+      const isIE11 = navigator.userAgent.indexOf('Trident/') > -1
+      instance.contentDocument.addEventListener(
+        'keydown',
+        keyDownHandler,
+        isIE11
+          ? {
+              capture: true,
+            }
+          : true
+      )
     })()
 
     document.addEventListener('deleteHighlightbyId', async (event) => {

packages/web/pages/[username]/[slug]/index.tsx

@@ -13,8 +13,6 @@ import {
 } from './../../../components/templates/article/ArticleContainer'
 import { PdfArticleContainerProps } from './../../../components/templates/article/PdfArticleContainer'
 import { useCallback, useEffect, useState } from 'react'
-import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { navigationCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
 import dynamic from 'next/dynamic'
 import { Toaster } from 'react-hot-toast'
 import { createHighlightMutation } from '../../../lib/networking/mutations/createHighlightMutation'
@@ -38,7 +36,6 @@ import { useReaderSettings } from '../../../lib/hooks/useReaderSettings'
 import { SkeletonArticleContainer } from '../../../components/templates/article/SkeletonArticleContainer'
 import { useRegisterActions } from 'kbar'
 import { deleteLinkMutation } from '../../../lib/networking/mutations/deleteLinkMutation'
-import { ConfirmationModal } from '../../../components/patterns/ConfirmationModal'
 import { ReaderHeader } from '../../../components/templates/reader/ReaderHeader'
 import { EditArticleModal } from '../../../components/templates/homeFeed/EditItemModals'
 import { VerticalArticleActionsMenu } from '../../../components/templates/article/VerticalArticleActions'
@@ -120,6 +117,9 @@ export default function Home(): JSX.Element {
                 })
               } else {
                 router.push(`/home`)
+                showSuccessToast('Page archived', {
+                  position: 'bottom-right',
+                })
               }
             })
           }
@@ -187,16 +187,22 @@ export default function Home(): JSX.Element {
       actionHandler('mark-read')
     }
 
+    const showEditModal = () => {
+      actionHandler('showEditModal')
+    }
+
     document.addEventListener('archive', archive)
     document.addEventListener('delete', deletePage)
     document.addEventListener('mark-read', markRead)
     document.addEventListener('openOriginalArticle', openOriginalArticle)
+    document.addEventListener('showEditModal', showEditModal)
 
     return () => {
       document.removeEventListener('archive', archive)
       document.removeEventListener('mark-read', markRead)
       document.removeEventListener('delete', deletePage)
       document.removeEventListener('openOriginalArticle', openOriginalArticle)
+      document.removeEventListener('showEditModal', showEditModal)
     }
   }, [actionHandler])