Improve "compile" keyboard shortcut handling (#10624)

* Improve "compile" keypress handling
* Remove "compile" keypress handling from PDF preview
* Remove compile shortcuts from CM6
* Use an event for Vim keybindings
* Remove event handlers from Angular/Ace
* Move useCompileTriggers into DetachCompileProvider

GitOrigin-RevId: 7f0e667b5106a849458e06ebb0f7a413d5d63430

services/web/app/views/project/editor/main.pug

@@ -26,7 +26,6 @@ else
 			custom-toggler-pane=hasFeature('custom-togglers') ? "west" : false
 			custom-toggler-msg-when-open=hasFeature('custom-togglers') ? translate("tooltip_hide_filetree") : false
 			custom-toggler-msg-when-closed=hasFeature('custom-togglers') ? translate("tooltip_show_filetree") : false
-			ng-keydown="handleKeyDown($event)"
 			tabindex="0"
 			initial-size-east="250"
 			init-closed-east="true"

services/web/app/views/project/editor/source-editor.pug

@@ -19,8 +19,6 @@
 	annotations="pdf.logEntryAnnotations[editor.open_doc_id]",
 	read-only="!permissions.write",
 	file-name="editor.open_doc_name",
-	on-ctrl-enter="recompileViaKey",
-	on-save="recompileViaKey",
 	on-ctrl-j="toggleReviewPanel",
 	on-ctrl-shift-c="addNewCommentFromKbdShortcut",
 	on-ctrl-shift-a="toggleTrackChangesFromKbdShortcut",

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

@@ -15,14 +15,8 @@ import { getPdfCachingMetrics } from '../util/metrics'
 function PdfJsViewer({ url, pdfFile }) {
   const { _id: projectId } = useProjectContext()
 
-  const {
+  const { setError, firstRenderDone, highlights, position, setPosition } =
-    setError,
+    useCompileContext()
-    firstRenderDone,
-    highlights,
-    position,
-    setPosition,
-    startCompile,
-  } = useCompileContext()
 
   // state values persisted in localStorage to restore on load
   const [scale, setScale] = usePersistedState(
@@ -372,24 +366,26 @@ function PdfJsViewer({ url, pdfFile }) {
       if (!initialised) {
         return
       }
-      if ((event.metaKey || event.ctrlKey) && event.key === '=') {
+      if (event.metaKey || event.ctrlKey) {
-        event.preventDefault()
+        switch (event.key) {
-        setZoom('zoom-in')
+          case '=':
-      } else if ((event.metaKey || event.ctrlKey) && event.key === '-') {
+            event.preventDefault()
-        event.preventDefault()
+            setZoom('zoom-in')
-        setZoom('zoom-out')
+            break
-      } else if ((event.metaKey || event.ctrlKey) && event.key === '0') {
+
-        event.preventDefault()
+          case '-':
-        setZoom('fit-width')
+            event.preventDefault()
-      } else if (
+            setZoom('zoom-out')
-        (event.metaKey && (event.key === 's' || event.key === 'Enter')) ||
+            break
-        (event.ctrlKey && event.key === '.')
+
-      ) {
+          case '0':
-        event.preventDefault()
+            event.preventDefault()
-        startCompile()
+            setZoom('fit-width')
+            break
+        }
       }
     },
-    [initialised, setZoom, startCompile]
+    [initialised, setZoom]
   )
 
   /* eslint-disable jsx-a11y/no-noninteractive-tabindex */

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

@@ -1,13 +1,10 @@
 import PdfPreviewPane from './pdf-preview-pane'
-import useCompileTriggers from '../hooks/use-compile-triggers'
 import { memo } from 'react'
 import withErrorBoundary from '../../../infrastructure/error-boundary'
 import PdfPreviewErrorBoundaryFallback from './pdf-preview-error-boundary-fallback'
 import { useLayoutContext } from '../../../shared/context/layout-context'
 
 function PdfPreview() {
-  useCompileTriggers()
-
   const { detachRole } = useLayoutContext()
   if (detachRole === 'detacher') return null
   return <PdfPreviewPane />

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

@@ -1,28 +1,31 @@
 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'
 
-export default function useCompileTriggers() {
+export const startCompileKeypress = event => {
-  const { startCompile, setChangedAt } = useCompileContext()
+  if (event.shiftKey || event.altKey) {
+    return false
+  }
 
+  if (event.ctrlKey) {
+    // Ctrl+s / Ctrl+Enter / Ctrl+.
+    if (event.key === 's' || event.key === 'Enter' || event.key === '.') {
+      return true
+    }
+  } else if (event.metaKey) {
+    // Cmd+s / Cmd+Enter
+    if (event.key === 's' || event.key === 'Enter') {
+      return true
+    }
+  }
+}
+
+export default function useCompileTriggers(startCompile, setChangedAt) {
   const handleKeyDown = useCallback(
     event => {
-      if (event.metaKey) {
+      if (startCompileKeypress(event)) {
-        switch (event.key) {
+        event.preventDefault()
-          case 's':
+        startCompile()
-          case 'Enter':
-            event.preventDefault()
-            startCompile()
-            break
-        }
-      } else if (event.ctrlKey) {
-        switch (event.key) {
-          case '.':
-            event.preventDefault()
-            startCompile()
-            break
-        }
       }
     },
     [startCompile]

services/web/frontend/js/ide.js

@@ -387,24 +387,8 @@ If the project has been renamed please look in your project list for a new proje
       }
     })
 
-    $scope.recompileViaKey = () => {
+    $scope.handleKeyDown = () => {
-      if ($scope.recompile) {
+      // unused?
-        $scope.recompile()
-      } else {
-        window.dispatchEvent(new CustomEvent('pdf:recompile'))
-      }
-    }
-
-    $scope.handleKeyDown = event => {
-      if (event.shiftKey || event.altKey) {
-        return
-      }
-
-      // Ctrl+s or Cmd+s => recompile
-      if (event.key === 's' && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault()
-        $scope.recompileViaKey()
-      }
     }
 
     try {

services/web/frontend/js/ide/editor/directives/aceEditor.js

@@ -242,30 +242,8 @@ App.directive(
 
         /* eslint-enable no-unused-vars */
 
-        scope.$watch('onSave', function (callback) {
+        Vim.defineEx('write', 'w', function () {
-          if (callback != null) {
+          window.dispatchEvent(new Event('pdf:recompile'))
-            Vim.defineEx('write', 'w', callback)
-            editor.commands.addCommand({
-              name: 'save',
-              bindKey: {
-                win: 'Ctrl-S',
-                mac: 'Command-S',
-              },
-              exec: callback,
-              readOnly: true,
-            })
-            // Not technically 'save', but Ctrl-. recompiles in OL v1
-            // so maintain compatibility
-            return editor.commands.addCommand({
-              name: 'recompile_v1',
-              bindKey: {
-                win: 'Ctrl-.',
-                mac: 'Ctrl-.',
-              },
-              exec: callback,
-              readOnly: true,
-            })
-          }
         })
         editor.commands.removeCommand('transposeletters')
         editor.commands.removeCommand('showSettingsMenu')

services/web/frontend/js/shared/context/detach-compile-context.js

@@ -6,6 +6,7 @@ import {
 } from './local-compile-context'
 import useDetachStateWatcher from '../hooks/use-detach-state-watcher'
 import useDetachAction from '../hooks/use-detach-action'
+import useCompileTriggers from '../../features/pdf-preview/hooks/use-compile-triggers'
 
 export const DetachCompileContext = createContext()
 
@@ -343,6 +344,8 @@ export function DetachCompileProvider({ children }) {
     'detacher'
   )
 
+  useCompileTriggers(startCompile, setChangedAt)
+
   const value = useMemo(
     () => ({
       animateCompileDropdownArrow,