fixed #75: added esc btn to disable cmd mode

diff --git a/src/app/organisms/channel/ChannelViewInput.jsx b/src/app/organisms/channel/ChannelViewInput.jsx
index 08b32c0ea0b62dcbb0ad6e62cdeda6a4db2da7fb..f335bb4fa93ea447491e08e78ff4910660b88463 100644 (file)
--- a/src/app/organisms/channel/ChannelViewInput.jsx
+++ b/src/app/organisms/channel/ChannelViewInput.jsx
@@ -45,6 +45,7 @@ function ChannelViewInput({
   const uploadInputRef = useRef(null);
   const uploadProgressRef = useRef(null);
   const rightOptionsRef = useRef(null);
+  const escBtnRef = useRef(null);
 
   const TYPING_TIMEOUT = 5000;
   const mx = initMatrix.matrixClient;
@@ -99,6 +100,7 @@ function ChannelViewInput({
     isCmdActivated = true;
     requestAnimationFrame(() => {
       inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-positive)';
+      escBtnRef.current.style.display = 'block';
     });
     rightOptionsA11Y(false);
     viewEvent.emit('cmd_activate', prefix);
@@ -107,12 +109,17 @@ function ChannelViewInput({
     if (inputBaseRef.current !== null) {
       requestAnimationFrame(() => {
         inputBaseRef.current.style.boxShadow = 'var(--bs-surface-border)';
+        escBtnRef.current.style.display = 'none';
       });
       rightOptionsA11Y(true);
     }
     isCmdActivated = false;
     cmdCursorPos = null;
   }
+  function deactivateCmdAndEmit() {
+    deactivateCmd();
+    viewEvent.emit('cmd_deactivate');
+  }
   function errorCmd() {
     requestAnimationFrame(() => {
       inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-danger)';
@@ -186,11 +193,6 @@ function ChannelViewInput({
   }, [roomId]);
 
   async function sendMessage() {
-    if (isCmdActivated) {
-      viewEvent.emit('cmd_exe');
-      return;
-    }
-
     const msgBody = textAreaRef.current.value;
     if (roomsInput.isSending(roomId)) return;
     if (msgBody.trim() === '' && attachment === null) return;
@@ -236,10 +238,7 @@ function ChannelViewInput({
 
     const cmdParts = targetInput.match(CMD_REGEX);
     if (cmdParts === null) {
-      if (isCmdActivated) {
-        deactivateCmd();
-        viewEvent.emit('cmd_deactivate');
-      }
+      if (isCmdActivated) deactivateCmdAndEmit();
       return;
     }
     const cmdPrefix = cmdParts[1];
@@ -249,8 +248,7 @@ function ChannelViewInput({
       // skip emoji autofill command if link is suspected.
       const checkForLink = targetInput.slice(0, cmdParts.index);
       if (checkForLink.match(/(http|https|mailto|matrix|ircs|irc)$/)) {
-        deactivateCmd();
-        viewEvent.emit('cmd_deactivate');
+        deactivateCmdAndEmit();
         return;
       }
     }
@@ -276,7 +274,14 @@ function ChannelViewInput({
   function handleKeyDown(e) {
     if (e.keyCode === 13 && e.shiftKey === false) {
       e.preventDefault();
-      sendMessage();
+
+      if (isCmdActivated) {
+        viewEvent.emit('cmd_exe');
+      } else sendMessage();
+    }
+    if (e.keyCode === 27 && isCmdActivated) {
+      deactivateCmdAndEmit();
+      e.preventDefault();
     }
   }
 
@@ -317,6 +322,7 @@ function ChannelViewInput({
             </Text>
           </ScrollView>
           {isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />}
+          <button ref={escBtnRef} tabIndex="-1" onClick={deactivateCmdAndEmit} className="btn-cmd-esc" type="button"><Text variant="b3">ESC</Text></button>
         </div>
         <div ref={rightOptionsRef} className="channel-input__option-container">
           <IconButton

diff --git a/src/app/organisms/channel/ChannelViewInput.scss b/src/app/organisms/channel/ChannelViewInput.scss
index 46c703948df8ca4b69a5b7c7f6bebed04829988e..fa881cf6b62b9b6a171a8e44d6c6c2cd02cfd355 100644 (file)
--- a/src/app/organisms/channel/ChannelViewInput.scss
+++ b/src/app/organisms/channel/ChannelViewInput.scss
@@ -25,6 +25,17 @@
       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-tight);
+      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;
       flex: 1;