HtmlEditorContainer.qml

/* 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.Mail.Stores.Composer 1.0
import Dekko.Lomiri.Constants 1.0
import Dekko.Editor 1.0
 
Column {
    id: htmlEditorContainer
 
    property alias editor: htmlEditor
    property string currentFontSize: "11pt"
    readonly property color defaultTextColor: Suru.foregroundColor
    property color currentTextColor: defaultTextColor
    property color currentHighlightColor: "transparent"
 
    property string pendingFontSize: ""
    property string pendingHighlightColor: ""
    property string pendingTextColor: ""
    
    // Editor loading state
    property bool isEditorLoaded: false
    property string pendingDocument: ""
    property string currentDocument: ""
    property bool isInternallyUpdating: false
 
    function setHtmlDocument(html) {
        currentDocument = html || ""
        if (htmlEditorContainer.visible && isEditorLoaded && htmlEditor) {
            htmlEditor.setDocument(html)
        } else {
            pendingDocument = html || ""
        }
    }
    
    Timer {
        id: applyFormatTimer
        interval: 100
        onTriggered: {
            htmlEditor.focusEditor(true)
            if (pendingFontSize !== "") {
                htmlEditor.setFontSize(pendingFontSize)
                pendingFontSize = ""
            }
            if (pendingHighlightColor !== "") {
                htmlEditor.setHighlightColor(pendingHighlightColor)
                pendingHighlightColor = ""
            }
            if (pendingTextColor !== "") {
                htmlEditor.setTextColor(pendingTextColor)
                pendingTextColor = ""
            }
        }
    }
 
 
    function rgbToHex(rgbStr) {
        if (!rgbStr) return defaultTextColor
        
        // Handle format: rgb(255, 102, 0) or rgb(255,102,0) - gotta be flexible
        const match = rgbStr.match(/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/)
        if (match) {
            const r = parseInt(match[1])
            const g = parseInt(match[2])
            const b = parseInt(match[3])
            // Ensure 2 digits for each component - padding with zeros if needed
            const hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
            return hex
        }
        return rgbStr
    }
 
    function parsePathForFormatting(path) {
        const parts = path.split('>')
        let size = "11pt"
        let color = defaultTextColor
        let highlight = "transparent"
 
        // Iterate through all parts to find the innermost formatting - last one wins
        for (let i = 0; i < parts.length; i++) {
            const part = parts[i]
            
            // Extract font size - look for fontSize= something
            const fontSizeMatch = part.match(/fontSize=([^\]]+)/)
            if (fontSizeMatch) {
                size = fontSizeMatch[1]
            }
 
            // Extract text color - [color= rgb stuff]
            const colorMatch = part.match(/\[color=([^\]]+)\]/)
            if (colorMatch) {
                color = rgbToHex(colorMatch[1])
            }
 
            // Extract highlight color - backgroundColor=
            const highlightMatch = part.match(/backgroundColor=([^\]]+)/)
            if (highlightMatch) {
                highlight = rgbToHex(highlightMatch[1])
            }
        }
        
        // Update the current values
        currentFontSize = size
        currentTextColor = color
        currentHighlightColor = highlight
        
        // Maybe log this for debugging? console.log("Parsed formatting: size=" + size + ", color=" + color + ", highlight=" + highlight)
    }
 
    spacing: 0
 
    HtmlEditorToolbar {
        id: htmlToolbar
        width: parent.width
        editor: htmlEditor
        currentFontSize: htmlEditorContainer.currentFontSize
        currentTextColor: htmlEditorContainer.currentTextColor
        currentHighlightColor: htmlEditorContainer.currentHighlightColor
 
        onFontSizeClicked: {
            PopupUtils.open(fontSizeDialogComponent)
        }
 
        onTextColorClicked: {
            PopupUtils.open(colorPickerDialogComponent, undefined, {isHighlight: false})
        }
 
        onHighlightColorClicked: {
            PopupUtils.open(colorPickerDialogComponent, undefined, {isHighlight: true})
        }
 
        onLinkClicked: {
            PopupUtils.open(linkDialogComponent)
        }
    }
 
    RichTextEditor {
        id: htmlEditor
        width: parent.width
        height: parent.height - htmlToolbar.height
 
        function requestContentUpdate() {
            requestDocument()
        }
 
        onVisibleChanged: {
            if (htmlEditorContainer.visible && htmlEditorContainer.isEditorLoaded && htmlEditorContainer.pendingDocument !== "") {
                htmlEditor.setDocument(htmlEditorContainer.pendingDocument)
                htmlEditorContainer.pendingDocument = ""
            }
        }
 
        onEditorLoaded: {
            htmlEditorContainer.isEditorLoaded = true
            if (htmlEditorContainer.visible && htmlEditorContainer.pendingDocument !== "") {
                htmlEditor.setDocument(htmlEditorContainer.pendingDocument)
                htmlEditorContainer.pendingDocument = ""
            }
        }
 
        onDocumentReady: {
            htmlEditorContainer.currentDocument = document || ""
            htmlEditorContainer.isInternallyUpdating = true
            if (ComposerStore.htmlContent !== htmlEditorContainer.currentDocument) {
                ComposerStore.htmlContent = htmlEditorContainer.currentDocument
            }
            htmlEditorContainer.isInternallyUpdating = false
        }
 
        onContentChanged: {
            // Could debounce this or something, but for now just update
        }
 
        onPathChanged: {
            htmlEditorContainer.parsePathForFormatting(path)
        }
 
        Timer {
            interval: 2000
            running: htmlEditorContainer.visible && htmlEditorContainer.isEditorLoaded
            repeat: true
            onTriggered: htmlEditor.requestDocument()
        }
    }
 
    Component {
        id: linkDialogComponent
        LinkDialog {
            onLinkInserted: function(url, text) {
                // If link text is provided and no text is selected, insert the text first - better UX
                if (text && text.length > 0) {
                    htmlEditor.insertLinkWithText(url, text, { target: '_blank' })
                } else {
                    htmlEditor.insertLink(url, { target: '_blank' })
                }
            }
        }
    }
 
    Component {
        id: fontSizeDialogComponent
        FontSizeDialog {
            onSizeSelected: {
                htmlEditorContainer.currentFontSize = size
                htmlEditorContainer.pendingFontSize = size
                applyFormatTimer.restart()
            }
        }
    }
 
    Component {
        id: colorPickerDialogComponent
        ColorPickerDialog {
            onColorSelected: {
                if (isHighlight) {
                    htmlEditorContainer.currentHighlightColor = color
                    htmlEditorContainer.pendingHighlightColor = color
                } else {
                    htmlEditorContainer.currentTextColor = color
                    htmlEditorContainer.pendingTextColor = color
                }
                applyFormatTimer.restart()
            }
        }
    }
}