fix: prevent hotkeys when typing in monaco editor

Author: QuentinRoy

packages/client/setup/monaco.ts

@@ -20,6 +20,7 @@ import { SyncDescriptor } from 'monaco-editor/esm/vs/platform/instantiation/comm
 import ts from 'typescript'
 import { watchEffect } from 'vue'
 import { isDark } from '../logic/dark'
+import { lockShortcuts, unlockShortcuts } from '../state'
 
 window.MonacoEnvironment = {
   getWorker(_, label) {
@@ -97,6 +98,16 @@ const setup = createSingletonPromise(async () => {
     Object.assign(editorOptions, result?.editorOptions)
   }
 
+  // Disable shortcuts when focusing Monaco editor.
+  monaco.editor.onDidCreateEditor((editor) => {
+    editor.onDidFocusEditorWidget(() => {
+      lockShortcuts()
+    })
+    editor.onDidBlurEditorWidget(() => {
+      unlockShortcuts()
+    })
+  })
+
   // Use Shiki to highlight Monaco
   shikiToMonaco(highlighter, monaco)
   if (typeof themes === 'string') {

packages/client/state/storage.ts

@@ -15,7 +15,30 @@ export const showOverview = ref(false)
 export const hmrSkipTransition = ref(false)
 export const disableTransition = ref(false)
 
-export const shortcutsEnabled = ref(true)
+const mutableShortcutsEnabled = ref(true)
+/**
+ * Whether the keyboard shortcuts are enabled. Readonly,
+ * use `lockShortcuts` and `unlockShortcuts` to modify.
+ */
+export const shortcutsEnabled = computed(() => mutableShortcutsEnabled.value)
+
+// Use a lock counter to support multiple simultaneous locks
+// and avoid race conditions. Race conditions may occur, for example,
+// when locking shortcuts on editor focus and moving from one editor
+// to another, as blur events can be triggered after focus.
+let shortcutsLockCounter = 0
+export function lockShortcuts() {
+  shortcutsLockCounter++
+  mutableShortcutsEnabled.value = false
+}
+export function unlockShortcuts() {
+  shortcutsLockCounter--
+  if (shortcutsLockCounter <= 0) {
+    shortcutsLockCounter = 0
+    mutableShortcutsEnabled.value = true
+  }
+}
+
 export const breakpoints = useBreakpoints({
   xs: 460,
   ...breakpointsTailwind,