From c7d28d2b2f864d1020bfc17b0a95b15e5a67dec6 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 4 May 2023 22:25:58 +0530
Subject: [PATCH] chore: fix keyboard shortcut priority

---
 .../ui-services/src/Keyboard/KeyboardService.ts    | 14 ++++++--------
 .../EditorWidthSelectionModal.tsx                  |  2 +-
 .../Components/Preferences/PreferencesView.tsx     | 14 ++++++++++++++
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/ui-services/src/Keyboard/KeyboardService.ts b/packages/ui-services/src/Keyboard/KeyboardService.ts
index 108deb109..0ed0d822e 100644
--- a/packages/ui-services/src/Keyboard/KeyboardService.ts
+++ b/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)
     }
   }
 
diff --git a/packages/web/src/javascripts/Components/EditorWidthSelectionModal/EditorWidthSelectionModal.tsx b/packages/web/src/javascripts/Components/EditorWidthSelectionModal/EditorWidthSelectionModal.tsx
index fdeb3ea09..32eecfebc 100644
--- a/packages/web/src/javascripts/Components/EditorWidthSelectionModal/EditorWidthSelectionModal.tsx
+++ b/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])
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
index 73ac0a468..44b9ca91a 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
+++ b/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}