Handle compile shortcuts in all layouts (#7969)

GitOrigin-RevId: cbfb24a7328d499ca96caa8683b8e4b1e6858372

services/web/frontend/js/features/pdf-preview/components/pdf-compile-button-inner.js

@@ -3,22 +3,14 @@ import PropTypes from 'prop-types'
 import Icon from '../../../shared/components/icon'
 import { useTranslation } from 'react-i18next'
 import { memo } from 'react'
-import { useLayoutContext } from '../../../shared/context/layout-context'
 
 const modifierKey = /Mac/i.test(navigator.platform) ? 'Cmd' : 'Ctrl'
 
 function PdfCompileButtonInner({ startCompile, compiling }) {
-  const { detachRole, view, pdfLayout } = useLayoutContext()
-
   const { t } = useTranslation()
 
   const compileButtonLabel = compiling ? t('compiling') + '…' : t('recompile')
 
-  // show the compile shortcut when the editor is visible
-  const showCompileShortcut =
-    detachRole !== 'detached' &&
-    (view === 'editor' || pdfLayout === 'sideBySide')
-
   return (
     <OverlayTrigger
       placement="bottom"
@@ -26,9 +18,7 @@ function PdfCompileButtonInner({ startCompile, compiling }) {
       overlay={
         <Tooltip id="tooltip-logs-toggle" className="keyboard-tooltip">
           {t('recompile_pdf')}{' '}
-          {showCompileShortcut && (
-            <span className="keyboard-shortcut">({modifierKey} + Enter)</span>
-          )}
+          <span className="keyboard-shortcut">({modifierKey} + Enter)</span>
         </Tooltip>
       }
     >

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

@@ -14,8 +14,14 @@ import getMeta from '../../../utils/meta'
 function PdfJsViewer({ url }) {
   const { _id: projectId } = useProjectContext()
 
-  const { setError, firstRenderDone, highlights, position, setPosition } =
-    useCompileContext()
+  const {
+    setError,
+    firstRenderDone,
+    highlights,
+    position,
+    setPosition,
+    startCompile,
+  } = useCompileContext()
   const [timePDFFetched, setTimePDFFetched] = useState()
 
   // state values persisted in localStorage to restore on load
@@ -297,9 +303,15 @@ function PdfJsViewer({ url }) {
       } else if ((event.metaKey || event.ctrlKey) && event.key === '0') {
         event.preventDefault()
         setZoom('fit-width')
+      } else if (
+        (event.metaKey && (event.key === 's' || event.key === 'Enter')) ||
+        (event.ctrlKey && event.key === '.')
+      ) {
+        event.preventDefault()
+        startCompile({ keyShortcut: true })
       }
     },
-    [initialised, setZoom]
+    [initialised, setZoom, startCompile]
   )
 
   /* eslint-disable jsx-a11y/no-noninteractive-tabindex */

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

@@ -1,11 +1,14 @@
 import ReactDOM from 'react-dom'
 import PdfPreview from './pdf-preview'
 import { ContextRoot } from '../../../shared/context/root-context'
+import { Shortcuts } from './shortcuts'
 
 function PdfPreviewDetachedRoot() {
   return (
     <ContextRoot>
-      <PdfPreview />
+      <Shortcuts>
+        <PdfPreview />
+      </Shortcuts>
     </ContextRoot>
   )
 }

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

@@ -0,0 +1,39 @@
+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({ keyShortcut: true })
+            break
+        }
+      } else if (event.ctrlKey) {
+        switch (event.key) {
+          case '.':
+            event.preventDefault()
+            startCompile({ keyShortcut: true })
+            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,
+}