From 497f7e7ad3ca14c0f1fbde71bef4b2cab02f6c24 Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Mon, 11 Sep 2023 14:03:15 +0200
Subject: [PATCH] Fix emoji input behaviour

---
 src/components/NewNote/EditBox/EditBox.tsx | 15 ++++++++-----
 src/constants.ts                           |  2 +-
 src/pages/Messages.tsx                     | 26 ++++++++--------------
 3 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/components/NewNote/EditBox/EditBox.tsx b/src/components/NewNote/EditBox/EditBox.tsx
index 6e0ee22..113bb15 100644
--- a/src/components/NewNote/EditBox/EditBox.tsx
+++ b/src/components/NewNote/EditBox/EditBox.tsx
@@ -102,6 +102,7 @@ const EditBox: Component<{
     const elm = textArea as AutoSizedTextArea;
     const preview = textPreview;
 
+
     if(elm.nodeName !== 'TEXTAREA' || elm.id !== `${prefix()}new_note_text_area` || !preview) {
       return;
     }
@@ -110,19 +111,20 @@ const EditBox: Component<{
 
     !elm._baseScrollHeight && getScrollHeight(elm);
 
-
     if (elm.scrollHeight >= (maxHeight / 3)) {
       elm.style.height = '46vh';
       return;
     }
 
     elm.style.height = 'auto';
+
     elm.rows = minRows;
     const rows = Math.ceil((elm.scrollHeight - elm._baseScrollHeight) / 20);
     elm.rows = minRows + rows;
 
     const rect = elm.getBoundingClientRect();
 
+
     preview.style.maxHeight = `${maxHeight - rect.height - 120}px`;
   }
 
@@ -163,7 +165,6 @@ const EditBox: Component<{
     }
 
     if (isEmojiInput()) {
-
       if (e.code === 'ArrowDown') {
         e.preventDefault();
         setHighlightedEmoji(i => {
@@ -246,6 +247,7 @@ const EditBox: Component<{
           return false;
         }
         e.preventDefault();
+        emojiResults.length === 0 && setEmojiResults(emojiSearch(emojiQuery()));
         selectEmoji(emojiResults[highlightedEmoji()]);
         setHighlightedEmoji(0);
         return false;
@@ -261,7 +263,7 @@ const EditBox: Component<{
           setEmojiInput(false);
           return false;
         }
-      } else {
+      } else if (!['Shift', 'Control', 'Meta'].includes(e.key)) {
         setEmojiQuery(q => q + e.key);
         return false;
       }
@@ -341,7 +343,7 @@ const EditBox: Component<{
           setMentioning(false);
           return false;
         }
-      } else {
+      } else if (!['Shift', 'Control', 'Meta'].includes(e.key)) {
         setPreQuery(q => q + e.key);
         return false
       }
@@ -927,7 +929,10 @@ const EditBox: Component<{
   });
 
   const selectEmoji = (emoji: EmojiOption) => {
-    if (!textArea) {
+    if (!textArea || !emoji) {
+      setEmojiInput(false);
+      setEmojiQuery('');
+      setEmojiResults(() => []);
       return;
     }
 
diff --git a/src/constants.ts b/src/constants.ts
index 8aebb95..4f3af2a 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -257,7 +257,7 @@ export const defaultNotificationSettings: Record<string, boolean> = {
   POST_YOUR_POST_WAS_MENTIONED_IN_WAS_REPLIED_TO: true,
 };
 
-export const emojiSearchLimit = 1;
+export const emojiSearchLimit = 0;
 
 export const today = (new Date()).getTime();
 
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index a3fbed0..0c44b53 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -20,7 +20,7 @@ import SearchOption from '../components/Search/SearchOption';
 import { debounce, isVisibleInContainer, uuidv4 } from '../utils';
 import { useSearchContext } from '../contexts/SearchContext';
 import { createStore } from 'solid-js/store';
-import { editMentionRegex } from '../constants';
+import { editMentionRegex, emojiSearchLimit } from '../constants';
 import Search from '../components/Search/Search';
 import { useProfileContext } from '../contexts/ProfileContext';
 import Paginator from '../components/Paginator/Paginator';
@@ -125,8 +125,6 @@ export const parseNpubLinks = (text: string, mentionedUsers: Record<string, Prim
 
 };
 
-const emojiSearchLimit = 2;
-
 const Messages: Component = () => {
   const instanceId = uuidv4();
 
@@ -371,7 +369,7 @@ const Messages: Component = () => {
       return false;
     }
 
-    const mentionSeparators = ['Enter', 'Space', 'Comma'];
+    const mentionSeparators = ['Enter', 'Space', 'Comma', 'Tab'];
 
     if (!isMentioning() && !isEmojiInput() && e.code === 'Enter' && !e.shiftKey) {
       e.preventDefault();
@@ -472,6 +470,7 @@ const Messages: Component = () => {
           return false;
         }
         e.preventDefault();
+        emojiResults.length === 0 && setEmojiResults(emojiSearch(emojiQuery()));
         selectEmoji(emojiResults[highlightedEmoji()]);
         setHighlightedEmoji(0);
         return false;
@@ -487,16 +486,11 @@ const Messages: Component = () => {
           setEmojiInput(false);
           return false;
         }
-      } else {
+      } else if (!['Shift', 'Control', 'Meta'].includes(e.key)) {
         setEmojiQuery(q => q + e.key);
         return false;
       }
 
-      // if (emojiQuery().length === 0) {
-      //   setEmojiInput(false);
-      //   return false;
-      // }
-
       return false;
     }
 
@@ -572,16 +566,11 @@ const Messages: Component = () => {
           setMentioning(false);
           return false;
         }
-      } else {
+      } else if (!['Shift', 'Control', 'Meta'].includes(e.key)) {
         setPreQuery(q => q + e.key);
         return false
       }
 
-      // if (preQuery().length === 0) {
-      //   setMentioning(false);
-      //   return false;
-      // }
-
       return false;
     }
 
@@ -748,7 +737,10 @@ const Messages: Component = () => {
   };
 
   const selectEmoji = (emoji: EmojiOption) => {
-    if (!newMessageInput) {
+    if (!newMessageInput || !emoji) {
+      setEmojiInput(false);
+      setEmojiQuery('');
+      setEmojiResults(() => []);
       return;
     }