From 5797a1d8e551661dbea51760a9b9d7d143044bae Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Mon, 13 Dec 2021 14:31:43 +0530
Subject: [PATCH] Add typing outside focus on msg feild (#112)

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/organisms/navigation/Drawer.scss  |  2 +-
 src/app/organisms/room/RoomViewCmdBar.jsx | 10 ----------
 src/app/organisms/room/RoomViewInput.jsx  | 12 ++++--------
 src/app/organisms/room/RoomViewInput.scss | 23 +++--------------------
 src/app/organisms/search/Search.scss      |  1 +
 src/client/event/hotkeys.js               | 15 ++++++++++++++-
 6 files changed, 23 insertions(+), 40 deletions(-)

diff --git a/src/app/organisms/navigation/Drawer.scss b/src/app/organisms/navigation/Drawer.scss
index c16b9748..0a33c4d8 100644
--- a/src/app/organisms/navigation/Drawer.scss
+++ b/src/app/organisms/navigation/Drawer.scss
@@ -49,7 +49,7 @@
   &::before {
     position: absolute;
     top: 0;
-    
+    z-index: 99;
     content: '';
     display: inline-block;
     width: 100%;
diff --git a/src/app/organisms/room/RoomViewCmdBar.jsx b/src/app/organisms/room/RoomViewCmdBar.jsx
index e4a3e634..676e8f85 100644
--- a/src/app/organisms/room/RoomViewCmdBar.jsx
+++ b/src/app/organisms/room/RoomViewCmdBar.jsx
@@ -220,14 +220,6 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
     }
     deactivateCmd();
   }
-  function executeCmd() {
-    if (cmd.suggestions.length === 0) return;
-    fireCmd({
-      prefix: cmd.prefix,
-      option: cmd.option,
-      result: cmd.suggestions[0],
-    });
-  }
 
   function listenKeyboard(event) {
     const { activeElement } = document;
@@ -258,13 +250,11 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
   useEffect(() => {
     if (cmd !== null) document.body.addEventListener('keydown', listenKeyboard);
     viewEvent.on('cmd_process', processCmd);
-    viewEvent.on('cmd_exe', executeCmd);
     asyncSearch.on(asyncSearch.RESULT_SENT, displaySuggestions);
     return () => {
       if (cmd !== null) document.body.removeEventListener('keydown', listenKeyboard);
 
       viewEvent.removeListener('cmd_process', processCmd);
-      viewEvent.removeListener('cmd_exe', executeCmd);
       asyncSearch.removeListener(asyncSearch.RESULT_SENT, displaySuggestions);
     };
   }, [cmd]);
diff --git a/src/app/organisms/room/RoomViewInput.jsx b/src/app/organisms/room/RoomViewInput.jsx
index a262fee5..9a9f6f35 100644
--- a/src/app/organisms/room/RoomViewInput.jsx
+++ b/src/app/organisms/room/RoomViewInput.jsx
@@ -243,10 +243,7 @@ function RoomViewInput({
   const handleKeyDown = (e) => {
     if (e.keyCode === 13 && e.shiftKey === false) {
       e.preventDefault();
-
-      if (isCmdActivated) {
-        viewEvent.emit('cmd_exe');
-      } else sendMessage();
+      sendMessage();
     }
   };
 
@@ -298,7 +295,7 @@ function RoomViewInput({
   function renderInputs() {
     if (!canISend) {
       return (
-        <Text className="room-input__disallowed">You do not have permission to post to this room</Text>
+        <Text className="room-input__alert">You do not have permission to post to this room</Text>
       );
     }
     return (
@@ -312,6 +309,7 @@ function RoomViewInput({
           <ScrollView autoHide>
             <Text className="room-input__textarea-wrapper">
               <TextareaAutosize
+                id="message-textarea"
                 ref={textAreaRef}
                 onChange={handleMsgTyping}
                 onPaste={handlePaste}
@@ -385,9 +383,7 @@ function RoomViewInput({
       { attachment !== null && attachFile() }
       <form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
         {
-          roomTimeline.room.isSpaceRoom()
-            ? <Text className="room-input__space" variant="b1">Spaces are yet to be implemented</Text>
-            : renderInputs()
+          renderInputs()
         }
       </form>
     </>
diff --git a/src/app/organisms/room/RoomViewInput.scss b/src/app/organisms/room/RoomViewInput.scss
index 9e0f1a91..ccf5d58c 100644
--- a/src/app/organisms/room/RoomViewInput.scss
+++ b/src/app/organisms/room/RoomViewInput.scss
@@ -1,18 +1,12 @@
 .room-input {
   padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
   display: flex;
-  min-height: 48px;
+  min-height: 56px;
 
-  &__disallowed {
-    flex: 1;
-    text-align: center;
-  }
-
-  &__space {
-    min-width: 0;
-    align-self: center;
+  &__alert {
     margin: auto;
     padding: 0 var(--sp-tight);
+    text-align: center;
   }
 
   &__input-container {
@@ -30,17 +24,6 @@
       transform: scale(0.8);
       margin: 0 var(--sp-extra-tight);
     }
-
-    & .btn-cmd-esc {
-      display: none;
-      margin: 0 var(--sp-extra-tight);
-      padding: var(--sp-ultra-tight) var(--sp-extra-tight);
-      background-color: var(--bg-surface);
-      border-radius: calc(var(--bo-radius) / 2);
-      box-shadow: var(--bs-surface-border);
-      cursor: pointer;
-      & .text { color: var(--tc-surface-normal); }
-    }
  
     & .scrollbar {
       max-height: 50vh;
diff --git a/src/app/organisms/search/Search.scss b/src/app/organisms/search/Search.scss
index 61da28b4..34309a45 100644
--- a/src/app/organisms/search/Search.scss
+++ b/src/app/organisms/search/Search.scss
@@ -54,6 +54,7 @@
     &::after {
       position: absolute;
       top: 0;
+      z-index: 99;
       content: "";
       display: inline-block;
       width: 100%;
diff --git a/src/client/event/hotkeys.js b/src/client/event/hotkeys.js
index f0175b05..a3547248 100644
--- a/src/client/event/hotkeys.js
+++ b/src/client/event/hotkeys.js
@@ -6,11 +6,24 @@ function listenKeyboard(event) {
   if (event.ctrlKey) {
     // k - for search Modal
     if (event.keyCode === 75) {
-      if (navigation.isRawModalVisible) return;
       event.preventDefault();
+      if (navigation.isRawModalVisible) return;
       openSearch();
     }
   }
+  if (!event.ctrlKey && !event.altKey) {
+    if (navigation.isRawModalVisible) return;
+    if (['input', 'textarea'].includes(document.activeElement.type)) {
+      return;
+    }
+    if (event.keyCode < 48
+      || (event.keyCode >= 91 && event.keyCode <= 93)
+      || (event.keyCode >= 112 && event.keyCode <= 183)) {
+      return;
+    }
+    const msgTextarea = document.getElementById('message-textarea');
+    msgTextarea?.focus();
+  }
 }
 
 function initHotkeys() {