From e14363246d0a73f267409f1e4d3ca00985965c34 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Wed, 18 May 2022 11:35:18 +0100
Subject: [PATCH] Handle compile shortcuts in all layouts (#7969)

GitOrigin-RevId: cbfb24a7328d499ca96caa8683b8e4b1e6858372
---
 .../components/pdf-compile-button-inner.js    | 12 +-----
 .../pdf-preview/components/pdf-js-viewer.js   | 18 +++++++--
 .../components/pdf-preview-detached-root.js   |  5 ++-
 .../pdf-preview/components/shortcuts.js       | 39 +++++++++++++++++++
 4 files changed, 59 insertions(+), 15 deletions(-)
 create mode 100644 services/web/frontend/js/features/pdf-preview/components/shortcuts.js

diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-compile-button-inner.js b/services/web/frontend/js/features/pdf-preview/components/pdf-compile-button-inner.js
index 165cf38049..03a44a90a1 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-compile-button-inner.js
+++ b/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>
       }
     >
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.js b/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.js
index 56e1838a50..2172a4003d 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.js
+++ b/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 */
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.js b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.js
index b19009978a..9e0a28b581 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.js
+++ b/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>
   )
 }
diff --git a/services/web/frontend/js/features/pdf-preview/components/shortcuts.js b/services/web/frontend/js/features/pdf-preview/components/shortcuts.js
new file mode 100644
index 0000000000..abeb2e0d21
--- /dev/null
+++ b/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,
+}