Merge pull request #9007 from overleaf/ta-recompile-event-body

Listen for Recompile Shortcut on Body

GitOrigin-RevId: 1ded1d620b35d25f1dffe27b78d8c866e2bfa1bd

services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.js

@@ -2,7 +2,6 @@ import ReactDOM from 'react-dom'
 import PdfPreview from './pdf-preview'
 import { ContextRoot } from '../../../shared/context/root-context'
 import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
-import { Shortcuts } from './shortcuts'
 import PdfPreviewDetachedRootSafariWarning from './pdf-preview-detached-root-safari-warning'
 
 function PdfPreviewDetachedRoot() {
@@ -14,10 +13,8 @@ function PdfPreviewDetachedRoot() {
 
   return (
     <ContextRoot>
-      <Shortcuts>
-        <PdfPreviewDetachedRootSafariWarning />
-        <PdfPreview />
-      </Shortcuts>
+      <PdfPreviewDetachedRootSafariWarning />
+      <PdfPreview />
     </ContextRoot>
   )
 }

services/web/frontend/js/features/pdf-preview/components/shortcuts.js

@@ -1,39 +0,0 @@
-import { useCallback } from 'react'
-import { useDetachCompileContext } from '../../../shared/context/detach-compile-context'
-import PropTypes from 'prop-types'
-
-export const Shortcuts = ({ children }) => {
-  const { startCompile } = useDetachCompileContext()
-
-  const handleKeyDown = useCallback(
-    event => {
-      if (event.metaKey) {
-        switch (event.key) {
-          case 's':
-          case 'Enter':
-            event.preventDefault()
-            startCompile()
-            break
-        }
-      } else if (event.ctrlKey) {
-        switch (event.key) {
-          case '.':
-            event.preventDefault()
-            startCompile()
-            break
-        }
-      }
-    },
-    [startCompile]
-  )
-
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <div onKeyDown={handleKeyDown} role="tabpanel" tabIndex="0">
-      {children}
-    </div>
-  )
-}
-Shortcuts.propTypes = {
-  children: PropTypes.node,
-}

services/web/frontend/js/features/pdf-preview/hooks/use-compile-triggers.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
 import useEventListener from '../../../shared/hooks/use-event-listener'
 import useDetachAction from '../../../shared/hooks/use-detach-action'
@@ -6,20 +6,39 @@ import useDetachAction from '../../../shared/hooks/use-detach-action'
 export default function useCompileTriggers() {
   const { startCompile, setChangedAt } = useCompileContext()
 
-  // recompile on key press
-  const startOrTriggerCompile = useDetachAction(
-    'start-compile',
-    startCompile,
-    'detacher',
-    'detached'
-  )
-  const compileHandler = useCallback(
+  const handleKeyDown = useCallback(
     event => {
-      startOrTriggerCompile(event.detail)
+      if (event.metaKey) {
+        switch (event.key) {
+          case 's':
+          case 'Enter':
+            event.preventDefault()
+            startCompile()
+            break
+        }
+      } else if (event.ctrlKey) {
+        switch (event.key) {
+          case '.':
+            event.preventDefault()
+            startCompile()
+            break
+        }
+      }
     },
-    [startOrTriggerCompile]
+    [startCompile]
   )
-  useEventListener('pdf:recompile', compileHandler)
+
+  const handleStartCompile = useCallback(() => {
+    startCompile()
+  }, [startCompile])
+  useEventListener('pdf:recompile', handleStartCompile)
+
+  useEffect(() => {
+    document.body.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.body.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [handleKeyDown])
 
   // record doc changes when notified by the editor
   const setOrTriggerChangedAt = useDetachAction(