feat: enable unwrapping text formations with the buttons

ui/nim-status-client.pro

@@ -412,6 +412,7 @@ DISTFILES += \
     shared/img/loading.svg \
     shared/img/status-logo.png \
     shared/qmldir \
+    shared/status/StatusChatInputTextFormationAction.qml \
     shared/status/StatusEmojiSuggestionPopup.qml \
     shared/status/StatusInputListPopup.qml \
     shared/status/StatusRadioButtonRow.qml \

ui/shared/status/StatusChatInput.qml

@@ -220,6 +220,17 @@ Rectangle {
         messageInputField.deselect()
         formatInputMessage()
     }
+    function unwrapSelection(unwrapWith) {
+        if (messageInputField.selectionStart - messageInputField.selectionEnd === 0) return
+
+        const text = messageInputField.getText(messageInputField.selectionStart, messageInputField.selectionEnd)
+        const changedString = text.replace(unwrapWith, '').replace(unwrapWith, '')
+        messageInputField.remove(messageInputField.selectionStart, messageInputField.selectionEnd)
+        insertInTextInput(messageInputField.selectionStart, changedString)
+
+        messageInputField.deselect()
+        formatInputMessage()
+    }
 
     function getPlainText() {
         const textWithoutMention = messageInputField.text.replace(/<span style="[ :#0-9a-z;\-\.,\(\)]+">(@([a-z\.]+(\ ?[a-z]+\ ?[a-z]+)?))<\/span>/ig, "\[\[mention\]\]$1\[\[mention\]\]")
@@ -843,44 +854,39 @@ Rectangle {
                 StatusTextFormatMenu {
                     id: textFormatMenu
                     function surroundedBy(chars) {
-                        return messageInputField.selectedText.trim().startsWith(chars) &&
+                        const firstIndex = messageInputField.selectedText.trim().indexOf(chars)
-                          messageInputField.selectedText.trim().endsWith(chars)
+                        if (firstIndex === -1) {
+                            return false
+                        }
+
+                        return messageInputField.selectedText.trim().lastIndexOf(chars) > firstIndex
                     }
-                    Action {
+                    StatusChatInputTextFormationAction {
+                        wrapper: "**"
                         icon.name: "format-text-bold"
-                        icon.width: 12
-                        icon.height: 16
-                        onTriggered: wrapSelection("**")
                         //% "Bold"
                         text: qsTrId("bold")
-                        checked: textFormatMenu.surroundedBy("**")
                     }
-                    Action {
+                    StatusChatInputTextFormationAction {
+                        wrapper: "*"
                         icon.name: "format-text-italic"
-                        icon.width: 12
-                        icon.height: 16
-                        onTriggered: wrapSelection("*")
                         //% "Italic"
                         text: qsTrId("italic")
                         checked: textFormatMenu.surroundedBy("*") && !textFormatMenu.surroundedBy("**")
                     }
-                    Action {
+                    StatusChatInputTextFormationAction {
+                        wrapper: "~~"
                         icon.name: "format-text-strike-through"
-                        icon.width: 20
                         icon.height: 18
-                        onTriggered: wrapSelection("~~")
                         //% "Strikethrough"
                         text: qsTrId("strikethrough")
-                        checked: textFormatMenu.surroundedBy("~~")
                     }
-                    Action {
+                    StatusChatInputTextFormationAction {
+                        wrapper: "`"
                         icon.name: "format-text-code"
-                        icon.width: 20
                         icon.height: 18
-                        onTriggered: wrapSelection("`")
                         //% "Code"
                         text: qsTrId("code")
-                        checked: textFormatMenu.surroundedBy("`")
                     }
                 }
             }

ui/shared/status/StatusChatInputTextFormationAction.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+
+Action {
+    property string wrapper
+    icon.width: 12
+    icon.height: 16
+    onTriggered: textFormatMenu.surroundedBy(wrapper) ? unwrapSelection(wrapper) : wrapSelection(wrapper)
+    checked: textFormatMenu.surroundedBy(wrapper)
+}