poll for emoji event when user moves cursor with kbd or mouse and replace emoji token with code point

ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml

@@ -6,6 +6,7 @@ import QtQuick.Dialogs 1.0
 import "../components"
 import "../../../../shared"
 import "../../../../imports"
+import "../components/emojiList.js" as EmojiJSON
 
 Rectangle {
     id: rectangle
@@ -55,33 +56,55 @@ Rectangle {
         if (event.modifiers === Qt.NoModifier && (event.key === Qt.Key_Enter || event.key === Qt.Key_Return)) {
             sendMsg(event);
         }
+    }
 
+    function onRelease(event) {
         emojiEvent = emojiHandler(emojiEvent, event);
     }
 
+    function onMouseClicked() {
+        emojiEvent = emojiHandler(emojiEvent, {key: null});
+    }
 
     function emojiHandler(emojiEvent, event) {
-
         var msg = chatsModel.plainText(Emoji.deparse(txtData.text).trim());
 
-        if (emojiEvent == false && event.key == Qt.Key_Colon) {
+        // check if user has placed cursor near valid emoji colon token
-            if (isSpace(msg.charAt(msg.length - 1)) == true) {
+        var index = msg.lastIndexOf(':', txtData.cursorPosition);
-                console.log('emoji event');
+        if (index > 0) {
+            var substr = msg.substr(index, txtData.cursorPosition - index);
+            console.log("MESSAGE: ", msg, txtData.cursorPosition, index, substr, validSubstr(substr));
+            emojiEvent = validSubstr(substr)
+        } 
+
+        console.log("EVENT: ", event.key, Qt.Key_Colon, event.key === Qt.Key_Colon, emojiEvent);
+
+        // state machine to handle different forms of the emoji event state
+        if (emojiEvent === false && event.key === Qt.Key_Colon) {
+            if (msg.length <= 1 || isSpace(msg.charAt(txtData.cursorPosition - 1)) === true) {
                 return true;
             }
             return false;
-        } else if (emojiEvent == true && isKeyValid(event.key) == true) {
+        } else if (emojiEvent === true && event.key === Qt.Key_Colon) {
-            console.log('popup');
+            var index = msg.lastIndexOf(':', txtData.cursorPosition - 2);
-            return true;
+            if (index >= 0) {
-        } else if (emojiEvent == true && event.key == Qt.Key_Colon) {
+                var shortname = msg.substr(index, txtData.cursorPosition);
-            var index = msg.indexOf(':', 0);
+                var codePoint = getEmojiUnicodeFromShortname(shortname);
-            txtData.remove(index - 1, txtData.length);
+                var newText = (codePoint !== undefined) ? Emoji.fromCodePoint(codePoint) : shortname;
-            txtData.insert(txtData.length, " EMOJI");
+
+                txtData.remove(index, txtData.cursorPosition);
+                txtData.insert(index, newText);
 
                 if (event) event.accepted = true;
-
                 return false;
-        } else if (emojiEvent == true && isKeyValid(event.key) == false) {
+            }
+            return true;
+        } else if (emojiEvent === true && isKeyValid(event.key) === true) {
+            console.log('popup');
+            return true;
+        } 
+
+        else if (emojiEvent === true && isKeyValid(event.key) === false) {
             console.log('emoji event stopped');
             return false;
         }
@@ -89,18 +112,38 @@ Rectangle {
         return false;
     }
 
-    function isKeyValid(key) {
+    function validSubstr(substr) {
-        if (isKeyAlpha(key) == true || isKeyDigit(key) == true || key == Qt.Key_Underscore || key == Qt.Key_Shift)
+        for(var i = 0; i < substr.length; i++) {
-            return true;
+            var c = substr.charAt(i);
+            if (isSpace(c) === true || isPunct(c) === true)
                 return false;
         }
+        return true;
+    }
+
+    function isKeyValid(key) {
+        if (key === Qt.Key_Space || key ===  Qt.Key_Tab ||
+            (key >= Qt.Key_Exclam && key <= Qt.Key_Slash) || 
+            (key >= Qt.Key_Semicolon && key <= Qt.Key_Question) ||
+            (key >= Qt.Key_BracketLeft && key <= Qt.Key_hyphen))
+        {
+            return false;
+        }
+        return true;
+    }
 
     function isSpace(c) {
-        if (c == ' ' || c == '\t' || c == '\n' || c == '\r')
+        if (/( |\t|\n|\r)/.test(c))
             return true
         return false
     }
 
+    function isPunct(c) {
+        if (/(!|\@|#|\$|%|\^|&|\*|\(|\)|_|\+|\||-|=|\\|{|}|[|]|"|;|'|<|>|\?|,|\.|\/)/.test(c))
+            return true;
+        return false;
+    }
+
     function isKeyAlpha(key) {
         if (key >= Qt.Key_A && key <= Qt.Key_Z)
             return true;
@@ -113,6 +156,19 @@ Rectangle {
         return false;
     }
 
+    // search for shortname
+    function getEmojiUnicodeFromShortname(shortname) {
+        var _emoji;
+        EmojiJSON.emoji_json.forEach(function(emoji) {
+            if (emoji.shortname === shortname)
+                _emoji = emoji;
+        })
+
+        if (_emoji !== undefined)
+            return _emoji.unicode;
+        return undefined;
+    }
+
     FileDialog {
         id: imageDialog
         //% "Please choose an image"
@@ -151,9 +207,15 @@ Rectangle {
             //% "Type a message..."
             placeholderText: qsTrId("type-a-message")
             Keys.onPressed: onEnter(event)
+            Keys.onReleased: onRelease(event) // gives much more up to date cursorPosition
             background: Rectangle {
                 color: Style.current.transparent
             }
+
+            TapHandler {
+                id: mousearea
+                onTapped: onMouseClicked()
+            }
         }
     }