src/qml/RichLabel.qml

0001 // SPDX-FileCopyrightText: 2020 Black Hat <bhat@encom.eu.org>
0002 // SPDX-License-Identifier: GPL-3.0-only
0003
0004 import QtQuick
0005 import QtQuick.Layouts
0006
0007 import org.kde.neochat
0008 import org.kde.kirigami as Kirigami
0009
0010 /**
0011  * @brief A component to show the rich display text of text message.
0012  */
0013 TextEdit {
0014     id: root
0015
0016     /**
0017      * @brief The rich text message to display.
0018      */
0019     property string textMessage
0020
0021     /**
0022      * @brief Whether this message is replying to another.
0023      */
0024     property bool isReply
0025
0026     /**
0027      * @brief Regex for detecting a message with a single emoji.
0028      */
0029     readonly property var isEmojiRegex: /^(<span style='.*'>)?(\u00a9|\u00ae|[\u20D0-\u2fff]|[\u3190-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])+(<\/span>)?$/
0030
0031     /**
0032      * @brief Whether the message is an emoji
0033      */
0034     readonly property var isEmoji: isEmojiRegex.test(textMessage)
0035
0036     /**
0037      * @brief Regex for detecting a message with a spoiler.
0038      */
0039     readonly property var hasSpoiler: /data-mx-spoiler/g
0040
0041     /**
0042      * @brief Whether a spoiler should be revealed.
0043      */
0044     property bool spoilerRevealed: !hasSpoiler.test(textMessage)
0045
0046     ListView.onReused: Qt.binding(() => !hasSpoiler.test(textMessage))
0047
0048     persistentSelection: true
0049
0050     text: "<style>
0051 table {
0052     width:100%;
0053     border-width: 1px;
0054     border-collapse: collapse;
0055     border-style: solid;
0056 }
0057 code {
0058     background-color:" + Kirigami.Theme.alternateBackgroundColor + ";
0059 }
0060 table th,
0061 table td {
0062     border: 1px solid black;
0063     padding: 3px;
0064 }
0065 blockquote {
0066     margin: 0;
0067 }
0068 blockquote table {
0069     width: 100%;
0070     border-width: 0;
0071     background-color:" + Kirigami.Theme.alternateBackgroundColor + ";
0072 }
0073 blockquote td {
0074     width: 100%;
0075     padding: " + Kirigami.Units.largeSpacing + ";
0076 }
0077 pre {
0078     white-space: pre-wrap
0079 }
0080 a{
0081     color: " + Kirigami.Theme.linkColor + ";
0082     text-decoration: none;
0083 }
0084 " + (!spoilerRevealed ? "
0085 [data-mx-spoiler] a {
0086     color: transparent;
0087     background: " + Kirigami.Theme.textColor + ";
0088 }
0089 [data-mx-spoiler] {
0090     color: transparent;
0091     background: " + Kirigami.Theme.textColor + ";
0092 }
0093 " : "") + "
0094 </style>" + textMessage
0095
0096     color: Kirigami.Theme.textColor
0097     selectedTextColor: Kirigami.Theme.highlightedTextColor
0098     selectionColor: Kirigami.Theme.highlightColor
0099     font {
0100         pointSize: !root.isReply && root.isEmoji ? Kirigami.Theme.defaultFont.pointSize * 4 : Kirigami.Theme.defaultFont.pointSize
0101         family: root.isEmoji ? 'emoji' : Kirigami.Theme.defaultFont.family
0102     }
0103     selectByMouse: !Kirigami.Settings.isMobile
0104     readOnly: true
0105     wrapMode: Text.Wrap
0106     textFormat: Text.RichText
0107
0108     onLinkActivated: link => {
0109         spoilerRevealed = true;
0110         RoomManager.resolveResource(link, "join");
0111     }
0112     onHoveredLinkChanged: if (hoveredLink.length > 0 && hoveredLink !== "1") {
0113         applicationWindow().hoverLinkIndicator.text = hoveredLink;
0114     } else {
0115         applicationWindow().hoverLinkIndicator.text = "";
0116     }
0117
0118     HoverHandler {
0119         cursorShape: (parent.hoveredLink || !spoilerRevealed) ? Qt.PointingHandCursor : Qt.IBeamCursor
0120     }
0121
0122     TapHandler {
0123         enabled: !parent.hoveredLink && !spoilerRevealed
0124         onTapped: spoilerRevealed = true
0125     }
0126 }