chore: fix keyboard shortcut priority

packages/ui-services/src/Keyboard/KeyboardService.ts

@@ -1,5 +1,4 @@
 import { Environment, Platform } from '@standardnotes/snjs'
-import { removeFromArray } from '@standardnotes/utils'
 import { eventMatchesKeyAndModifiers } from './eventMatchesKeyAndModifiers'
 import { KeyboardCommand } from './KeyboardCommands'
 import { KeyboardKeyEvent } from './KeyboardKeyEvent'
@@ -10,7 +9,7 @@ import { getKeyboardShortcuts } from './getKeyboardShortcuts'
 
 export class KeyboardService {
   readonly activeModifiers = new Set<KeyboardModifier>()
-  private commandHandlers: KeyboardCommandHandler[] = []
+  private commandHandlers = new Set<KeyboardCommandHandler>()
   private commandMap = new Map<KeyboardCommand, KeyboardShortcut>()
 
   constructor(private platform: Platform, environment: Environment) {
@@ -29,7 +28,7 @@ export class KeyboardService {
   }
 
   public deinit() {
-    this.commandHandlers.length = 0
+    this.commandHandlers.clear()
     window.removeEventListener('keydown', this.handleKeyDown)
     window.removeEventListener('keyup', this.handleKeyUp)
     window.removeEventListener('blur', this.handleWindowBlur)
@@ -130,7 +129,7 @@ export class KeyboardService {
   private handleCommand(command: KeyboardCommand, event: KeyboardEvent, keyEvent: KeyboardKeyEvent): void {
     const target = event.target as HTMLElement
 
-    for (const observer of this.commandHandlers) {
+    for (const observer of Array.from(this.commandHandlers).reverse()) {
       if (observer.command !== command) {
         continue
       }
@@ -166,7 +165,7 @@ export class KeyboardService {
   }
 
   public triggerCommand(command: KeyboardCommand, data?: unknown): void {
-    for (const observer of this.commandHandlers) {
+    for (const observer of Array.from(this.commandHandlers).reverse()) {
       if (observer.command !== command) {
         continue
       }
@@ -186,13 +185,12 @@ export class KeyboardService {
   }
 
   addCommandHandler(observer: KeyboardCommandHandler): () => void {
-    this.commandHandlers.push(observer)
+    this.commandHandlers.add(observer)
 
-    const thislessObservers = this.commandHandlers
     return () => {
       observer.onKeyDown = undefined
       observer.onKeyDown = undefined
-      removeFromArray(thislessObservers, observer)
+      this.commandHandlers.delete(observer)
     }
   }
 

packages/web/src/javascripts/Components/EditorWidthSelectionModal/EditorWidthSelectionModal.tsx

@@ -93,7 +93,7 @@ const EditorWidthSelectionModal = ({
       command: ESCAPE_COMMAND,
       onKeyDown() {
         close()
-        return
+        return true
       },
     })
   }, [application.keyboardService, close])

packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx

@@ -9,6 +9,8 @@ import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
 import Modal from '../Modal/Modal'
 import { classNames } from '@standardnotes/snjs'
 import { isIOS } from '@/Utils'
+import { useCommandService } from '../CommandProvider'
+import { ESCAPE_COMMAND } from '@standardnotes/ui-services'
 
 const PreferencesView: FunctionComponent<PreferencesProps> = ({
   application,
@@ -17,6 +19,8 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
   userProvider,
   mfaProvider,
 }) => {
+  const commandService = useCommandService()
+
   const menu = useMemo(
     () => new PreferencesMenu(application, viewControllerManager.enableUnfinishedFeatures),
     [viewControllerManager.enableUnfinishedFeatures, application],
@@ -42,6 +46,16 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
     }
   }, [addAndroidBackHandler, closePreferences])
 
+  useEffect(() => {
+    return commandService.addCommandHandler({
+      command: ESCAPE_COMMAND,
+      onKeyDown: () => {
+        closePreferences()
+        return true
+      },
+    })
+  }, [commandService, closePreferences])
+
   return (
     <Modal
       close={closePreferences}