feat(StatusChatInput): introduce context menu to format message

Closes #1804

ui/app/img/format-text-bold.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M-0.000854492 15.1965C-0.000854492 15.6383 0.371323 15.9965 0.830426 15.9965H6.64572C10.1399 15.9965 12.001 14.1223 12.001 11.5767C12.001 9.2501 10.4072 7.82956 8.67133 7.70107C8.62175 7.6974 8.58272 7.65808 8.58272 7.61023C8.58272 7.56872 8.61246 7.53268 8.65423 7.52231C10.2357 7.12961 11.3933 5.95767 11.3933 4.10356C11.3933 1.70624 9.66137 0.00390625 6.22793 0.00390625H0.830427C0.371323 0.00390625 -0.000854492 0.362078 -0.000854492 0.803906V15.1965ZM4.11953 13.2321C3.66043 13.2321 3.28825 12.874 3.28825 12.4321V9.78411C3.28825 9.34228 3.66043 8.98411 4.11953 8.98411H6.04563C7.62562 8.98411 8.60551 9.92117 8.60551 11.2409C8.60551 12.4434 7.80792 13.2321 5.96967 13.2321H4.11953ZM4.11953 6.69611C3.66043 6.69611 3.28825 6.33794 3.28825 5.89611V3.53701C3.28825 3.09518 3.66043 2.73701 4.11953 2.73701H5.78736C7.24581 2.73701 8.07378 3.51009 8.07378 4.6658C8.07378 5.93084 7.0711 6.69611 5.72659 6.69611H4.11953Z" fill="#939BA1"/>
+</svg>

ui/app/img/format-text-italic.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.53096 0.75C3.53096 0.335786 3.86675 0 4.28096 0H12.2511C12.6653 0 13.0011 0.335786 13.0011 0.75C13.0011 1.16421 12.6653 1.5 12.2511 1.5H9.98256C9.50338 1.5 9.09155 1.83991 9.0007 2.3104L6.87658 13.3104C6.75745 13.9273 7.2301 14.5 7.85844 14.5H9.71892C10.1331 14.5 10.4689 14.8358 10.4689 15.25C10.4689 15.6642 10.1331 16 9.71892 16H1.74878C1.33456 16 0.998779 15.6642 0.998779 15.25C0.998779 14.8358 1.33457 14.5 1.74878 14.5H4.12249C4.60167 14.5 5.0135 14.1601 5.10435 13.6896L7.22847 2.6896C7.3476 2.07266 6.87495 1.5 6.24661 1.5H4.28096C3.86675 1.5 3.53096 1.16421 3.53096 0.75Z" fill="#939BA1"/>
+</svg>

ui/app/img/format-text-strike-through.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7503 4.19344C15.7808 4.41937 15.5972 4.61039 15.3692 4.61039H14.6065C14.4011 4.61039 14.2317 4.45413 14.1908 4.25286C13.8385 2.51665 12.2501 1.43102 10.0852 1.43102C7.64738 1.43102 5.9682 2.80335 5.9682 4.67858C5.9682 6.51972 7.74967 7.38062 9.4459 7.85795L10.7581 8.23461C10.794 8.24491 10.8312 8.25014 10.8685 8.25014H19.2693C19.6728 8.25014 20 8.58592 20 9.00014C20 9.41435 19.6728 9.75014 19.2693 9.75014H15.5374C15.1521 9.75014 14.9603 10.2812 15.1992 10.5835C15.7084 11.2277 16.0263 12.0373 16.0263 13.066C16.0263 15.8618 13.7589 18.0013 9.97437 18.0013C6.59769 18.0013 4.40001 16.294 4.01985 13.7646C3.98542 13.5356 4.17013 13.3387 4.40171 13.3387H5.24177C5.44996 13.3387 5.62066 13.4993 5.65915 13.7039C6.00505 15.5429 7.76397 16.5437 9.97437 16.5437C12.5827 16.5437 14.4835 15.1373 14.4835 13.0404C14.4835 11.2589 13.0003 10.4492 10.8353 9.81842L10.6581 9.76637C10.6215 9.7556 10.5835 9.75014 10.5454 9.75014H0.730741C0.327164 9.75014 0 9.41435 0 9.00014C0 8.58592 0.327163 8.25014 0.73074 8.25014H5.09893C5.50213 8.25014 5.68953 7.66156 5.41735 7.36409C4.77078 6.65745 4.42539 5.7931 4.42539 4.74677C4.42539 1.93392 6.90581 -0.000976562 10.1278 -0.000976562C13.2026 -0.000976562 15.4216 1.75649 15.7503 4.19344Z" fill="#939BA1"/>
+</svg>

