feat(@desktop/chat): editing message in markdown mode

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

@@ -88,7 +88,7 @@ Item {
                 return Emoji.parse(msg, Emoji.size.middle);
             } else {
                 if(isEdited){
-                    let index = msg.length - 4
+                    let index = msg.endsWith("code>") ? msg.length : msg.length - 4
                     return Utils.getMessageWithStyle(Emoji.parse(msg.slice(0, index) + Constants.editLabel + msg.slice(index)), appSettings.useCompactMode, isCurrentUser, hoveredLink)
                 }
                 return Utils.getMessageWithStyle(Emoji.parse(msg), appSettings.useCompactMode, isCurrentUser, hoveredLink)

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

@@ -209,6 +209,49 @@ Item {
             anchors.right: parent.right
             anchors.rightMargin: root.chatHorizontalPadding
             height: (item !== null && typeof(item)!== 'undefined')? item.height: 0
+            property string sourceText
+
+            onActiveChanged: {
+                if (!active) {
+                    return
+                }
+
+                let mentionsMap = new Map()
+                let index = 0
+                while (true) {
+                    index = message.indexOf("<a href=", index)
+                    if (index < 0) {
+                        break
+                    }
+                    let endIndex = message.indexOf("</a>", index)
+                    if (endIndex < 0) {
+                        index += 8 // "<a href="
+                        continue
+                    }
+                    let addrIndex = message.indexOf("0x", index + 8)
+                    if (addrIndex < 0) {
+                        index += 8 // "<a href="
+                        continue
+                    }
+                    let addrEndIndex = message.indexOf('"', addrIndex)
+                    if (addrEndIndex < 0) {
+                        index += 8 // "<a href="
+                        continue
+                    }
+                    let address = message.substring(addrIndex, addrEndIndex)
+                    let linkTag = message.substring(index, endIndex + 5) // "</a>"
+                    mentionsMap.set(address, linkTag)
+                    index += linkTag.length
+                }
+
+                sourceText = plainText
+                for (let [key, value] of mentionsMap) {
+                    sourceText = sourceText.replace(new RegExp(key, 'g'), value)
+                }
+                sourceText = sourceText.replace(/\n/g, "<br />")
+                sourceText = Utils.getMessageWithStyle(sourceText, appSettings.useCompactMode, isCurrentUser)
+            }
+
             sourceComponent: Item {
                 id: editText
                 height: childrenRect.height
@@ -223,11 +266,10 @@ Item {
 
                 StatusChatInput {
                     id: editTextInput
-                    readonly property string originalText: Utils.getMessageWithStyle(Emoji.parse(message))
                     chatInputPlaceholder: qsTrId("type-a-message-")
                     chatType: chatsModel.channelView.activeChannel.chatType
                     isEdit: true
-                    textInput.text: originalText
+                    textInput.text: editMessageLoader.sourceText
                     onSendMessage: {
                         saveBtn.clicked()
                     }

ui/imports/Themes/DarkTheme.qml

@@ -68,7 +68,7 @@ Theme {
     property color backgroundTertiary: tenPercentBlue
     property color pillButtonTextColor: secondaryText
     property color chatReplyCurrentUser: lightGrey
-    property color codeBackground: "#2E386B"
+    property color codeBackground: "#EEF2F5"
     property color primarySelectionColor: "#b4c8ff"
     property color emojiReactionBackground: "#2d2823"
     property color emojiReactionBackgroundHovered: "#3a3632"

ui/imports/Themes/LightTheme.qml

@@ -68,7 +68,7 @@ Theme {
     property color backgroundTertiary: tenPercentBlue
     property color pillButtonTextColor: white
     property color chatReplyCurrentUser: darkGrey
-    property color codeBackground: "#2E386B"
+    property color codeBackground: "#EEF2F5"
     property color primarySelectionColor: "#b4c8ff"
     property color emojiReactionBackground: "#e2e6e9"
     property color emojiReactionBackgroundHovered: "#d7dadd"

ui/imports/Themes/Theme.qml

@@ -12,6 +12,8 @@ QtObject {
     property QtObject fontHexLight: FontLoader { id: _fontHexLight; source: "../../fonts/InterStatus/InterStatus-Light.otf"; }
     property QtObject fontHexRegular: FontLoader { id: _fontHexRegular; source: "../../fonts/InterStatus/InterStatus-Regular.otf"; }
 
+    property QtObject fontCodeRegular: FontLoader { id: _fontCodeRegular; source: "../../fonts/RobotoMono/RobotoMono-Regular.ttf"; }
+
     property string name
 
     property color white

ui/imports/Utils.qml

@@ -53,8 +53,13 @@ QtObject {
         return `<style type="text/css">` +
                     `p, img, a, del, code, blockquote { margin: 0; padding: 0; }` +
                     `code {` +
+                        `font-family: ${Style.current.fontCodeRegular.name};` +
+                        `font-weight: 400;` +
+                        `font-size: ${Style.current.secondaryTextFontSize};` +
+                        `padding: 2px 4px;` +
+                        `border-radius: 4px;` +
                         `background-color: ${Style.current.codeBackground};` +
-                        `color: ${Style.current.white};` +
+                        `color: ${Style.current.black};` +
                         `white-space: pre;` +
                     `}` +
                     `p {` +
@@ -95,19 +100,19 @@ QtObject {
 
     function getReplyMessageStyle(msg, isCurrentUser, useCompactMode) {
         return `<style type="text/css">`+
-                                `a {`+
+                    `a {`+
-                                    `color: ${isCurrentUser && !useCompactMode ? Style.current.white : Style.current.textColor};`+
+                        `color: ${isCurrentUser && !useCompactMode ? Style.current.white : Style.current.textColor};`+
-                                `}`+
+                    `}`+
-                                `a.mention {`+
+                    `a.mention {`+
-                                    `color: ${isCurrentUser ? Style.current.mentionColor : Style.current.turquoise};`+
+                        `color: ${isCurrentUser ? Style.current.mentionColor : Style.current.turquoise};`+
-                                    `background-color: ${Style.current.mentionBgColor};` +
+                        `background-color: ${Style.current.mentionBgColor};` +
-                                `}`+
+                    `}`+
-                                `</style>`+
+               `</style>`+
-                            `</head>`+
+               `</head>`+
-                            `<body>`+
+               `<body>`+
-                                `${msg}`+
+                   `${msg}`+
-                            `</body>`+
+               `</body>`+
-                        `</html>`
+            `</html>`
     }
 
     function getAppSectionIndex(section) {