From 7188579e465acb141aea65d26a52dad145aead29 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Tue, 23 Mar 2021 14:15:26 -0400
Subject: [PATCH] fix: fix mention showing as pubkey and show styling

---
 src/app/chat/views/message_list.nim           |  2 +-
 ui/app/AppLayouts/Chat/ChatColumn.qml         |  1 -
 .../ChatColumn/MessageComponents/ChatText.qml | 36 +-----------------
 ui/imports/Utils.qml                          | 38 +++++++++++++++++++
 ui/shared/status/StatusChatInputReplyArea.qml | 25 +++++++-----
 5 files changed, 55 insertions(+), 47 deletions(-)

diff --git a/src/app/chat/views/message_list.nim b/src/app/chat/views/message_list.nim
index 98a8c98e16..d7db6518de 100644
--- a/src/app/chat/views/message_list.nim
+++ b/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)
diff --git a/ui/app/AppLayouts/Chat/ChatColumn.qml b/ui/app/AppLayouts/Chat/ChatColumn.qml
index bda5481a7d..122208eed3 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn.qml
@@ -86,7 +86,6 @@ StackLayout {
         }
     }
 
-
     function showReplyArea() {
         isReply = true;
         isImage = false;
diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml
index e94a943b75..a3edbd6354 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml
+++ b/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">` +
-                            `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)}`
+                return Utils.getMessageWithStyle(Emoji.parse(msg), appSettings.useCompactMode, isCurrentUser)
             }
         }
     }
diff --git a/ui/imports/Utils.qml b/ui/imports/Utils.qml
index f22d52d1fb..305cd36ee5 100644
--- a/ui/imports/Utils.qml
+++ b/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) {
diff --git a/ui/shared/status/StatusChatInputReplyArea.qml b/ui/shared/status/StatusChatInputReplyArea.qml
index f84ba158af..6e6f753de0 100644
--- a/ui/shared/status/StatusChatInputReplyArea.qml
+++ b/ui/shared/status/StatusChatInputReplyArea.qml
@@ -38,21 +38,26 @@ Rectangle {
         font.weight: Font.Medium
     }
 
-    StyledText {
-        id: replyText
-        text: Emoji.parse(message)
+    Rectangle {
         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
-        elide: Text.ElideRight
-        font.pixelSize: 13
-        font.weight: Font.Normal
-        // Eliding only works for PlainText: https://bugreports.qt.io/browse/QTBUG-16567
-        textFormat: Text.PlainText
-        color: Style.current.textColor
+        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
+            textFormat: Text.RichText
+            color: Style.current.textColor
+        }
     }
 
     RoundButton {