MessageComposer.qml

/* Copyright (C) 2016 - 2017 Dan Chapman <dpniel@ubuntu.com>
   Copyright (C) 2025 CIT-Services <info@cit-services.eu>
 
   This file is part of Dekko email client for Ubuntu devices
 
   This program is free software; you can redistribute it and/or
   modify it under the terms of the GNU General Public License as
   published by the Free Software Foundation; either version 2 of
   the License or (at your option) version 3
 
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.
 
   You should have received a copy of the GNU General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.4
import QtQuick.Controls.Suru 2.2
import Lomiri.Components 1.3
import Lomiri.Components.Popups 1.3
import Dekko.Components 1.0
import Dekko.Mail 1.0
import Dekko.Mail.API 1.0
import Dekko.Mail.Stores.Composer 1.0
import Dekko.Markdown 1.0
import Dekko.Lomiri.Constants 1.0
 
FocusScope {
    anchors.fill: parent
    property bool pendingHtmlToPlainConversion: false
    property bool wasSwitchedToPlain: false
 
    function plainTextToHtml(text) {
        return '<p>' + (text || "")
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;')
            .replace(/\n/g, '<br>') + '</p>'
    }
 
    function hasValidHtmlContent(content) {
        if (!content || content.trim().length === 0) {
            return false
        }
        return content !== "<br>" && content !== "<p><br></p>" && content !== "<br/>"
    }
 
    Rectangle {
        anchors.fill: parent
        color: Suru.backgroundColor
    }
 
    Binding {
        target: ComposerStore
        property: "bodyDocument"
        value: me.textDocument
    }
 
    Component.onCompleted: {
        if (ComposerStore.composeMode === "html") {
            // Force initial sync if opened directly in HTML mode
            if (hasValidHtmlContent(ComposerStore.htmlContent)) {
                htmlEditorContainer.setHtmlDocument(ComposerStore.htmlContent)
            } else {
                const plainText = me.text || ""
                if (plainText.trim()) {
                    const wrappedHtml = plainTextToHtml(plainText)
                    htmlEditorContainer.setHtmlDocument(wrappedHtml)
                    ComposerStore.htmlContent = wrappedHtml
                }
            }
        }
    }
 
    Component.onDestruction: {
        pendingHtmlToPlainConversion = false
        if (htmlEditorContainer) {
            htmlEditorContainer.isEditorLoaded = false
        }
    }
 
    Connections {
        target: ComposerStore.sendInProgress ? null : ComposerStore
        onComposeModeChanged: {
            if (ComposerStore.sendInProgress) {
                return;
            }
            if (ComposerStore.composeMode === "html") {
                // Switched to HTML
                pendingHtmlToPlainConversion = false
 
                if (wasSwitchedToPlain) {
                    const plainText = me.text || ""
                    const wrappedHtml = plainTextToHtml(plainText)
                    htmlEditorContainer.setHtmlDocument(wrappedHtml)
                    ComposerStore.htmlContent = wrappedHtml
                    wasSwitchedToPlain = false
                } else if (hasValidHtmlContent(ComposerStore.htmlContent)) {
                    htmlEditorContainer.setHtmlDocument(ComposerStore.htmlContent);
                } else {
                    const plainText = me.text || ""
                    if (plainText.trim()) {
                        const wrappedHtml = plainTextToHtml(plainText)
                        htmlEditorContainer.setHtmlDocument(wrappedHtml)
                        ComposerStore.htmlContent = wrappedHtml
                    }
                }
            } else {
                // Switched to plain text - convert HTML to plain text
                wasSwitchedToPlain = true
                if (hasValidHtmlContent(ComposerStore.htmlContent)) {
                    me.text = ComposerStore.builder.htmlToPlainText(ComposerStore.htmlContent)
                }
                if (htmlEditorContainer.editor) {
                    pendingHtmlToPlainConversion = true
                    htmlEditorContainer.editor.requestPlainText()
                } else {
                    pendingHtmlToPlainConversion = false
                }
            }
        }
 
        onHtmlContentChanged: {
            if (ComposerStore.sendInProgress) {
                return;
            }
            if (ComposerStore.composeMode === "html" && htmlEditorContainer.visible) {
                if (hasValidHtmlContent(ComposerStore.htmlContent)) {
                    
                    if (!htmlEditorContainer.isInternallyUpdating && ComposerStore.htmlContent !== htmlEditorContainer.currentDocument) {
                        htmlEditorContainer.setHtmlDocument(ComposerStore.htmlContent)
                    }
                }
            }
        }
    }
 
    Connections {
        target: htmlEditorContainer.editor
        onPlainTextReady: function(text) {
            if (pendingHtmlToPlainConversion && ComposerStore.composeMode === "plain") {
                const plain = (text || "").trim()
                if (plain.length > 0 || !hasValidHtmlContent(ComposerStore.htmlContent)) {
                    me.text = plain
                }
                pendingHtmlToPlainConversion = false
            }
        }
    }
 
    Column {
        anchors.fill: parent
 
        // Persistent header - always visible
        Column {
            id: composerHeader
            width: parent.width
 
            SenderIdentityField {
                anchors {
                    left: parent.left
                    right: parent.right
                }
            }
 
            RecipientField {
                recipientType: RecipientType.To
                recipientModel: ComposerStore.recipients.to
                anchors {
                    left: parent.left
                    right: parent.right
                }
            }
 
            RecipientField {
                visible: ComposerStore.showCC || ComposerStore.recipients.cc.count
                recipientType: RecipientType.Cc
                recipientModel: ComposerStore.recipients.cc
                anchors {
                    left: parent.left
                    right: parent.right
                }
            }
 
            RecipientField {
                visible: ComposerStore.showBCC || ComposerStore.recipients.bcc.count
                recipientType: RecipientType.Bcc
                recipientModel: ComposerStore.recipients.bcc
                anchors {
                    left: parent.left
                    right: parent.right
                }
            }
 
            SubjectField {
                anchors {
                    left: parent.left
                    right: parent.right
                }
            }
        }
 
        // Switchable editor area
        Item {
            width: parent.width
            height: parent.height - composerHeader.height
 
            MarkdownEditor {
                id: me
                anchors.fill: parent
                frameSpacing: units.gu(2)
                plainTextOnly: true
                visible: ComposerStore.composeMode === "plain"
                // No header - just the text area
            }
 
            HtmlEditorContainer {
                id: htmlEditorContainer
                anchors.fill: parent
                visible: ComposerStore.composeMode === "html"
            }
        }
    }
}