From b3d551eeb2b0aabfd74e2ea5c8c203814c3d6259 Mon Sep 17 00:00:00 2001
From: Andrei Smirnov <andrei.smirnov@toptal.com>
Date: Fri, 24 Sep 2021 14:40:02 +0300
Subject: [PATCH] fix(@desktop/mentions): editing mentions

---
 .../MessageComponents/CompactMessage.qml      |  9 ++--
 .../Chat/ChatColumn/SuggestionBox.qml         |  1 -
 .../Chat/ChatColumn/SuggestionFilter.qml      | 51 +++++++------------
 3 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
index 9d258e859d..fdd753952e 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
@@ -271,9 +271,12 @@ Item {
                         index += 8 // "<a href="
                         continue
                     }
-                    let address = message.substring(addrIndex, addrEndIndex)
-                    let linkTag = message.substring(index, endIndex + 5) // "</a>"
-                    mentionsMap.set(address, linkTag)
+                    const address = '@' + message.substring(addrIndex, addrEndIndex)
+                    const linkTag = message.substring(index, endIndex + 5)
+                    const linkText = linkTag.replace(/(<([^>]+)>)/ig,"").trim()
+                    const atSymbol = linkText.startsWith("@") ? '' : '@'
+                    const mentionTag = Constants.mentionSpanTag + atSymbol + linkText + '</span> '
+                    mentionsMap.set(address, mentionTag)
                     index += linkTag.length
                 }
 
diff --git a/ui/app/AppLayouts/Chat/ChatColumn/SuggestionBox.qml b/ui/app/AppLayouts/Chat/ChatColumn/SuggestionBox.qml
index 782853f075..37c5b9ce59 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/SuggestionBox.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/SuggestionBox.qml
@@ -107,7 +107,6 @@ Rectangle {
         cursorPosition: container.cursorPosition
     }
 
-
     ListView {
         id: listView
         model: mentionsListDelegate
diff --git a/ui/app/AppLayouts/Chat/ChatColumn/SuggestionFilter.qml b/ui/app/AppLayouts/Chat/ChatColumn/SuggestionFilter.qml
index 4c7f9b46b4..07e4869d9f 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/SuggestionFilter.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/SuggestionFilter.qml
@@ -12,12 +12,9 @@ Item {
     property int lastAtPosition: 0
     property var property: ([])
 
-    Connections {
-        onFilterChanged: invalidateFilter()
-        onPropertyChanged: invalidateFilter()
-        onSourceModelChanged: invalidateFilter()
-    }
-
+    onFilterChanged: invalidateFilter()
+    onPropertyChanged: invalidateFilter()
+    onSourceModelChanged: invalidateFilter()
     Component.onCompleted: invalidateFilter()
 
     ListModel {
@@ -25,13 +22,23 @@ Item {
     }
 
     function invalidateFilter() {
-        filterModel.clear();     
+        filterModel.clear()
 
         if (!isFilteringPropertyOk())
             return
 
-        var filter = getFilter()
-        if (!isFilterReady(filter))
+        let filter = getFilter()
+        if (filter === undefined)
+            return
+
+        this.lastAtPosition = -1
+        for (let c = cursorPosition; c >= 0; c--) {
+            if (filter.charAt(c) === "@") {
+                this.lastAtPosition = c
+                break
+            }
+        }
+        if (this.lastAtPosition === -1)
             return
 
         const all = shouldShowAll(filter)
@@ -69,41 +76,19 @@ Item {
                 (hasAtBeforeCursor && hasWhiteSpaceBeforeAt && hasWhiteSpaceAfterAt) ||
                 (this.cursorPosition === 1 && hasAtBeforeCursor && hasWhiteSpaceAfterAt) ||
                 (cursorAtEnd && filter.endsWith("@") && hasWhiteSpaceBeforeAt)) {
-            this.lastAtPosition = this.cursorPosition - 1;
             return true
         }
 
         return false
     }
 
-    function isFilterReady(filter) {
-        if (filter === undefined) {
-            return false
-        }
-
-        // Prevents suggestions to show up at all
-        if (filter.indexOf("@") === -1)  {
-          return false
-        }
-
-        let hasWhiteSpaceBeforeCursor = filter.charAt(this.cursorPosition - 1) === " "
-
-        if (filter.charAt(this.cursorPosition - 2) === "@" && hasWhiteSpaceBeforeCursor) {
-            return false
-        }
-
-        return true
-    }
-
     function isAcceptedItem(filter, item) {
-        let properties = this.property
-            .filter(p => !!item[p])
-
+        let properties = this.property.filter(p => !!item[p])
         if (properties.length === 0) {
             return false
         }
         
-        let filterWithoutAt = filter.substring(lastAtPosition + 1, this.cursorPosition)
+        let filterWithoutAt = filter.substring(this.lastAtPosition + 1, this.cursorPosition)
         filterWithoutAt = filterWithoutAt.replace(/\*/g, "")
         component.formattedFilter = filterWithoutAt