Use singleton to pass edit/reply content to chatbox

This significantly reduce the complexity of everything.
2021-03-20 14:00:29 +00:00
parent c7df3f903a
commit 743c9972b9
11 changed files with 315 additions and 163 deletions
--- a/imports/NeoChat/Component/ChatBox/AttachmentPane.qml
+++ b/imports/NeoChat/Component/ChatBox/AttachmentPane.qml
@@ -14,17 +14,14 @@ import org.kde.neochat 1.0
 Loader {
    id: root

-    property string attachmentPath: ""
-    property var attachmentMimetype: FileType.mimeTypeForUrl(attachmentPath)
+    property var attachmentMimetype: FileType.mimeTypeForUrl(ChatBoxHelper.attachmentPath)
    readonly property bool hasImage: attachmentMimetype.valid && FileType.supportedImageFormats.includes(attachmentMimetype.preferredSuffix)

-    signal clearAttachmentTriggered()
-
    active: visible
    sourceComponent: Component {
        Pane {
            id: attachmentPane
-            property string baseFileName: attachmentPath.toString().substring(attachmentPath.toString().lastIndexOf('/') + 1, attachmentPath.length)
+            property string baseFileName: ChatBoxHelper.attachmentPath.toString().substring(ChatBoxHelper.attachmentPath.toString().lastIndexOf('/') + 1, ChatBoxHelper.attachmentPath.length)
            Kirigami.Theme.colorSet: Kirigami.Theme.View

            contentItem: Item {
@@ -49,7 +46,7 @@ Loader {
                    asynchronous: true
                    cache: false // Cache is not needed. Images will rarely be shown repeatedly.
                    smooth: height == preferredHeight && parent.height == parent.implicitHeight // Don't smooth until height animation stops
-                    source: hasImage ? attachmentPath : ""
+                    source: hasImage ? ChatBoxHelper.attachmentPath : ""
                    visible: hasImage
                    fillMode: Image.PreserveAspectFit

@@ -165,14 +162,14 @@ Loader {
                            Component {
                                id: imageEditorPage
                                ImageEditorPage {
-                                    imagePath: attachmentPath
+                                    imagePath: ChatBoxHelper.attachmentPath
                                }
                            }
                            onClicked: {
                                let imageEditor = applicationWindow().pageStack.layers.push(imageEditorPage);
                                imageEditor.newPathChanged.connect(function(newPath) {
                                    applicationWindow().pageStack.layers.pop();
-                                    attachmentPath = newPath;
+                                    ChatBoxHelper.attachmentPath = newPath;
                                });
                            }
                            ToolTip.text: text
@@ -183,9 +180,7 @@ Loader {
                            icon.name: "dialog-cancel"
                            text: i18n("Cancel")
                            display: AbstractButton.IconOnly
-                            onClicked: {
-                                clearAttachmentTriggered();
-                            }
+                            onClicked: ChatBoxHelper.clearAttachment();
                            ToolTip.text: text
                            ToolTip.visible: hovered
                        }
--- a/imports/NeoChat/Component/ChatBox/ChatBar.qml
+++ b/imports/NeoChat/Component/ChatBox/ChatBar.qml
@@ -15,7 +15,7 @@ ToolBar {
    id: chatBar
    property string replyEventId: ""
    property string editEventId: ""
-    property string inputFieldText: currentRoom ? currentRoom.cachedInput : ""
+    property alias inputFieldText: inputField.text
    property alias textField: inputField
    property alias emojiPaneOpened: emojiButton.checked

@@ -24,7 +24,6 @@ ToolBar {
    // This use an hack to define: https://doc.qt.io/qt-5/qml-var.html#property-value-initialization-semantics
    property var userAutocompleted: ({})

-    signal attachTriggered(string localPath)
    signal closeAllTriggered()
    signal inputFieldForceActiveFocusTriggered()
    signal messageSent()
@@ -220,14 +219,14 @@ ToolBar {
        }

        Item {
-            visible: !isReply && (!hasAttachment || uploadingBusySpinner.running)
+            visible: !ChatBoxHelper.isReplying && (!ChatBoxHelper.hasAttachment || uploadingBusySpinner.running)
            implicitWidth: uploadButton.implicitWidth
            implicitHeight: uploadButton.implicitHeight
            ToolButton {
                id: uploadButton
                anchors.fill: parent
                // Matrix does not allow sending attachments in replies
-                visible: !isReply && !hasAttachment && !uploadingBusySpinner.running
+                visible: !ChatBoxHelper.isReplying  && !ChatBoxHelper.hasAttachment && !uploadingBusySpinner.running
                icon.name: "mail-attachment"
                text: i18n("Attach an image or file")
                display: AbstractButton.IconOnly
@@ -239,7 +238,7 @@ ToolBar {
                        var fileDialog = openFileDialog.createObject(ApplicationWindow.overlay)
                        fileDialog.chosen.connect((path) => {
                            if (!path) { return }
-                            attachTriggered(path)
+                            ChatBoxHelper.attachmentPath = path;
                        })
                        fileDialog.open()
                    }
@@ -318,13 +317,21 @@ ToolBar {
        if (!Clipboard.saveImage(localPath)) {
            return;
        }
-        attachTriggered(localPath)
+        ChatBoxHelper.attachmentPath = localPath;
    }

    function postMessage() {
        checkForFancyEffectsReason();
-        roomManager.actionsHandler.postMessage(inputField.text.trim(), attachmentPath,
-            replyEventId, editEventId, userAutocompleted);
+        if (ChatBoxHelper.hasAttachment) {
+            // send attachment but don't reset the text
+            roomManager.actionsHandler.postMessage("", ChatBoxHelper.attachmentPath,
+                ChatBoxHelper.replyEventId, ChatBoxHelper.editEventId, {});
+            currentRoom.markAllMessagesAsRead();
+            messageSent();
+            return;
+        }
+        roomManager.actionsHandler.postMessage(inputField.text.trim(), ChatBoxHelper.attachmentPath,
+            ChatBoxHelper.replyEventId, ChatBoxHelper.editEventId, userAutocompleted);
        currentRoom.markAllMessagesAsRead();
        inputField.clear();
        inputField.text = Qt.binding(function() {
--- a/imports/NeoChat/Component/ChatBox/ChatBox.qml
+++ b/imports/NeoChat/Component/ChatBox/ChatBox.qml
@@ -13,19 +13,8 @@ import org.kde.neochat 1.0

 Item {
    id: root
-    readonly property bool isReply: replyEventId.length > 0
-    property var replyUser
-    property alias replyEventId: chatBar.replyEventId
-    property string replyContent: ""
-
-    readonly property bool hasAttachment: attachmentPath.length > 0
-    property string attachmentPath: ""
-
    property alias inputFieldText: chatBar.inputFieldText

-    readonly property bool isEdit: editEventId.length > 0
-    property alias editEventId: chatBar.editEventId
-
    signal fancyEffectsReasonFound(string fancyEffect)

    Kirigami.Theme.colorSet: Kirigami.Theme.View
@@ -76,6 +65,7 @@ Item {
        sourceComponent: EmojiPicker{
            textArea: chatBar.textField
            emojiModel: EmojiModel { id: emojiModel }
+            onChosen: addText(emoji)
        }
        Behavior on height {
            NumberAnimation {
@@ -97,10 +87,8 @@ Item {

    ReplyPane {
        id: replyPane
-        visible: isReply || isEdit
-        isEdit: root.isEdit
-        user: root.replyUser
-        content: root.replyContent
+        visible: ChatBoxHelper.isReplying || ChatBoxHelper.isEditing
+        user: ChatBoxHelper.replyUser
        width: parent.width
        height: visible ? implicitHeight : 0
        anchors.bottom: attachmentSeparator.top
@@ -123,8 +111,7 @@ Item {

    AttachmentPane {
        id: attachmentPane
-        attachmentPath: root.attachmentPath
-        visible: hasAttachment
+        visible: ChatBoxHelper.hasAttachment
        width: parent.width
        height: visible ? implicitHeight : 0
        anchors.bottom: chatBarSeparator.top
@@ -159,36 +146,9 @@ Item {
                easing.type: Easing.OutCubic
            }
        }
-    }

-    Connections {
-        target: replyPane
-        function onClearEditReplyTriggered() {
-            if (isEdit) {
-                clearEdit()
-            }
-            if (isReply) {
-                clearReply()
-            }
-        }
-    }
-
-    Connections {
-        target: attachmentPane
-        function onClearAttachmentTriggered() {
-            clearAttachment()
-        }
-    }
-
-    Connections {
-        target: chatBar
-        function onAttachTriggered(localPath) {
-            attach(localPath)
-        }
-        function onCloseAllTriggered() {
-            closeAll()
-        }
-        function onMessageSent() {
+        onCloseAllTriggered: closeAll()
+        onMessageSent: {
            closeAll()
            checkForFancyEffectsReason()
        }
@@ -225,70 +185,41 @@ Item {
        root.inputFieldText = inputFieldText.substr(0, inputField.cursorPosition) + str + inputFieldText.substr(inputField.cursorPosition)
    }

-    function clearText() {
-        // ChatBar's TextArea syncs currentRoom.cachedInput with the TextArea's text property
-        root.inputFieldText = ""
-    }
-
    function focusInputField() {
        chatBar.inputFieldForceActiveFocusTriggered()
    }

-    function edit(editContent, editFormatedContent, editEventId) {
-        // Set the input field in edit mode
-        root.inputFieldText = editContent;
-        root.editEventId = editEventId;
-        root.replyContent = editContent;
+    Connections {
+        target: ChatBoxHelper

-        // clean autocompletion list
-        chatBar.userAutocompleted = {};
-
-        // Fill autocompletion list with values extracted from message.
-        // We can't just iterate on every user in the list and try to
-        // find matching display name since some users have display name
-        // matching frequent words and this will marks too many words as
-        // mentions.
-        const regex = /<a href=\"https:\/\/matrix.to\/#\/(@[a-zA-Z09]*:[a-zA-Z09.]*)\">([^<]*)<\/a>/g;
-
-        let match;
-        while ((match = regex.exec(editFormatedContent.toString())) !== null) {
-            chatBar.userAutocompleted[match[2]] = match[1];
+        function onShouldClearText() {
+            root.inputFieldText = "";
        }
-    }

-    function clearEdit() {
-        // Clear input when edits are cancelled.
-        // Cached input will be
-        clearText()
-        clearReply()
-        root.editEventId = "";
-    }
+        function onEditing(editContent, editFormatedContent) {
+            // Set the input field in edit mode
+            root.inputFieldText = editContent;
+            //root.replyContent = editContent;

-    function attach(localPath) {
-        root.attachmentPath = localPath
-    }
+            // clean autocompletion list
+            chatBar.userAutocompleted = {};

-    function clearAttachment() {
-        root.attachmentPath = ""
-    }
+            // Fill autocompletion list with values extracted from message.
+            // We can't just iterate on every user in the list and try to
+            // find matching display name since some users have display name
+            // matching frequent words and this will marks too many words as
+            // mentions.
+            const regex = /<a href=\"https:\/\/matrix.to\/#\/(@[a-zA-Z09]*:[a-zA-Z09.]*)\">([^<]*)<\/a>/g;

-    function clearReply() {
-        replyUser = null;
-        root.replyContent = "";
-        root.replyEventId = "";
-        // Don't clear input when replies are cancelled
+            let match;
+            while ((match = regex.exec(editFormatedContent.toString())) !== null) {
+                chatBar.userAutocompleted[match[2]] = match[1];
+            }
+        }
    }

    function closeAll() {
-        if (hasAttachment) {
-            clearAttachment();
-        }
-        if (isEdit) {
-            clearEdit();
-        }
-        if (isReply) {
-            clearReply();
-        }
+        ChatBoxHelper.clear();
        chatBar.emojiPaneOpened = false;
    }
 }
--- a/imports/NeoChat/Component/ChatBox/ReplyPane.qml
+++ b/imports/NeoChat/Component/ChatBox/ReplyPane.qml
@@ -7,15 +7,13 @@ import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15
 import org.kde.kirigami 2.14 as Kirigami
+import org.kde.neochat 1.0

 Loader {
    id: root
-    property bool isEdit: false
+    readonly property bool isEdit: ChatBoxHelper.isEditing
    property var user: null
-    property string content: ""
-    property string avatarMediaUrl: user ? "image://mxc/" + replyUser.avatarMediaId : ""
-
-    signal clearEditReplyTriggered()
+    property string avatarMediaUrl: user ? "image://mxc/" + user.avatarMediaId : ""

    active: visible
    sourceComponent: Pane {
@@ -78,9 +76,9 @@ Loader {
                        topPadding: 0
                        bottomPadding: 0
                        text: {
-                            let stylesheet = "<style> a{color:"+Kirigami.Theme.linkColor+";}.user-pill{}</style>"
-                            let userName = user ? "<font color=\""+ user.color +"\">" + user.displayName + "</font>" : ""
-                            return stylesheet + content
+                            const stylesheet = "<style> a{color:"+Kirigami.Theme.linkColor+";}.user-pill{}</style>";
+                            const content = ChatBoxHelper.isReplying ? ChatBoxHelper.replyEventContent : ChatBoxHelper.editContent;
+                            return stylesheet + content;
                        }
                        selectByMouse: true
                        selectByKeyboard: true
@@ -101,9 +99,7 @@ Loader {
                icon.name: "dialog-cancel"
                text: i18n("Cancel")
                display: AbstractButton.IconOnly
-                onClicked: {
-                    clearEditReplyTriggered()
-                }
+                onClicked: ChatBoxHelper.clearEditReply()
                ToolTip.text: text
                ToolTip.visible: hovered
            }