ui/shared/status/StatusChatInput.qml

@@ -1,6 +1,6 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
-import QtGraphicalEffects 1.12
+import QtGraphicalEffects 1.13
 import QtQuick.Layouts 1.13
 import QtMultimedia 5.13
 import QtQuick.Dialogs 1.3
@@ -678,6 +678,45 @@ Rectangle {
                     color: "transparent"
                 }
                 selectionColor: Style.current.primarySelectionColor
+                persistentSelection: true
+                onReleased: function (event) {
+                    if (messageInputField.selectedText.trim() !== "") {
+                        let x = event.x - (textFormatMenu.width / 2)
+                        textFormatMenu.popup(x, -messageInputField.height-2)
+                    }
+                }
+
+                StatusTextFormatMenu {
+                    id: textFormatMenu
+                    Action {
+                        icon.name: "format-text-bold"
+                        icon.width: 12
+                        icon.height: 16
+                        onTriggered: wrapSelection("**")
+                        text: qsTr("Bold")
+                    }
+                    Action {
+                        icon.name: "format-text-italic"
+                        icon.width: 12
+                        icon.height: 16
+                        onTriggered: wrapSelection("*")
+                        text: qsTr("Italic")
+                    }
+                    Action {
+                        icon.name: "format-text-strike-through"
+                        icon.width: 20
+                        icon.height: 18
+                        onTriggered: wrapSelection("~~")
+                        text: qsTr("Strikethrough")
+                    }
+                    Action {
+                        icon.name: "format-text-code"
+                        icon.width: 20
+                        icon.height: 18
+                        onTriggered: wrapSelection("`")
+                        text: qsTr("Code")
+                    }
+                }
             }
             Action {
                 shortcut: StandardKey.Bold

ui/shared/status/StatusTextFormatMenu.qml

@@ -0,0 +1,78 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+import QtQuick.Layouts 1.13
+import QtQuick.Dialogs 1.3
+import "../../imports"
+import "./"
+
+Menu {
+    id: root
+    width: 132
+    height: 36
+
+    onClosed: {
+        messageInputField.deselect()
+    }
+
+    background: Item {
+        id: menuBackground
+        Rectangle {
+            id: menuBackgroundContent
+            implicitWidth: menuBackground.width
+            implicitHeight: menuBackground.height
+            color: Style.current.modalBackground
+            radius: Style.current.radius
+            layer.enabled: true
+            layer.effect: DropShadow{
+                width: menuBackgroundContent.width
+                height: menuBackgroundContent.height
+                x: menuBackgroundContent.x
+                visible: menuBackgroundContent.visible
+                source: menuBackgroundContent
+                horizontalOffset: 0
+                verticalOffset: 4
+                radius: 12
+                samples: 25
+                spread: 0.2
+                color: "#22000000"
+            }
+        }
+    }
+
+    contentItem: Item {
+        width: root.width
+        height: root.height
+        Row {
+          anchors.verticalCenter: parent.verticalCenter
+          anchors.horizontalCenter: parent.horizontalCenter
+          Repeater {
+              model: root.contentModel
+          }
+        }
+    }
+
+    delegate: MenuItem {
+        id: menuItem
+        width: 32
+        height: 32
+        leftPadding: 0
+        topPadding: 0
+        action: Action {}
+        contentItem: Item {
+            StatusIconButton {
+                icon.name: menuItem.action.icon.name
+                icon.width: menuItem.action.icon.width
+                icon.height: menuItem.action.icon.height
+                onClicked: menuItem.action.trigger()
+                StatusToolTip {
+                    visible: parent.hovered
+                    text: menuItem.action.text
+                }
+            }
+        }
+        background: Rectangle {
+            color: "transparent"
+        }
+    }
+}