Add a hotkey for fullscreen

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

@@ -30,12 +30,14 @@ export default function PdfArticleContainer(
   props: PdfArticleContainerProps
 ): JSX.Element {
   const containerRef = useRef<HTMLDivElement | null>(null)
-  const [shareTarget, setShareTarget] =
-    useState<Highlight | undefined>(undefined)
+  const [shareTarget, setShareTarget] = useState<Highlight | undefined>(
+    undefined
+  )
   const [notebookKey, setNotebookKey] = useState<string>(uuidv4())
   const [noteTarget, setNoteTarget] = useState<Highlight | undefined>(undefined)
-  const [noteTargetPageIndex, setNoteTargetPageIndex] =
-    useState<number | undefined>(undefined)
+  const [noteTargetPageIndex, setNoteTargetPageIndex] = useState<
+    number | undefined
+  >(undefined)
   const highlightsRef = useRef<Highlight[]>([])
   const canShareNative = useCanShareNative()
 
@@ -475,6 +477,7 @@ export default function PdfArticleContainer(
 
   return (
     <Box
+      id="article-wrapper"
       css={{
         width: '100%',
         height: `calc(100vh - ${HEADER_HEIGHT})`,

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

@@ -255,6 +255,19 @@ export default function Home(): JSX.Element {
           document.dispatchEvent(new Event('mark-read'))
         },
       },
+      {
+        id: 'full_screen',
+        section: 'Article',
+        name: 'Read fullscreen',
+        shortcut: ['f'],
+        perform: () => {
+          const reader = document.getElementById('article-wrapper')
+          if (!reader) {
+            alert('Unable to enter fullscreen mode')
+          }
+          reader?.requestFullscreen()
+        },
+      },
       {
         id: 'delete',
         section: 'Article',
@@ -399,6 +412,7 @@ export default function Home(): JSX.Element {
         />
       ) : (
         <VStack
+          id="article-wrapper"
           alignment="center"
           distribution="start"
           className="disable-webkit-callout"