fix: fix mention showing as pubkey and show styling

src/app/chat/views/message_list.nim

@@ -220,7 +220,7 @@ QtObject:
     of "alias": result = (message.alias)
     of "localName": result = (message.localName)
     of "ensName": result = (message.ensName)
-    of "message": result = (message.text)
+    of "message": result = (self.renderBlock(message))
     of "identicon": result = (message.identicon)
     of "timestamp": result = $(message.timestamp)
     of "image": result = $(message.image)

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -86,7 +86,6 @@ StackLayout {
         }
     }
 
-
     function showReplyArea() {
         isReply = true;
         isImage = false;

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml

@@ -74,41 +74,7 @@ Item {
             if(isEmoji) {
                 return Emoji.parse(msg, Emoji.size.middle);
             } else {
-                return `<style type="text/css">` +
+                return Utils.getMessageWithStyle(Emoji.parse(msg), appSettings.useCompactMode, isCurrentUser)
-                            `p, img, a, del, code, blockquote { margin: 0; padding: 0; }` +
-                            `code {` +
-                                `background-color: ${Style.current.codeBackground};` +
-                                `color: ${Style.current.white};` +
-                                `white-space: pre;` +
-                            `}` +
-                            `p {` +
-                                `line-height: 22px;` +
-                            `}` +
-                            `a {` +
-                                `color: ${isCurrentUser && !appSettings.useCompactMode ? Style.current.white : Style.current.textColor};` +
-                            `}` +
-                            `a.mention {` +
-                                `color: ${Style.current.mentionColor};` +
-                                `background-color: ${Style.current.mentionBgColor};` +
-                                `text-decoration: none;` +
-                            `}` +
-                            `del {` +
-                                `text-decoration: line-through;` +
-                            `}` +
-                            `table.blockquote td {` +
-                                `padding-left: 10px;` +
-                                `color: ${isCurrentUser ? Style.current.chatReplyCurrentUser : Style.current.secondaryText};` +
-                            `}` +
-                            `table.blockquote td.quoteline {` +
-                                `background-color: ${isCurrentUser ? Style.current.chatReplyCurrentUser : Style.current.secondaryText};` +
-                                `height: 100%;` +
-                                `padding-left: 0;` +
-                            `}` +
-                            `.emoji {` +
-                                `vertical-align: bottom;` +
-                            `}` +
-                        `</style>` +
-                        `${Emoji.parse(msg)}`
             }
         }
     }

ui/imports/Utils.qml

@@ -49,6 +49,44 @@ QtObject {
         return Style.current.accountColors[colorIndex]
     }
 
+    function getMessageWithStyle(msg, useCompactMode, isCurrentUser) {
+        return `<style type="text/css">` +
+                    `p, img, a, del, code, blockquote { margin: 0; padding: 0; }` +
+                    `code {` +
+                        `background-color: ${Style.current.codeBackground};` +
+                        `color: ${Style.current.white};` +
+                        `white-space: pre;` +
+                    `}` +
+                    `p {` +
+                        `line-height: 22px;` +
+                    `}` +
+                    `a {` +
+                        `color: ${isCurrentUser && !useCompactMode ? Style.current.white : Style.current.textColor};` +
+                    `}` +
+                    `a.mention {` +
+                        `color: ${Style.current.mentionColor};` +
+                        `background-color: ${Style.current.mentionBgColor};` +
+                        `text-decoration: none;` +
+                    `}` +
+                    `del {` +
+                        `text-decoration: line-through;` +
+                    `}` +
+                    `table.blockquote td {` +
+                        `padding-left: 10px;` +
+                        `color: ${isCurrentUser ? Style.current.chatReplyCurrentUser : Style.current.secondaryText};` +
+                    `}` +
+                    `table.blockquote td.quoteline {` +
+                        `background-color: ${isCurrentUser ? Style.current.chatReplyCurrentUser : Style.current.secondaryText};` +
+                        `height: 100%;` +
+                        `padding-left: 0;` +
+                    `}` +
+                    `.emoji {` +
+                        `vertical-align: bottom;` +
+                    `}` +
+                `</style>` +
+                `${msg}`
+    }
+
     function getAppSectionIndex(section) {
         let sectionId = -1
         switch (section) {

ui/shared/status/StatusChatInputReplyArea.qml

@@ -38,22 +38,27 @@ Rectangle {
         font.weight: Font.Medium
     }
 
-    StyledText {
+    Rectangle {
-        id: replyText
-        text: Emoji.parse(message)
         anchors.left: replyToUsername.left
         anchors.top: replyToUsername.bottom
-        anchors.topMargin: 2
+        anchors.topMargin: -3
         anchors.right: parent.right
         anchors.rightMargin: Style.current.padding
         anchors.bottom: parent.bottom
+        clip: true
+        color: Style.current.transparent
+
+        StyledText {
+            id: replyText
+            text: Utils.getMessageWithStyle(Utils.linkifyAndXSS(Emoji.parse(message)), appSettings.useCompactMode, false)
+            anchors.fill: parent
             elide: Text.ElideRight
             font.pixelSize: 13
             font.weight: Font.Normal
-        // Eliding only works for PlainText: https://bugreports.qt.io/browse/QTBUG-16567
+            textFormat: Text.RichText
-        textFormat: Text.PlainText
             color: Style.current.textColor
         }
+    }
 
     RoundButton {
         id: closeBtn