fix: display emojis on input textarea

src/app/chat/view.nim

@@ -85,6 +85,9 @@ QtObject:
         let pubKey = matches[0]
         result = message.replace(mention, "@" & pubKey)
 
+  proc plainText(self: ChatsView, input: string): string {.slot.} =
+    result = plain_text(input)
+
   proc sendMessage*(self: ChatsView, message: string, replyTo: string, contentType: int = ContentType.Message.int) {.slot.} =
     let aliasPattern = re(r"(@[A-z][a-z]* [A-z][a-z]* [A-z][a-z]*)", flags = {reStudy, reIgnoreCase})
     let ensPattern = re(r"(@\w*(?=\.stateofus\.eth))", flags = {reStudy, reIgnoreCase})
@@ -99,7 +102,8 @@ QtObject:
     var m = self.replaceMentionsWithPubKeys(aliasMentions, contacts, message, (c => c.alias))
     m = self.replaceMentionsWithPubKeys(ensMentions, contacts, m, (c => c.ensName))
     m = self.replaceMentionsWithPubKeys(nameMentions, contacts, m, (c => c.ensName.split(".")[0]))
-
+    m = self.plainText(m)
+    
     self.status.chat.sendMessage(self.activeChannel.id, m, replyTo, contentType)
 
   proc verifyMessageSent*(self: ChatsView, data: string) {.slot.} =

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -207,7 +207,7 @@ StackLayout {
                 cursorPosition: chatInput.textInput.cursorPosition
                 property: "ensName, alias"
                 onItemSelected: function (item, lastAtPosition, lastCursorPosition) {
-                    let currentText = chatInput.textInput.text
+                    let currentText = chatsModel.plainText(Emoji.deparse(chatInput.textInput.text))
                     let lastAt = currentText.lastIndexOf("@")
                     let aliasName = item[suggestionsBox.property.split(",").map(p => p.trim()).find(p => !!item[p])]
                     let nameLen = aliasName.length + 2 // We're doing a +2 here because of the `@` and the trailing whitespace
@@ -219,13 +219,12 @@ StackLayout {
                         text = "@" + aliasName + " "
                     } else {
                         let left = currentText.substring(0, lastAtPosition)
-                        let right = currentText.substring(lastCursorPosition)
+                        let right = currentText.substring(lastAtPosition + 2)
-                        text = `${left}@${aliasName} ${right}`
+                        text = `${left} @${aliasName} ${right}`
-                        position = left.length + nameLen
                     }
 
-                    chatInput.textInput.text = text
+                    chatInput.textInput.text = Emoji.parse(text, "26x26")
-                    chatInput.textInput.cursorPosition = position
+                    chatInput.textInput.cursorPosition = lastCursorPosition + aliasName.length
                     suggestionsBox.suggestionsModel.clear()
                 }
             }

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

@@ -40,7 +40,9 @@ Rectangle {
             }
 
             if(txtData.text.trim().length > 0){
-                let msg = interpretMessage(txtData.text.trim()).trim()
+                var msg = interpretMessage(txtData.text.trim()).trim()
+                msg = Emoji.deparse(msg)
+
                 chatsModel.sendMessage(msg, chatColumn.isReply ? SelectedMessage.messageId : "", Utils.isOnlyEmoji(txtData.text) ? Constants.emojiType : Constants.messageType);
                 txtData.text = "";
                 event.accepted = true
@@ -78,7 +80,7 @@ Rectangle {
         topPadding: Style.current.padding
         
         StyledTArea {
-            textFormat: TextArea.PlainText
+            textFormat: Text.RichText
             id: txtData
             text: ""
             selectByMouse: true

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

@@ -49,30 +49,31 @@ Item {
             return false
         }
 
+        let filter = chatsModel.plainText(this.filter)
         // Prevents suggestions to show up at all
-        if (this.filter.indexOf("@") === -1)  {
+        if (filter.indexOf("@") === -1)  {
           return false
         }
 
-        let cursorAtEnd = this.cursorPosition === this.filter.length;
+        let cursorAtEnd = this.cursorPosition === filter.length;
-        let hasAtBeforeCursor = this.filter.charAt(this.cursorPosition - 1) === "@" 
+        let hasAtBeforeCursor = filter.charAt(this.cursorPosition - 1) === "@" 
-        let hasWhiteSpaceBeforeAt = this.filter.charAt(this.cursorPosition - 2) === " "
+        let hasWhiteSpaceBeforeAt = filter.charAt(this.cursorPosition - 2) === " "
-        let hasWhiteSpaceAfterAt = this.filter.charAt(this.cursorPosition) === " "
+        let hasWhiteSpaceAfterAt = filter.charAt(this.cursorPosition) === " "
-        let hasWhiteSpaceBeforeCursor = this.filter.charAt(this.cursorPosition - 1) === " "
+        let hasWhiteSpaceBeforeCursor = filter.charAt(this.cursorPosition - 1) === " "
 
-        if (this.filter.charAt(this.cursorPosition - 2) === "@" && hasWhiteSpaceBeforeCursor) {
+        if (filter.charAt(this.cursorPosition - 2) === "@" && hasWhiteSpaceBeforeCursor) {
-          return false
+            return false
         }
 
-        if (this.filter === "@" ||
+        if (filter === "@" ||
           (hasAtBeforeCursor && hasWhiteSpaceBeforeAt && hasWhiteSpaceAfterAt) ||
           (this.cursorPosition === 1 && hasAtBeforeCursor && hasWhiteSpaceAfterAt) ||
-          (cursorAtEnd && this.filter.endsWith("@") && hasWhiteSpaceBeforeAt)) {
+          (cursorAtEnd && filter.endsWith("@") && hasWhiteSpaceBeforeAt)) {
           this.lastAtPosition = this.cursorPosition - 1;
           return true
         }
 
-        let filterWithoutAt = this.filter.substring(lastAtPosition + 1, this.cursorPosition)
+        let filterWithoutAt = filter.substring(lastAtPosition + 1, this.cursorPosition)
 
         return !properties.every(p => item[p].toLowerCase().match(filterWithoutAt.toLowerCase()) === null)
     }

ui/app/AppLayouts/Chat/components/EmojiPopup.qml

@@ -62,8 +62,9 @@ Popup {
         }
         emojiSectionsRepeater.itemAt(0).allEmojis = appSettings.recentEmojis
 
-        popup.addToChat(encodedIcon + ' ') // Adding a space because otherwise, some emojis would fuse since it's just an emoji is just a string
+        popup.addToChat(Emoji.parse(encodedIcon, "26x26") + ' ') // Adding a space because otherwise, some emojis would fuse since it's just an emoji is just a string
         popup.close()
+        chatInput.textInput.forceActiveFocus()
     }
 
     Component.onCompleted: {

ui/imports/Emoji.qml

@@ -14,4 +14,7 @@ QtObject {
     function fromCodePoint(value) {
         return Twemoji.twemoji.convert.fromCodePoint(value)
     }
+    function deparse(value){
+        return value.replace(/<img src=\"qrc:\/imports\/twemoji\/.+?" alt=\"(.+?)\" \/>/g, "$1");
+    }
 }

vendor/DOtherSide

@@ -1 +1 @@
-Subproject commit b758bf3025f0f3912e5005b232c3b4430848de1a
+Subproject commit 7d8edc6db225057af5592e2f20c7470fac83fbaf

vendor/nimqml

@@ -1 +1 @@
-Subproject commit 2f26af684a6e40e49e5577a4606ad64ab0ffa8dc
+Subproject commit fe3d330269e08cf6a296719fa2dd84e91c7ecfda