Split text section into blocks

The aim is to be able to use separate delegate for things like codeblocks and quotes so that they can be styled differently. ![image](/uploads/c813c0d1767f45df14cebe632e2ee10a/image.png)
2024-02-27 18:52:06 +00:00
parent ca439b0f86
commit 1fac6ca34a
12 changed files with 702 additions and 130 deletions
--- a/src/qml/CodeComponent.qml
+++ b/src/qml/CodeComponent.qml
@@ -0,0 +1,115 @@
+// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
+
+import QtQuick
+import QtQuick.Controls as QQC2
+import QtQuick.Layouts
+
+import org.kde.kirigami as Kirigami
+import org.kde.syntaxhighlighting
+
+import org.kde.neochat
+
+QQC2.Control {
+    id: root
+
+    /**
+     * @brief The display text of the message.
+     */
+    required property string display
+
+    /**
+     * @brief The attributes of the component.
+     */
+    required property var componentAttributes
+
+    /**
+     * @brief The maximum width that the bubble's content can be.
+     */
+    property real maxContentWidth: -1
+
+    /**
+     * @brief The user selected text has changed.
+     */
+    signal selectedTextChanged(string selectedText)
+
+    /**
+     * @brief Request a context menu be show for the message.
+     */
+    signal showMessageMenu
+
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+    Layout.maximumWidth: root.maxContentWidth
+
+    topPadding: 0
+    bottomPadding: 0
+
+    contentItem: RowLayout {
+        spacing: Kirigami.Units.smallSpacing
+
+        ColumnLayout {
+            id: lineNumberColumn
+            spacing: 0
+            Repeater {
+                id: repeater
+                model: LineModel {
+                    id: lineModel
+                    document: codeText.textDocument
+                }
+                delegate: QQC2.Label {
+                    id: label
+                    required property int index
+                    required property int docLineHeight
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: docLineHeight
+                    horizontalAlignment: Text.AlignRight
+                    text: index + 1
+                    color: Kirigami.Theme.disabledTextColor
+
+                    font.family: "monospace"
+                }
+            }
+        }
+        Kirigami.Separator {
+            Layout.fillHeight: true
+        }
+        TextEdit {
+            id: codeText
+            Layout.fillWidth: true
+            topPadding: Kirigami.Units.smallSpacing
+            bottomPadding: Kirigami.Units.smallSpacing
+
+            text: root.display
+            readOnly: true
+            textFormat: TextEdit.PlainText
+            wrapMode: TextEdit.Wrap
+            color: Kirigami.Theme.textColor
+
+            font.family: "monospace"
+
+            Kirigami.SpellCheck.enabled: false
+
+            onWidthChanged: lineModel.resetModel()
+            onHeightChanged: lineModel.resetModel()
+
+            onSelectedTextChanged: root.selectedTextChanged(selectedText)
+
+            SyntaxHighlighter {
+                property string definitionName: Repository.definitionForName(root.componentAttributes.class).name
+                textEdit: definitionName == "None" ? null : codeText
+                definition: definitionName
+            }
+
+            TapHandler {
+                acceptedButtons: Qt.LeftButton
+                onLongPressed: root.showMessageMenu()
+            }
+        }
+    }
+
+    background: Rectangle {
+        color: Kirigami.Theme.backgroundColor
+        radius: Kirigami.Units.smallSpacing
+    }
+}
--- a/src/qml/MessageComponentChooser.qml
+++ b/src/qml/MessageComponentChooser.qml
@@ -79,6 +79,28 @@ DelegateChooser {
        }
    }

+    DelegateChoice {
+        roleValue: MessageComponentType.Code
+        delegate: CodeComponent {
+            maxContentWidth: root.maxContentWidth
+            onSelectedTextChanged: selectedText => {
+                root.selectedTextChanged(selectedText);
+            }
+            onShowMessageMenu: root.showMessageMenu()
+        }
+    }
+
+    DelegateChoice {
+        roleValue: MessageComponentType.Quote
+        delegate: QuoteComponent {
+            maxContentWidth: root.maxContentWidth
+            onSelectedTextChanged: selectedText => {
+                root.selectedTextChanged(selectedText);
+            }
+            onShowMessageMenu: root.showMessageMenu()
+        }
+    }
+
    DelegateChoice {
        roleValue: MessageComponentType.Audio
        delegate: AudioComponent {
--- a/src/qml/QuoteComponent.qml
+++ b/src/qml/QuoteComponent.qml
@@ -0,0 +1,67 @@
+// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
+
+import QtQuick
+import QtQuick.Controls as QQC2
+import QtQuick.Layouts
+
+import org.kde.kirigami as Kirigami
+
+QQC2.Control {
+    id: root
+
+    /**
+     * @brief The display text of the message.
+     */
+    required property string display
+
+    /**
+     * @brief The maximum width that the bubble's content can be.
+     */
+    property real maxContentWidth: -1
+
+    /**
+     * @brief The user selected text has changed.
+     */
+    signal selectedTextChanged(string selectedText)
+
+    /**
+     * @brief Request a context menu be show for the message.
+     */
+    signal showMessageMenu
+
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+    Layout.maximumWidth: root.maxContentWidth
+
+    topPadding: 0
+    bottomPadding: 0
+
+    contentItem: TextEdit {
+        id: quoteText
+        Layout.fillWidth: true
+        topPadding: Kirigami.Units.smallSpacing
+        bottomPadding: Kirigami.Units.smallSpacing
+
+        text: root.display
+        readOnly: true
+        textFormat: TextEdit.RichText
+        wrapMode: TextEdit.Wrap
+        color: Kirigami.Theme.textColor
+
+        font.italic: true
+
+        onSelectedTextChanged: root.selectedTextChanged(selectedText)
+
+        TapHandler {
+            enabled: !quoteText.hoveredLink
+            acceptedButtons: Qt.LeftButton
+            onLongPressed: root.showMessageMenu()
+        }
+    }
+
+    background: Rectangle {
+        color: Kirigami.Theme.backgroundColor
+        radius: Kirigami.Units.smallSpacing
+    }
+}