editor.qml

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Controls.Basic

Rectangle {
    id: root
    color: "#ffffff"

    FontLoader { id: ic; source: "lucide.ttf" }

    property string fontFamily: '"Segoe UI", system-ui, sans-serif'
    property string markdownSource: ""

    readonly property var icons: ({
        "bold": "\uE0D7", "italic": "\uE0D8", "strikethrough": "\uE14C",
        "heading-1": "\uE0E3", "heading-2": "\uE0E4", "heading-3": "\uE0E5",
        "list": "\uE0E8", "list-ordered": "\uE0E9",
        "link": "\uE105", "code": "\uE0E6", "quote": "\uE14D",
        "minus": "\uE120", "check": "\uE14B"
    })

    function wrapSelection(before, after) {
        var ta = editorArea
        if (ta.selectionStart !== ta.selectionEnd) {
            var s = ta.selectionStart
            var e = ta.selectionEnd
            var sel = ta.getText(s, e)
            var full = ta.getText(0, ta.length)
            ta.text = full.substring(0, s) + before + sel + after + full.substring(e)
            ta.cursorPosition = s + before.length + sel.length + after.length
        } else {
            var pos = ta.cursorPosition
            var full2 = ta.getText(0, ta.length)
            ta.text = full2.substring(0, pos) + before + after + full2.substring(pos)
            ta.cursorPosition = pos + before.length
        }
        ta.forceActiveFocus()
    }

    function prefixLine(prefix) {
        var ta = editorArea
        var pos = ta.cursorPosition
        var full = ta.getText(0, ta.length)
        var lineStart = full.lastIndexOf("\n", pos - 1) + 1
        ta.text = full.substring(0, lineStart) + prefix + full.substring(lineStart)
        ta.cursorPosition = pos + prefix.length
        ta.forceActiveFocus()
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        // ── Toolbar ──
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 36
            color: "#f9fafb"

            Row {
                anchors.fill: parent
                anchors.leftMargin: 8
                anchors.verticalCenter: parent.verticalCenter
                spacing: 2

                Repeater {
                    model: ListModel {
                        ListElement { t: "bold"; tip: "Bold"; b: "**"; a: "**"; kind: "wrap" }
                        ListElement { t: "italic"; tip: "Italic"; b: "_"; a: "_"; kind: "wrap" }
                        ListElement { t: "strikethrough"; tip: "Strike"; b: "~~"; a: "~~"; kind: "wrap" }
                        ListElement { t: ""; tip: ""; b: ""; a: ""; kind: "sep" }
                        ListElement { t: "heading-1"; tip: "H1"; b: "# "; a: ""; kind: "line" }
                        ListElement { t: "heading-2"; tip: "H2"; b: "## "; a: ""; kind: "line" }
                        ListElement { t: "heading-3"; tip: "H3"; b: "### "; a: ""; kind: "line" }
                        ListElement { t: ""; tip: ""; b: ""; a: ""; kind: "sep" }
                        ListElement { t: "list"; tip: "List"; b: "- "; a: ""; kind: "line" }
                        ListElement { t: "list-ordered"; tip: "Ordered"; b: "1. "; a: ""; kind: "line" }
                        ListElement { t: "check"; tip: "Task"; b: "- [ ] "; a: ""; kind: "line" }
                        ListElement { t: ""; tip: ""; b: ""; a: ""; kind: "sep" }
                        ListElement { t: "link"; tip: "Link"; b: "["; a: "](url)"; kind: "wrap" }
                        ListElement { t: "code"; tip: "Code"; b: "`"; a: "`"; kind: "wrap" }
                        ListElement { t: "quote"; tip: "Quote"; b: "> "; a: ""; kind: "line" }
                        ListElement { t: "minus"; tip: "HR"; b: "\n---\n"; a: ""; kind: "line" }
                    }

                    Rectangle {
                        visible: model.kind !== "sep"
                        width: 28
                        height: 28
                        radius: 4
                        color: tbHover.containsMouse ? "#e5e7eb" : "transparent"

                        Text {
                            anchors.centerIn: parent
                            text: root.icons[model.t]
                            font.family: ic.name
                            font.pixelSize: 14
                            color: "#374151"
                        }

                        MouseArea {
                            id: tbHover
                            anchors.fill: parent
                            hoverEnabled: true
                            cursorShape: Qt.PointingHandCursor
                            onClicked: {
                                if (model.kind === "wrap") root.wrapSelection(model.b, model.a)
                                else if (model.kind === "line") root.prefixLine(model.b)
                            }
                        }
                    }

                    Rectangle {
                        visible: model.kind === "sep"
                        width: 1; height: 18
                        color: "#d1d5db"
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }

                Item { width: 8; height: 1 }

                Text {
                    text: editorArea.text.length + " chars"
                    font.family: root.fontFamily
                    font.pixelSize: 11
                    color: "#9ca3af"
                    anchors.verticalCenter: parent.verticalCenter
                }
            }
        }

        Rectangle { Layout.fillWidth: true; Layout.preferredHeight: 1; color: "#e5e7eb" }

        // ── Split: Editor | Preview ──
        SplitView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            orientation: Qt.Horizontal

            // Source editor
            Rectangle {
                SplitView.preferredWidth: 400
                SplitView.minimumWidth: 200
                color: "#ffffff"

                Flickable {
                    id: srcFlick
                    anchors.fill: parent
                    anchors.margins: 16
                    contentWidth: width
                    contentHeight: editorArea.height + 40
                    clip: true
                    flickableDirection: Flickable.VerticalFlick
                    boundsBehavior: Flickable.StopAtBounds

                    TextEdit {
                        id: editorArea
                        width: srcFlick.width
                        font.family: '"Cascadia Code", "Fira Code", Consolas, monospace'
                        font.pixelSize: 14
                        color: "#1f2937"
                        wrapMode: TextEdit.Wrap
                        selectByMouse: true
                        textFormat: TextEdit.PlainText
                        onTextChanged: root.markdownSource = text

                        Text {
                            visible: editorArea.text.length === 0 && !editorArea.activeFocus
                            text: "Start writing markdown..."
                            font: editorArea.font
                            color: "#9ca3af"
                        }
                    }
                }
            }

            Rectangle { SplitView.preferredWidth: 1; color: "#e5e7eb" }

            // Preview
            Rectangle {
                SplitView.fillWidth: true
                color: "#ffffff"

                Flickable {
                    anchors.fill: parent
                    anchors.margins: 16
                    contentWidth: width
                    contentHeight: previewCol.height + 20
                    clip: true
                    flickableDirection: Flickable.VerticalFlick
                    boundsBehavior: Flickable.StopAtBounds

                    Column {
                        id: previewCol
                        width: parent.width
                        spacing: 12

                        Repeater {
                            id: previewRep
                            model: root.renderBlocks(root.markdownSource)

                            delegate: Item {
                                width: previewCol.width
                                implicitHeight: {
                                    if (modelData.type === "heading") return modelData.level === 1 ? 40 : modelData.level === 2 ? 32 : 26
                                    if (modelData.type === "hr") return 20
                                    if (modelData.type === "code") return 40
                                    if (modelData.type === "list") return 24
                                    if (modelData.type === "quote") return 30
                                    return 26
                                }

                                Text {
                                    visible: modelData.type === "heading"
                                    anchors.left: parent.left
                                    anchors.right: parent.right
                                    text: modelData.text
                                    font.family: root.fontFamily
                                    font.pixelSize: modelData.level === 1 ? 28 : modelData.level === 2 ? 22 : 18
                                    font.weight: Font.DemiBold
                                    color: "#111827"
                                    wrapMode: Text.WordWrap
                                }

                                Text {
                                    visible: modelData.type === "paragraph"
                                    anchors.left: parent.left
                                    anchors.right: parent.right
                                    text: modelData.text
                                    font.family: root.fontFamily
                                    font.pixelSize: 15
                                    color: "#374151"
                                    wrapMode: Text.WordWrap
                                }

                                Rectangle {
                                    visible: modelData.type === "code"
                                    anchors.left: parent.left
                                    anchors.right: parent.right
                                    anchors.top: parent.top
                                    height: 36
                                    radius: 6
                                    color: "#f3f4f6"

                                    Text {
                                        anchors.fill: parent
                                        anchors.margins: 8
                                        text: modelData.text
                                        font.family: '"Cascadia Code", Consolas, monospace'
                                        font.pixelSize: 13
                                        color: "#374151"
                                        elide: Text.ElideRight
                                    }
                                }

                                Rectangle {
                                    visible: modelData.type === "hr"
                                    anchors.left: parent.left
                                    anchors.right: parent.right
                                    anchors.verticalCenter: parent.verticalCenter
                                    height: 2
                                    color: "#e5e7eb"
                                }

                                Text {
                                    visible: modelData.type === "list"
                                    anchors.left: parent.left
                                    anchors.right: parent.right
                                    text: modelData.text
                                    font.family: root.fontFamily
                                    font.pixelSize: 15
                                    color: "#374151"
                                    wrapMode: Text.WordWrap
                                }

                                Row {
                                    visible: modelData.type === "quote"
                                    anchors.left: parent.left
                                    anchors.right: parent.right
                                    spacing: 8

                                    Rectangle {
                                        width: 3; height: parent.parent.height
                                        radius: 2; color: "#d1d5db"
                                    }

                                    Text {
                                        width: parent.parent.width - 14
                                        text: modelData.text
                                        font.family: root.fontFamily
                                        font.pixelSize: 15
                                        font.italic: true
                                        color: "#6b7280"
                                        wrapMode: Text.WordWrap
                                    }
                                }
                            }
                        }
                    }
                }

                Text {
                    visible: root.markdownSource.length === 0
                    anchors.centerIn: parent
                    text: "Preview"
                    font.family: root.fontFamily
                    font.pixelSize: 16
                    color: "#d1d5db"
                }
            }
        }
    }

    function renderBlocks(src) {
        var blocks = []
        var lines = src.split("\n")
        var i = 0
        while (i < lines.length) {
            var line = lines[i]
            if (line.trim() === "") { i++; continue }

            if (/^(-{3,}|\*{3,}|_{3,})$/.test(line.trim())) {
                blocks.push({"type":"hr","text":""})
                i++; continue
            }

            if (line.trim().startsWith("```")) {
                var codeLines = []
                i++
                while (i < lines.length && !lines[i].trim().startsWith("```")) {
                    codeLines.push(lines[i])
                    i++
                }
                i++
                blocks.push({"type":"code","text":codeLines.join("\n")})
                continue
            }

            var hMatch = line.match(/^(#{1,6})\s+(.+)/)
            if (hMatch) {
                blocks.push({"type":"heading","text":hMatch[2],"level":hMatch[1].length})
                i++; continue
            }

            if (line.startsWith("> ")) {
                blocks.push({"type":"quote","text":line.slice(2)})
                i++; continue
            }

            if (/^[-*+]\s+/.test(line)) {
                blocks.push({"type":"list","text":"• " + line.replace(/^[-*+]\s+/, "")})
                i++; continue
            }

            if (/^\d+\.\s+/.test(line)) {
                blocks.push({"type":"list","text":line})
                i++; continue
            }

            blocks.push({"type":"paragraph","text":line})
            i++
        }
        return blocks
    }
}