From 0a262de3db40bab5eebef5bf3cf91293d960232e Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Wed, 19 May 2021 14:53:52 -0300
Subject: [PATCH] fix: handle components keydown and keyup actions

---
 .../directives/views/componentView.ts         | 14 ++++-
 app/assets/javascripts/services/ioService.ts  | 60 +++++++++++++------
 2 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/directives/views/componentView.ts b/app/assets/javascripts/directives/views/componentView.ts
index a4488e17a..641b8e5ac 100644
--- a/app/assets/javascripts/directives/views/componentView.ts
+++ b/app/assets/javascripts/directives/views/componentView.ts
@@ -146,8 +146,18 @@ class ComponentViewCtrl implements ComponentViewScope {
       identifier: 'component-view-' + Math.random(),
       areas: [this.component.area],
       actionHandler: (component, action, data) => {
-        if (action === ComponentAction.SetSize) {
-          this.application.componentManager!.handleSetSizeEvent(component, data);
+        switch (action) {
+          case (ComponentAction.SetSize):
+            this.application.componentManager!.handleSetSizeEvent(component, data);
+            break;
+          case (ComponentAction.KeyDown):
+            this.application.io.handleComponentKeyDown(data.keyboardModifier);
+            break;
+          case (ComponentAction.KeyUp):
+            this.application.io.handleComponentKeyUp(data.keyboardModifier);
+            break;
+          default:
+            return;
         }
       }
     });
diff --git a/app/assets/javascripts/services/ioService.ts b/app/assets/javascripts/services/ioService.ts
index cbbb0de21..bfc503dee 100644
--- a/app/assets/javascripts/services/ioService.ts
+++ b/app/assets/javascripts/services/ioService.ts
@@ -50,37 +50,59 @@ export class IOService {
     (this.handleWindowBlur as unknown) = undefined;
   }
 
+  private addActiveModifier = (modifier: KeyboardModifier | undefined): void => {
+    if (!modifier) {
+      return;
+    }
+    switch (modifier) {
+      case KeyboardModifier.Meta: {
+        if (this.isMac) {
+          this.activeModifiers.add(modifier);
+        }
+        break;
+      }
+      case KeyboardModifier.Ctrl: {
+        if (!this.isMac) {
+          this.activeModifiers.add(modifier);
+        }
+        break;
+      }
+      default: {
+        this.activeModifiers.add(modifier);
+        break;
+      }
+    }
+  }
+
+  private removeActiveModifier = (modifier: KeyboardModifier | undefined): void => {
+    if (!modifier) {
+      return;
+    }
+    this.activeModifiers.delete(modifier);
+  }
+
   handleKeyDown = (event: KeyboardEvent): void => {
     for (const modifier of this.modifiersForEvent(event)) {
-      switch (modifier) {
-        case KeyboardModifier.Meta: {
-          if (this.isMac) {
-            this.activeModifiers.add(modifier);
-          }
-          break;
-        }
-        case KeyboardModifier.Ctrl: {
-          if (!this.isMac) {
-            this.activeModifiers.add(modifier);
-          }
-          break;
-        }
-        default: {
-          this.activeModifiers.add(modifier);
-          break;
-        }
-      }
+      this.addActiveModifier(modifier);
     }
     this.notifyObserver(event, KeyboardKeyEvent.Down);
   };
 
+  handleComponentKeyDown = (modifier: KeyboardModifier | undefined): void => {
+    this.addActiveModifier(modifier);
+  }
+
   handleKeyUp = (event: KeyboardEvent): void => {
     for (const modifier of this.modifiersForEvent(event)) {
-      this.activeModifiers.delete(modifier);
+      this.removeActiveModifier(modifier);
     }
     this.notifyObserver(event, KeyboardKeyEvent.Up);
   };
 
+  handleComponentKeyUp = (modifier: KeyboardModifier | undefined): void => {
+    this.removeActiveModifier(modifier);
+  }
+
   handleWindowBlur = (): void => {
     for (const modifier of this.activeModifiers) {
       this.activeModifiers.delete(modifier);