Блоки кода: отдельный компонент CodeBlock + MarkdownView (Telegram-пузырь)

- CodeBlock.qml: отдельный Rectangle #2e4d6a radius 12, header с языком и кнопкой 📋 Копировать (hover rgba 0.22/active 0.30, border, radius 11), код в rgba(0,0,0,0.22) radius 8, JetBrains Mono 13/tab 4, syntax highlight тёмной темой, selectByMouse - MarkdownView.qml: ScrollView+Column+Repeater, parseBlocks() разбивает markdown на html/code блоки, html через Text RichText, code через CodeBlock, copyRequested → mdParser.copyToClipboard - MdParser: parseBlocks() regex ```lang\n.*?\n``` + render для html частей, codeId/highlighted, highlightedCode(), highlight(...,true) forceDark, QTime удалён, QRegularExpression добавлен - EditorPanel: viewArea/livePreview теперь MarkdownView (markdown property), liveDebounce/markdown, onLinkActivated → handleLink, viewMode переключает markdown - CMake: добавлены CodeBlock.qml/MarkdownView.qml в qml модуль - Исправлены qmllint: rgba → Qt.rgba, lineHeight убран, model.type → required property
2026-09-01 21:07:55 +03:00
parent 79b76c8c42
commit ed7dc4e033
6 changed files with 338 additions and 47 deletions
@@ -0,0 +1,131 @@
+import QtQuick
+import QtQuick.Controls
+import Flora
+
+Rectangle {
+    id: root
+
+    property string code: ""
+    property string language: "text"
+    property string codeId: ""
+
+    signal copyRequested(string codeId)
+
+    // Telegram-like bubble
+    color: "#2e4d6a"
+    radius: 12
+    // adaptive width like Telegram message
+    width: parent ? Math.min(parent.width * 0.88, implicitWidth) : implicitWidth
+    implicitWidth: 400
+    implicitHeight: column.implicitHeight + 20
+
+    // For syntax highlighting, we use a TextArea with RichText
+    // The highlighted code is set from outside via highlightedText
+    property string highlightedText: ""
+
+    Column {
+        id: column
+        anchors.fill: parent
+        anchors.margins: 10
+        spacing: 6
+
+        // Header with language and copy button
+        Row {
+            width: parent.width
+            height: 24
+            spacing: 8
+
+            Label {
+                text: root.language.toUpperCase()
+                color: "#8a9ba8"
+                font.pixelSize: 10
+                font.bold: true
+                font.letterSpacing: 0.4
+                verticalAlignment: Text.AlignVCenter
+                height: parent.height
+                visible: root.language !== "text" && root.language !== ""
+            }
+            Item { width: parent.width - languageLabel.width - copyButton.width - 16; height: 1 }
+            Label {
+                id: languageLabel
+                text: root.language
+                visible: false
+                width: 0
+                height: 0
+            }
+
+            // Copy button - Telegram style, hover/active feedback
+            Rectangle {
+                id: copyButton
+                width: copyLabel.implicitWidth + 16
+                height: 22
+                radius: 11
+                color: copyHover.hovered ? (copyTap.pressed ? Qt.rgba(1,1,1,0.30) : Qt.rgba(1,1,1,0.22)) : Qt.rgba(1,1,1,0.12)
+                border.color: copyHover.hovered ? Qt.rgba(1,1,1,0.28) : Qt.rgba(1,1,1,0.18)
+                border.width: 1
+
+                property bool copied: false
+                Timer { id: copyResetTimer; interval: 1500; onTriggered: copyButton.copied = false }
+
+                Label {
+                    id: copyLabel
+                    anchors.centerIn: parent
+                    text: copyButton.copied ? "✓ Скопировано" : "📋 Копировать"
+                    color: copyButton.copied ? "#6ab2f6" : "#ffffff"
+                    font.pixelSize: 11
+                    font.family: "-apple-system, sans-serif"
+                }
+
+                HoverHandler { id: copyHover }
+                TapHandler {
+                    id: copyTap
+                    onTapped: {
+                        root.copyRequested(root.codeId)
+                        copyButton.copied = true
+                        copyResetTimer.restart()
+                    }
+                }
+                // For mouse cursor
+                HoverHandler {
+                    cursorShape: Qt.PointingHandCursor
+                }
+            }
+        }
+
+        // Code area - like real editor
+        Rectangle {
+            width: parent.width
+            color: Qt.rgba(0,0,0,0.22)
+            radius: 8
+            // height based on content
+            implicitHeight: codeText.implicitHeight + 20
+
+            ScrollView {
+                anchors.fill: parent
+                anchors.margins: 8
+                clip: true
+                ScrollBar.horizontal.policy: ScrollBar.AsNeeded
+                ScrollBar.vertical.policy: ScrollBar.AsNeeded
+
+                TextArea {
+                    id: codeText
+                    readOnly: true
+                    selectByMouse: true
+                    textFormat: Text.RichText
+                    wrapMode: Text.Wrap
+                    color: "#ffffff"
+                    selectionColor: "#3a6ea5"
+                    selectedTextColor: "#ffffff"
+                    font.family: "JetBrains Mono, Fira Code, Menlo, Consolas, monospace"
+                    font.pixelSize: 13
+                    tabStopDistance: 32
+                    text: root.highlightedText.length > 0 ? root.highlightedText : root.code
+                    background: Rectangle { color: "transparent" }
+                }
+            }
+        }
+    }
+
+    // For bracket matching highlight in editor, we could add a similar indicator
+    // But for preview, this is just display
+}