Restrict alt-based keyboard shortcuts to the left alt key

- only left alt should be used for shortcuts

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       ├── Home
│                       │   └── hooks
│                       │       └── use-keyboard-shortcuts.ts
│                       └── Main
│                           └── MainView
│                               └── components
│                                   └── Header
│                                       └── hooks
│                                           └── use-keyboard-shortcuts.ts
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── common
                        └── prompts
                            └── PromptField
                                ├── PromptField.tsx
                                └── hooks
                                    └── use-keyboard-shortcuts.ts

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Home/hooks/use-keyboard-shortcuts.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 type Params = {
   is_active: boolean
@@ -8,6 +8,8 @@ type Params = {
 }
 
 export const use_keyboard_shortcuts = (params: Params) => {
+  const left_alt_pressed_ref = useRef(false)
+
   useEffect(() => {
     const handle_mouse_up = (event: MouseEvent) => {
       if (params.is_active && event.button == 4) {
@@ -16,9 +18,13 @@ export const use_keyboard_shortcuts = (params: Params) => {
     }
 
     const handle_key_down = (event: KeyboardEvent) => {
+      if (event.code == 'AltLeft') {
+        left_alt_pressed_ref.current = true
+      }
+
       if (!params.is_active) return
 
-      if (event.altKey && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
+      if (event.altKey && left_alt_pressed_ref.current && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
         if (event.code == 'Digit1') {
           event.preventDefault()
           params.on_chatbots_click()
@@ -29,11 +35,25 @@ export const use_keyboard_shortcuts = (params: Params) => {
       }
     }
 
+    const handle_key_up = (event: KeyboardEvent) => {
+      if (event.code == 'AltLeft') {
+        left_alt_pressed_ref.current = false
+      }
+    }
+
+    const handle_blur = () => {
+      left_alt_pressed_ref.current = false
+    }
+
     window.addEventListener('mouseup', handle_mouse_up)
     window.addEventListener('keydown', handle_key_down)
+    window.addEventListener('keyup', handle_key_up)
+    window.addEventListener('blur', handle_blur)
     return () => {
       window.removeEventListener('mouseup', handle_mouse_up)
       window.removeEventListener('keydown', handle_key_down)
+      window.removeEventListener('keyup', handle_key_up)
+      window.removeEventListener('blur', handle_blur)
     }
   }, [
     params.is_active,

apps/editor/src/views/prompt/frontend/Main/MainView/components/Header/hooks/use-keyboard-shortcuts.ts

@@ -12,6 +12,7 @@ export const use_keyboard_shortcuts = (params: {
   const [is_alt_pressed, set_is_alt_pressed] = useState(false)
   const alt_interrupted_ref = useRef(false)
   const is_alt_pressed_raw_ref = useRef(false)
+  const left_alt_pressed_ref = useRef(false)
 
   const update_alt_pressed = (val: boolean) => {
     is_alt_pressed_raw_ref.current = val
@@ -20,8 +21,12 @@ export const use_keyboard_shortcuts = (params: {
 
   useEffect(() => {
     const handle_key_down = (event: KeyboardEvent) => {
+      if (event.code == 'AltLeft') {
+        left_alt_pressed_ref.current = true
+      }
+
       if (
-        event.key == 'Alt' &&
+        event.code == 'AltLeft' &&
         !event.shiftKey &&
         !event.ctrlKey &&
         !event.metaKey
@@ -51,13 +56,18 @@ export const use_keyboard_shortcuts = (params: {
     }
 
     const handle_key_up = (event: KeyboardEvent) => {
+      if (event.code == 'AltLeft') {
+        left_alt_pressed_ref.current = false
+      }
+
       if (!event.altKey) {
         alt_interrupted_ref.current = false
-      } else if (event.key != 'Alt') {
+      } else if (event.code != 'AltLeft') {
         alt_interrupted_ref.current = true
       }
       update_alt_pressed(
         event.altKey &&
+          left_alt_pressed_ref.current &&
           !alt_interrupted_ref.current &&
           !event.shiftKey &&
           !event.ctrlKey &&
@@ -66,6 +76,7 @@ export const use_keyboard_shortcuts = (params: {
     }
 
     const handle_blur = () => {
+      left_alt_pressed_ref.current = false
       update_alt_pressed(false)
       alt_interrupted_ref.current = false
     }
@@ -95,7 +106,7 @@ export const use_keyboard_shortcuts = (params: {
     const handle_key_down = (event: KeyboardEvent) => {
       if (params.is_disabled) return
 
-      if (!event.altKey || event.shiftKey || event.metaKey || event.ctrlKey) {
+      if (!event.altKey || !left_alt_pressed_ref.current || event.shiftKey || event.metaKey || event.ctrlKey) {
         return
       }
 

packages/ui/src/components/editor/common/prompts/PromptField/hooks/use-keyboard-shortcuts.ts

@@ -6,6 +6,7 @@ export const use_keyboard_shortcuts = (props: PromptFieldProps) => {
   const [is_alt_pressed, set_is_alt_pressed] = useState(false)
   const is_alt_pressed_raw_ref = useRef(false)
   const pending_edit_format_ref = useRef<EditFormat | null>(null)
+  const left_alt_pressed_ref = useRef(false)
 
   const update_alt_pressed = (val: boolean) => {
     is_alt_pressed_raw_ref.current = val
@@ -27,8 +28,12 @@ export const use_keyboard_shortcuts = (props: PromptFieldProps) => {
 
   useEffect(() => {
     const handle_key_down = (e: KeyboardEvent) => {
+      if (e.code == 'AltLeft') {
+        left_alt_pressed_ref.current = true
+      }
+
       let format: EditFormat | undefined
-      if (e.altKey && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+      if (e.altKey && left_alt_pressed_ref.current && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
         if (e.code == 'Escape') {
           e.preventDefault()
           if (props.on_target_change) {
@@ -57,7 +62,7 @@ export const use_keyboard_shortcuts = (props: PromptFieldProps) => {
         }
       }
 
-      if (e.key == 'Alt' && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+      if (e.code == 'AltLeft' && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
         if (!alt_interrupted_ref.current) {
           update_alt_pressed(true)
         }
@@ -81,13 +86,17 @@ export const use_keyboard_shortcuts = (props: PromptFieldProps) => {
       }
     }
     const handle_key_up = (e: KeyboardEvent) => {
+      if (e.code == 'AltLeft') {
+        left_alt_pressed_ref.current = false
+      }
       if (!e.altKey) {
         alt_interrupted_ref.current = false
-      } else if (e.key != 'Alt') {
+      } else if (e.code != 'AltLeft') {
         alt_interrupted_ref.current = true
       }
       update_alt_pressed(
         e.altKey &&
+          left_alt_pressed_ref.current &&
           !alt_interrupted_ref.current &&
           !e.shiftKey &&
           !e.ctrlKey &&
@@ -97,6 +106,7 @@ export const use_keyboard_shortcuts = (props: PromptFieldProps) => {
     const handle_blur = () => {
       update_alt_pressed(false)
       alt_interrupted_ref.current = false
+      left_alt_pressed_ref.current = false
     }
     window.addEventListener('keydown', handle_key_down)
     window.addEventListener('keyup', handle_key_up)
@@ -122,7 +132,7 @@ export const use_keyboard_shortcuts = (props: PromptFieldProps) => {
       e.stopPropagation()
       return
     }
-    if (e.key == 'c' && e.altKey && (e.ctrlKey || e.metaKey)) {
+    if (e.key == 'c' && e.altKey && left_alt_pressed_ref.current && (e.ctrlKey || e.metaKey)) {
       if (
         !props.is_action_disabled &&
         props.on_copy &&