Merge pull request #350 from lightningrodlabs/349-using-ctrl-enter-ma…

…y-be-the-wrong-key-combination fix keyboard key modifiers for create outcome
lightningrodlabs · Nov 23, 2023 · 4b282b4 · 4b282b4
2 parents db49b03 + 14db5a7
commit 4b282b4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/web/src/components/MapViewCreateOutcome/MapViewCreateOutcome.component.tsx b/web/src/components/MapViewCreateOutcome/MapViewCreateOutcome.component.tsx
@@ -23,6 +23,7 @@ import Checkbox from '../Checkbox/Checkbox'
 import ButtonCheckbox from '../ButtonCheckbox/ButtonCheckbox'
 import { coordsCanvasToPage } from '../../drawing/coordinateSystems'
 import Icon from '../Icon/Icon'
+import checkForKeyboardKeyModifier from '../../event-listeners/osPlatformHelper'
 
 export type MapViewCreateOutcomeOwnProps = {
   projectId: CellIdString
@@ -93,7 +94,7 @@ const MapViewCreateOutcome: React.FC<MapViewCreateOutcomeProps> = ({
     const handleKeyDown = (e: KeyboardEvent) => {
       if (textIsFocused && e.key === 'Enter') {
         handleSubmit()
-      } else if (!textIsFocused && e.key === 'Enter' && e.metaKey) {
+      } else if (!textIsFocused && e.key === 'Enter' && checkForKeyboardKeyModifier(e)) {
         handleSubmit()
       }
     }

diff --git a/web/src/event-listeners/index.ts b/web/src/event-listeners/index.ts
@@ -84,17 +84,8 @@ import {
   alterSiblingOrder,
 } from '../connections'
 import handleOutcomeConnectorMouseUp from '../redux/ephemeral/outcome-connector/handler'
+import checkForKeyboardKeyModifier from './osPlatformHelper'
 
-// The "modifier" key is different on Mac and non-Mac
-// Pattern borrowed from TinyKeys library.
-// --
-// https://github.com/jamiebuilds/tinykeys/blob/e0d23b4f248af59ffbbe52411505c3d681c73045/src/tinykeys.ts#L50-L54
-var macOsPattern = /Mac|macOS|iPod|iPhone|iPad/
-let platform =
-  // @ts-ignore
-  navigator?.userAgentData?.platform || navigator?.platform || 'unknown'
-const isMacish = macOsPattern.test(platform)
-const operatingSystemModifier = isMacish ? 'metaKey' : 'ctrlKey'
 
 function handleMouseUpForOutcomeForm({
   state,
@@ -352,7 +343,7 @@ export default function setupEventListeners(
         break
       case 'c':
         if (
-          event[operatingSystemModifier] &&
+          checkForKeyboardKeyModifier(event) &&
           state.ui.selection.selectedOutcomes.length &&
           !state.ui.outcomeForm.isOpen &&
           !state.ui.expandedView.isOpen
@@ -362,7 +353,7 @@ export default function setupEventListeners(
         break
       case 'v':
         if (
-          event[operatingSystemModifier] &&
+          checkForKeyboardKeyModifier(event) &&
           state.ui.outcomeClone.outcomes.length &&
           !state.ui.outcomeForm.isOpen &&
           !state.ui.expandedView.isOpen

diff --git a/web/src/event-listeners/osPlatformHelper.ts b/web/src/event-listeners/osPlatformHelper.ts
@@ -0,0 +1,17 @@
+
+// The "modifier" key is different on Mac and non-Mac
+// Pattern borrowed from TinyKeys library.
+// --
+// https://github.com/jamiebuilds/tinykeys/blob/e0d23b4f248af59ffbbe52411505c3d681c73045/src/tinykeys.ts#L50-L54
+var macOsPattern = /Mac|macOS|iPod|iPhone|iPad/
+let platform =
+  // @ts-ignore
+  navigator?.userAgentData?.platform || navigator?.platform || 'unknown'
+const isMacish = macOsPattern.test(platform)
+const operatingSystemModifier = isMacish ? 'metaKey' : 'ctrlKey'
+
+export default function checkForKeyboardKeyModifier(
+  event: KeyboardEvent
+): boolean {
+  return event[operatingSystemModifier]
+}