fix(chat/mentions) fixes in mentions behavior

Changed cursor behavior to jump over text when it
reaches a mention, either on left or right side.
Also made mention to behave as link when hovered
with mouse so that it cannot be clicked and place
cursor inside it.

Also fixed keyboard focus to navigate only in the
suggestions list when this is opened.

Closes #4423

ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml

@@ -43,6 +43,7 @@ Rectangle {
     property int cursorPosition
     signal itemSelected(var item, int lastAtPosition, int lastCursorPosition)
     property alias listView: listView
+    property var inputField
     property bool shouldHide: false
 
     Timer {
@@ -77,6 +78,9 @@ Rectangle {
             // We change it back to 0 so that it can be used to select using the keyboard
             listView.currentIndex = 0
         }
+        if (visible) {
+            listView.forceActiveFocus();
+        }
     }
 
     z: parent.z + 100
@@ -122,7 +126,17 @@ Rectangle {
         anchors.rightMargin: Style.current.halfPadding
         anchors.bottomMargin: Style.current.halfPadding
         clip: true
-
+        Keys.priority: Keys.AfterItem
+        Keys.forwardTo: container.inputField
+        Keys.onPressed: {
+            if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
+                container.itemSelected(mentionsListDelegate.items.get(listView.currentIndex).model, filterItem.lastAtPosition, filterItem.cursorPosition)
+            } else if (event.key === Qt.Key_Escape) {
+                container.hide();
+            } else if (event.key !== Qt.Key_Up && event.key !== Qt.Key_Down) {
+                event.accepted = false;
+            }
+        }
         property int selectedIndex
         property var selectedItem: selectedIndex == -1 ? null : model[selectedIndex]
         signal suggestionClicked(var item)

ui/imports/shared/status/StatusChatInput.qml

@@ -118,15 +118,17 @@ Rectangle {
         }
     }
 
+    property var mentionsPos: []
+
     function insertMention(aliasName, lastAtPosition, lastCursorPosition) {
         const hasEmoji = Emoji.hasEmoji(messageInputField.text)
-        const spanPlusAlias = `${Constants.mentionSpanTag}@${aliasName}</span> `
+        const spanPlusAlias = `${Constants.mentionSpanTag}@${aliasName}</a></span> `
 
         let rightIndex = hasEmoji ? lastCursorPosition + 2 : lastCursorPosition
-
         messageInputField.remove(lastAtPosition, rightIndex)
         messageInputField.insert(lastAtPosition, spanPlusAlias)
-        messageInputField.cursorPosition = lastAtPosition + aliasName.length + 2
+        messageInputField.cursorPosition = lastAtPosition + aliasName.length + 2;
+        mentionsPos.push({"leftIndex":lastAtPosition, "rightIndex": (messageInputField.cursorPosition-1)});
 
         if (messageInputField.cursorPosition === 0) {
             // It reset to 0 for some reason, go back to the end
@@ -161,7 +163,7 @@ Rectangle {
         return false
     }
 
-    function onKeyPress(event){
+    function onKeyPress(event) {
         if (event.modifiers === Qt.NoModifier && (event.key === Qt.Key_Enter || event.key === Qt.Key_Return)) {
             if (checkTextInsert()) {
                 event.accepted = true;
@@ -225,16 +227,11 @@ Rectangle {
         }
 
         if (event.key === Qt.Key_Down) {
-            suggestionsBox.listView.incrementCurrentIndex()
             return emojiSuggestions.listView.incrementCurrentIndex()
         }
         if (event.key === Qt.Key_Up) {
-            suggestionsBox.listView.decrementCurrentIndex()
             return emojiSuggestions.listView.decrementCurrentIndex()
         }
-        if (event.key === Qt.Key_Escape) {
-            suggestionsBox.hide()
-        }
 
         isColonPressed = (event.key === Qt.Key_Colon) && (event.modifiers & Qt.ShiftModifier);
 
@@ -252,6 +249,21 @@ Rectangle {
                 suggestionsBox.hide();
             }
         }
+
+        if (mentionsPos.length > 0) {
+            for (var i = 0; i < mentionsPos.length; i++) {
+                if ((messageInputField.cursorPosition === mentionsPos[i].leftIndex) && (event.key === Qt.Key_Right)) {
+                    messageInputField.cursorPosition = mentionsPos[i].rightIndex;
+                } else if ((messageInputField.cursorPosition === mentionsPos[i].rightIndex)) {
+                    if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Delete)) {
+                        messageInputField.remove(mentionsPos[i].rightIndex, mentionsPos[i].leftIndex);
+                        mentionsPos.pop(i);
+                    } else if (event.key === Qt.Key_Left) {
+                        messageInputField.cursorPosition = mentionsPos[i].leftIndex;
+                    }
+                }
+            }
+        }
     }
 
     function wrapSelection(wrapWith) {
@@ -646,11 +658,18 @@ Rectangle {
         filter: messageInputField.text
         cursorPosition: messageInputField.cursorPosition
         property: ["name", "nickname", "ensName", "alias"]
+        inputField: messageInputField
         onItemSelected: function (item, lastAtPosition, lastCursorPosition) {
+            messageInputField.forceActiveFocus();
             let name = item.name.replace("@", "")
             insertMention(name, lastAtPosition, lastCursorPosition)
             suggestionsBox.suggestionsModel.clear()
         }
+        onVisibleChanged: {
+            if (!visible) {
+                messageInputField.forceActiveFocus();
+            }
+        }
     }
 
     ChatCommandsPopup {
@@ -949,7 +968,12 @@ Rectangle {
                 StatusSyntaxHighlighter {
                    quickTextDocument: messageInputField.textDocument
                 }
-
+                MouseArea {
+                    anchors.fill: parent
+                    acceptedButtons: Qt.NoButton
+                    enabled: parent.hoveredLink
+                    cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+                }
                 StatusTextFormatMenu {
                     id: textFormatMenu
 

ui/imports/utils/Constants.qml

@@ -178,7 +178,7 @@ QtObject {
     readonly property var acceptedImageExtensions: [".png", ".jpg", ".jpeg", ".svg", ".gif"]
     readonly property var acceptedDragNDropImageExtensions: [".png", ".jpg", ".jpeg", ".heif", "tif", ".tiff"]
 
-    readonly property string mentionSpanTag: `<span style="color:${Style.current.mentionColor}; background-color: ${Style.current.mentionBgColor};">`
+    readonly property string mentionSpanTag: `<span style="color:${Style.current.mentionColor}; background-color: ${Style.current.mentionBgColor};"><a style="text-decoration:none" href='http://'>`
 
     readonly property string ens_taken: "taken"
     readonly property string ens_taken_custom: "taken-custom"