1540 lines
64 KiB
QML
1540 lines
64 KiB
QML
import QtQuick 2.13
|
|
import QtQuick.Controls 2.13
|
|
import QtQuick.Layouts 1.13
|
|
import QtQuick.Dialogs 1.3
|
|
|
|
import utils 1.0
|
|
|
|
import shared 1.0
|
|
import shared.panels 1.0
|
|
import shared.popups 1.0
|
|
import shared.stores 1.0
|
|
|
|
//TODO remove this dependency
|
|
import AppLayouts.Chat.panels 1.0
|
|
|
|
import StatusQ 0.1
|
|
import StatusQ.Core 0.1
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Core.Utils 0.1 as StatusQUtils
|
|
import StatusQ.Components 0.1
|
|
import StatusQ.Controls 0.1 as StatusQ
|
|
|
|
Rectangle {
|
|
id: control
|
|
objectName: "statusChatInput"
|
|
|
|
signal sendTransactionCommandButtonClicked()
|
|
signal receiveTransactionCommandButtonClicked()
|
|
signal stickerSelected(string hashId, string packId, string url)
|
|
signal sendMessage(var event)
|
|
signal keyUpPress()
|
|
|
|
property var usersStore
|
|
property var store
|
|
|
|
property var emojiPopup: null
|
|
property var stickersPopup: null
|
|
// Use this to only enable the Connections only when this Input opens the Emoji popup
|
|
property bool closeGifPopupAfterSelection: true
|
|
|
|
property bool emojiEvent: false
|
|
property bool isColonPressed: false
|
|
property bool isReply: false
|
|
readonly property string replyMessageId: replyArea.messageId
|
|
|
|
property bool isImage: false
|
|
property bool isEdit: false
|
|
|
|
property int messageLimit: 2000
|
|
property int messageLimitVisible: 200
|
|
|
|
property int chatType
|
|
|
|
property string chatInputPlaceholder: qsTr("Message")
|
|
|
|
property alias textInput: messageInputField
|
|
|
|
property var fileUrlsAndSources: []
|
|
|
|
property var imageErrorMessageLocation: StatusChatInput.ImageErrorMessageLocation.Top // TODO: Remove this proeprty?
|
|
|
|
property alias suggestions: suggestionsBox
|
|
|
|
enum ImageErrorMessageLocation {
|
|
Top,
|
|
Bottom
|
|
}
|
|
|
|
function parseMessage(message) {
|
|
let mentionsMap = new Map()
|
|
let index = 0
|
|
while (true) {
|
|
index = message.indexOf("<a href=", index)
|
|
if (index < 0) {
|
|
break
|
|
}
|
|
const startIndex = index
|
|
const endIndex = message.indexOf("</a>", index) + 4
|
|
if (endIndex < 0) {
|
|
index += 8 // "<a href="
|
|
continue
|
|
}
|
|
const addrIndex = message.indexOf("0x", index + 8)
|
|
if (addrIndex < 0) {
|
|
index += 8 // "<a href="
|
|
continue
|
|
}
|
|
const addrEndIndex = message.indexOf("\"", addrIndex)
|
|
if (addrEndIndex < 0) {
|
|
index += 8 // "<a href="
|
|
continue
|
|
}
|
|
const mentionLink = message.substring(startIndex, endIndex)
|
|
const linkTag = message.substring(index, endIndex)
|
|
const linkText = linkTag.replace(/(<([^>]+)>)/ig,"").trim()
|
|
const atSymbol = linkText.startsWith("@") ? '' : '@'
|
|
const mentionTag = Constants.mentionSpanTag + atSymbol + linkText + '</span> '
|
|
mentionsMap.set(mentionLink, mentionTag)
|
|
index += linkTag.length
|
|
}
|
|
|
|
let text = message;
|
|
|
|
for (let [key, value] of mentionsMap)
|
|
text = text.replace(new RegExp(key, 'g'), value)
|
|
|
|
textInput.text = text
|
|
textInput.cursorPosition = textInput.length
|
|
}
|
|
|
|
implicitWidth: layout.implicitWidth + layout.anchors.leftMargin + layout.anchors.rightMargin
|
|
implicitHeight: layout.implicitHeight + layout.anchors.topMargin + layout.anchors.bottomMargin
|
|
|
|
color: Style.current.transparent
|
|
|
|
QtObject {
|
|
id: d
|
|
readonly property string emojiReplacementSymbols: ":='xX><0O;*dB8-D#%\\"
|
|
|
|
//mentions helper properties
|
|
property string copiedTextPlain: ""
|
|
property string copiedTextFormatted: ""
|
|
property var copiedMentionsPos: []
|
|
property int copyTextStart: 0
|
|
|
|
property int leftOfMentionIndex: -1
|
|
property int rightOfMentionIndex: -1
|
|
readonly property int nbEmojisInClipboard: StatusQUtils.Emoji.nbEmojis(QClipboardProxy.html)
|
|
|
|
property bool emojiPopupOpened: false
|
|
property bool stickersPopupOpened: false
|
|
|
|
// common popups are emoji, jif and stickers
|
|
// Put controlWidth as argument with default value for binding
|
|
function getCommonPopupRelativePosition(popup, popupParent, controlWidth = control.width) {
|
|
const popupWidth = emojiPopup ? emojiPopup.width : 0
|
|
const popupHeight = emojiPopup ? emojiPopup.height : 0
|
|
const controlX = controlWidth - popupWidth - Style.current.halfPadding
|
|
const controlY = -popupHeight
|
|
return popupParent.mapFromItem(control, controlX, controlY)
|
|
}
|
|
|
|
readonly property point emojiPopupPosition: getCommonPopupRelativePosition(emojiPopup, emojiBtn)
|
|
readonly property point stickersPopupPosition: getCommonPopupRelativePosition(stickersPopup, stickersBtn)
|
|
|
|
readonly property StateGroup emojiPopupTakeover: StateGroup {
|
|
states: State {
|
|
when: d.emojiPopupOpened
|
|
|
|
PropertyChanges {
|
|
target: emojiPopup
|
|
|
|
parent: emojiBtn
|
|
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
|
|
x: d.emojiPopupPosition.x
|
|
y: d.emojiPopupPosition.y
|
|
}
|
|
}
|
|
}
|
|
readonly property StateGroup stickersPopupTakeover: StateGroup {
|
|
states: State {
|
|
when: d.stickersPopupOpened
|
|
|
|
PropertyChanges {
|
|
target: stickersPopup
|
|
|
|
parent: stickersBtn
|
|
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
|
|
x: d.stickersPopupPosition.x
|
|
y: d.stickersPopupPosition.y
|
|
}
|
|
}
|
|
}
|
|
|
|
property bool chatCommandsPopupOpen: false
|
|
property Menu textFormatMenu: null
|
|
|
|
function copyMentions(start, end) {
|
|
copiedMentionsPos = []
|
|
for (let k = 0; k < mentionsPos.length; k++) {
|
|
if (mentionsPos[k].leftIndex >= start && mentionsPos[k].rightIndex <= end) {
|
|
const mention = {
|
|
name: mentionsPos[k].name,
|
|
pubKey: mentionsPos[k].pubKey,
|
|
leftIndex: mentionsPos[k].leftIndex - start,
|
|
rightIndex: mentionsPos[k].rightIndex - start
|
|
}
|
|
copiedMentionsPos.push(mention)
|
|
}
|
|
}
|
|
}
|
|
|
|
function sortMentions() {
|
|
if (mentionsPos.length < 2) {
|
|
return
|
|
}
|
|
mentionsPos = mentionsPos.sort(function(a, b){
|
|
return a.leftIndex - b.leftIndex
|
|
})
|
|
}
|
|
|
|
function updateMentionsPositions() {
|
|
if (mentionsPos.length == 0) {
|
|
return
|
|
}
|
|
|
|
const unformattedText = messageInputField.getText(0, messageInputField.length)
|
|
if (!unformattedText.includes("@")) {
|
|
return
|
|
}
|
|
|
|
const keyEvent = messageInputField.keyEvent
|
|
if ((keyEvent.key === Qt.Key_Right) || (keyEvent.key === Qt.Key_Left)
|
|
|| (keyEvent.key === Qt.Key_Up) || (keyEvent.key === Qt.Key_Down)) {
|
|
return
|
|
}
|
|
|
|
let lastRightIndex = -1
|
|
for (var k = 0; k < mentionsPos.length; k++) {
|
|
const aliasIndex = unformattedText.indexOf(mentionsPos[k].name, lastRightIndex)
|
|
if (aliasIndex === -1) {
|
|
continue
|
|
}
|
|
lastRightIndex = aliasIndex + mentionsPos[k].name.length
|
|
|
|
if (aliasIndex - 1 !== mentionsPos[k].leftIndex) {
|
|
mentionsPos[k].leftIndex = aliasIndex - 1
|
|
mentionsPos[k].rightIndex = aliasIndex + mentionsPos[k].name.length
|
|
}
|
|
}
|
|
|
|
sortMentions()
|
|
}
|
|
|
|
function cleanMentionsPos() {
|
|
if(mentionsPos.length == 0) return
|
|
|
|
const unformattedText = messageInputField.getText(0, messageInputField.length)
|
|
mentionsPos = mentionsPos.filter(mention => unformattedText.charAt(mention.leftIndex) === "@")
|
|
}
|
|
|
|
function insertMention(aliasName, publicKey, lastAtPosition, lastCursorPosition) {
|
|
let startInd = aliasName.indexOf("(");
|
|
if (startInd > 0){
|
|
aliasName = aliasName.substring(0, startInd-1)
|
|
}
|
|
|
|
const hasEmoji = StatusQUtils.Emoji.hasEmoji(messageInputField.text)
|
|
const spanPlusAlias = `${Constants.mentionSpanTag}@${aliasName}</a></span> `;
|
|
|
|
let rightIndex = hasEmoji ? lastCursorPosition + 2 : lastCursorPosition
|
|
messageInputField.remove(lastAtPosition, rightIndex)
|
|
messageInputField.insert(lastAtPosition, spanPlusAlias)
|
|
messageInputField.cursorPosition = lastAtPosition + aliasName.length + 2;
|
|
if (messageInputField.cursorPosition === 0) {
|
|
// It reset to 0 for some reason, go back to the end
|
|
messageInputField.cursorPosition = messageInputField.length
|
|
}
|
|
|
|
mentionsPos = mentionsPos.filter(mention => mention.leftIndex !== lastAtPosition)
|
|
mentionsPos.push({name: aliasName, pubKey: publicKey, leftIndex: lastAtPosition, rightIndex: (lastAtPosition+aliasName.length + 1)});
|
|
d.sortMentions()
|
|
}
|
|
|
|
function removeMention(mention) {
|
|
const index = mentionsPos.indexOf(mention)
|
|
if(index >= 0) {
|
|
mentionsPos.splice(index, 1)
|
|
}
|
|
|
|
messageInputField.remove(mention.leftIndex, mention.rightIndex)
|
|
}
|
|
|
|
function getMentionAtPosition(position: int) {
|
|
return mentionsPos.find(mention => mention.leftIndex < position && mention.rightIndex > position)
|
|
}
|
|
}
|
|
|
|
function insertInTextInput(start, text) {
|
|
// Repace new lines with entities because `insert` gets rid of them
|
|
messageInputField.insert(start, text.replace(/\n/g, "<br/>"));
|
|
}
|
|
|
|
Connections {
|
|
enabled: d.emojiPopupOpened
|
|
target: emojiPopup
|
|
|
|
function onEmojiSelected(text: string, atCursor: bool) {
|
|
insertInTextInput(atCursor ? messageInputField.cursorPosition : messageInputField.length, text)
|
|
emojiBtn.highlighted = false
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
function onClosed() {
|
|
d.emojiPopupOpened = false
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
enabled: d.stickersPopupOpened
|
|
target: control.stickersPopup
|
|
|
|
function onStickerSelected(hashId: string, packId: string, url: string ) {
|
|
control.stickerSelected(hashId, packId, url)
|
|
control.hideExtendedArea();
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
function onClosed() {
|
|
d.stickersPopupOpened = false
|
|
}
|
|
}
|
|
|
|
property var mentionsPos: []
|
|
|
|
function isUploadFilePressed(event) {
|
|
return (event.key === Qt.Key_U) && (event.modifiers & Qt.ControlModifier) && imageBtn.visible && !imageBtn.highlighted
|
|
}
|
|
|
|
function checkTextInsert() {
|
|
if (emojiSuggestions.visible) {
|
|
replaceWithEmoji(extrapolateCursorPosition(), emojiSuggestions.shortname, emojiSuggestions.unicode);
|
|
return true
|
|
}
|
|
if (suggestionsBox.visible) {
|
|
suggestionsBox.selectCurrentItem();
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
|
|
function onKeyPress(event) {
|
|
if (event.modifiers === Qt.NoModifier && (event.key === Qt.Key_Enter || event.key === Qt.Key_Return)) {
|
|
if (checkTextInsert()) {
|
|
event.accepted = true;
|
|
return
|
|
}
|
|
|
|
if (messageInputField.length <= messageLimit) {
|
|
checkForInlineEmojis(true);
|
|
control.sendMessage(event)
|
|
control.hideExtendedArea();
|
|
event.accepted = true
|
|
return;
|
|
}
|
|
if (event) {
|
|
event.accepted = true
|
|
console.error("Attempting to send a message exceeding length limit")
|
|
}
|
|
} else if (event.key === Qt.Key_Escape && control.isReply) {
|
|
control.isReply = false
|
|
event.accepted = true
|
|
}
|
|
|
|
const symbolPressed = event.text.length > 0 &&
|
|
event.key !== Qt.Key_Backspace &&
|
|
event.key !== Qt.Key_Delete &&
|
|
event.key !== Qt.Key_Escape
|
|
if ((mentionsPos.length > 0) && symbolPressed && (messageInputField.selectedText.length === 0)) {
|
|
for (var i = 0; i < mentionsPos.length; i++) {
|
|
if (messageInputField.cursorPosition === mentionsPos[i].leftIndex) {
|
|
d.leftOfMentionIndex = i
|
|
event.accepted = true
|
|
return
|
|
} else if (messageInputField.cursorPosition === mentionsPos[i].rightIndex) {
|
|
d.rightOfMentionIndex = i
|
|
event.accepted = true
|
|
return
|
|
}
|
|
}
|
|
}
|
|
|
|
if (event.key === Qt.Key_Tab) {
|
|
if (checkTextInsert()) {
|
|
event.accepted = true;
|
|
return
|
|
}
|
|
}
|
|
|
|
const message = control.extrapolateCursorPosition();
|
|
|
|
// handle new line in blockquote
|
|
if ((event.key === Qt.Key_Enter || event.key === Qt.Key_Return) && (event.modifiers & Qt.ShiftModifier) && message.data.startsWith(">")) {
|
|
if(message.data.startsWith(">") && !message.data.endsWith("\n\n")) {
|
|
let newMessage1 = ""
|
|
if (message.data.endsWith("\n> ")) {
|
|
newMessage1 = message.data.substr(0, message.data.lastIndexOf("> ")) + "\n\n"
|
|
} else {
|
|
newMessage1 = message.data + "\n> ";
|
|
}
|
|
messageInputField.remove(0, messageInputField.cursorPosition);
|
|
insertInTextInput(0, StatusQUtils.Emoji.parse(newMessage1));
|
|
}
|
|
event.accepted = true
|
|
}
|
|
|
|
if (event.key === Qt.Key_Delete || event.key === Qt.Key_Backspace) {
|
|
if(mentionsPos.length > 0) {
|
|
let anticipatedCursorPosition = messageInputField.cursorPosition
|
|
anticipatedCursorPosition += event.key === Qt.Key_Backspace ?
|
|
-1 : 1
|
|
|
|
const mention = d.getMentionAtPosition(anticipatedCursorPosition)
|
|
if(mention) {
|
|
d.removeMention(mention)
|
|
event.accepted = true
|
|
}
|
|
}
|
|
|
|
// handle backspace when entering an existing blockquote
|
|
if(message.data.startsWith(">") && message.data.endsWith("\n\n")) {
|
|
const newMessage = message.data.substr(0, message.data.lastIndexOf("\n")) + "> ";
|
|
messageInputField.remove(0, messageInputField.cursorPosition);
|
|
insertInTextInput(0, StatusQUtils.Emoji.parse(newMessage));
|
|
event.accepted = true
|
|
}
|
|
}
|
|
|
|
if (event.matches(StandardKey.Copy) || event.matches(StandardKey.Cut)) {
|
|
if (messageInputField.selectedText !== "") {
|
|
d.copiedTextPlain = messageInputField.getText(
|
|
messageInputField.selectionStart, messageInputField.selectionEnd)
|
|
d.copiedTextFormatted = messageInputField.getFormattedText(
|
|
messageInputField.selectionStart, messageInputField.selectionEnd)
|
|
d.copyMentions(messageInputField.selectionStart, messageInputField.selectionEnd)
|
|
}
|
|
}
|
|
|
|
if (event.matches(StandardKey.Paste)) {
|
|
if (QClipboardProxy.hasImage) {
|
|
const clipboardImage = QClipboardProxy.imageBase64
|
|
validateImagesAndShowImageArea([clipboardImage])
|
|
event.accepted = true
|
|
} else if (QClipboardProxy.hasText) {
|
|
messageInputField.remove(messageInputField.selectionStart, messageInputField.selectionEnd)
|
|
|
|
// cursor position must be stored in a helper property because setting readonly to true causes change
|
|
// of the cursor position to the end of the input
|
|
d.copyTextStart = messageInputField.cursorPosition
|
|
messageInputField.readOnly = true
|
|
|
|
const clipboardText = Utils.plainText(QClipboardProxy.text)
|
|
const copiedText = Utils.plainText(d.copiedTextPlain)
|
|
if (copiedText === clipboardText) {
|
|
if (d.copiedTextPlain.includes("@")) {
|
|
d.copiedTextFormatted = d.copiedTextFormatted.replace(/span style="/g, "span style=\" text-decoration:none;")
|
|
|
|
let lastFoundIndex = -1
|
|
for (let j = 0; j < d.copiedMentionsPos.length; j++) {
|
|
const name = d.copiedMentionsPos[j].name
|
|
const indexOfName = d.copiedTextPlain.indexOf(name, lastFoundIndex)
|
|
lastFoundIndex += name.length
|
|
|
|
if (indexOfName === d.copiedMentionsPos[j].leftIndex + 1) {
|
|
const mention = {
|
|
name: name,
|
|
pubKey: d.copiedMentionsPos[j].pubKey,
|
|
leftIndex: (d.copiedMentionsPos[j].leftIndex + d.copyTextStart - 1),
|
|
rightIndex: (d.copiedMentionsPos[j].leftIndex + d.copyTextStart + name.length)
|
|
}
|
|
mentionsPos.push(mention)
|
|
d.sortMentions()
|
|
}
|
|
}
|
|
}
|
|
insertInTextInput(d.copyTextStart, d.copiedTextFormatted)
|
|
} else {
|
|
d.copiedTextPlain = ""
|
|
d.copiedTextFormatted = ""
|
|
d.copiedMentionsPos = []
|
|
messageInputField.insert(d.copyTextStart, ((d.nbEmojisInClipboard === 0) ?
|
|
("<div style='white-space: pre-wrap'>" + Utils.escapeHtml(QClipboardProxy.text) + "</div>")
|
|
: StatusQUtils.Emoji.deparse(QClipboardProxy.html)));
|
|
}
|
|
}
|
|
}
|
|
|
|
// ⌘⇧U
|
|
if (isUploadFilePressed(event)) {
|
|
imageBtn.clicked(null)
|
|
event.accepted = true
|
|
}
|
|
|
|
if (event.key === Qt.Key_Down && emojiSuggestions.visible) {
|
|
event.accepted = true
|
|
return emojiSuggestions.listView.incrementCurrentIndex()
|
|
}
|
|
if (event.key === Qt.Key_Up && emojiSuggestions.visible) {
|
|
event.accepted = true
|
|
return emojiSuggestions.listView.decrementCurrentIndex()
|
|
}
|
|
|
|
isColonPressed = event.key === Qt.Key_Colon;
|
|
}
|
|
|
|
function getLineStartPosition(selectionStart) {
|
|
const text = getPlainText()
|
|
const lastNewLinePos = text.lastIndexOf("\n\n", messageInputField.selectionStart)
|
|
return lastNewLinePos === -1 ? 0 : lastNewLinePos + 2
|
|
}
|
|
|
|
function prefixSelectedLine(prefix) {
|
|
const selectedLinePosition = getLineStartPosition(messageInputField.selectionStart)
|
|
insertInTextInput(selectedLinePosition, prefix)
|
|
}
|
|
|
|
function unprefixSelectedLine(prefix) {
|
|
if( isSelectedLinePrefixedBy(messageInputField.selectionStart, prefix) ) {
|
|
const selectedLinePosition = getLineStartPosition(messageInputField.selectionStart)
|
|
messageInputField.remove(selectedLinePosition, selectedLinePosition + prefix.length)
|
|
}
|
|
}
|
|
|
|
function isSelectedLinePrefixedBy(selectionStart, prefix) {
|
|
const selectedLinePosition = getLineStartPosition(selectionStart)
|
|
const text = getPlainText()
|
|
const selectedLine = text.substring(selectedLinePosition)
|
|
return selectedLine.startsWith(prefix)
|
|
}
|
|
|
|
function wrapSelection(wrapWith) {
|
|
if (messageInputField.selectionStart - messageInputField.selectionEnd === 0) return
|
|
|
|
// calulate the new selection start and end positions
|
|
var newSelectionStart = messageInputField.selectionStart + wrapWith.length
|
|
var newSelectionEnd = messageInputField.selectionEnd - messageInputField.selectionStart + newSelectionStart
|
|
|
|
insertInTextInput(messageInputField.selectionStart, wrapWith);
|
|
insertInTextInput(messageInputField.selectionEnd, wrapWith);
|
|
|
|
messageInputField.select(newSelectionStart, newSelectionEnd)
|
|
}
|
|
|
|
function unwrapSelection(unwrapWith, selectedTextWithFormationChars) {
|
|
if (messageInputField.selectionStart - messageInputField.selectionEnd === 0) return
|
|
|
|
// calulate the new selection start and end positions
|
|
var newSelectionStart = messageInputField.selectionStart - unwrapWith.length
|
|
var newSelectionEnd = messageInputField.selectionEnd-messageInputField.selectionStart + newSelectionStart
|
|
|
|
selectedTextWithFormationChars = selectedTextWithFormationChars.trim()
|
|
// Check if the selectedTextWithFormationChars has formation chars and if so, calculate how many so we can adapt the start and end pos
|
|
const selectTextDiff = (selectedTextWithFormationChars.length - messageInputField.selectedText.length) / 2
|
|
|
|
// Remove the deselected option from the before and after the selected text
|
|
const prefixChars = messageInputField.getText((messageInputField.selectionStart - selectTextDiff), messageInputField.selectionStart)
|
|
const updatedPrefixChars = prefixChars.replace(unwrapWith, '')
|
|
const postfixChars = messageInputField.getText(messageInputField.selectionEnd, (messageInputField.selectionEnd + selectTextDiff))
|
|
const updatedPostfixChars = postfixChars.replace(unwrapWith, '')
|
|
|
|
// Create updated selected string with pre and post formatting characters
|
|
const updatedSelectedStringWithFormatChars = updatedPrefixChars + messageInputField.selectedText + updatedPostfixChars
|
|
|
|
messageInputField.remove(messageInputField.selectionStart - selectTextDiff, messageInputField.selectionEnd + selectTextDiff)
|
|
|
|
insertInTextInput(messageInputField.selectionStart, updatedSelectedStringWithFormatChars)
|
|
|
|
messageInputField.select(newSelectionStart, newSelectionEnd)
|
|
}
|
|
|
|
function getPlainText() {
|
|
const textWithoutMention = messageInputField.text.replace(/<span style="[ :#0-9a-z;\-\.,\(\)]+">(@([a-z\.]+(\ ?[a-z]+\ ?[a-z]+)?))<\/span>/ig, "\[\[mention\]\]$1\[\[mention\]\]")
|
|
|
|
const deparsedEmoji = StatusQUtils.Emoji.deparse(textWithoutMention);
|
|
|
|
return Utils.plainText(deparsedEmoji)
|
|
}
|
|
|
|
function removeMentions(currentText) {
|
|
return currentText.replace(/\[\[mention\]\]/g, '')
|
|
}
|
|
|
|
function parseMarkdown(markdownText) {
|
|
const htmlText = markdownText
|
|
.replace(/\~\~([^*]+)\~\~/gim, '~~<span style="text-decoration: line-through">$1</span>~~')
|
|
.replace(/\*\*([^*]+)\*\*/gim, ':asterisk::asterisk:<b>$1</b>:asterisk::asterisk:')
|
|
.replace(/\`([^*]+)\`/gim, '`<code>$1</code>`')
|
|
.replace(/\*([^*]+)\*/gim, ':asterisk:<i>$1</i>:asterisk:')
|
|
return htmlText.replace(/\:asterisk\:/gim, "*")
|
|
}
|
|
|
|
function getFormattedText(start, end) {
|
|
start = start || 0
|
|
end = end || messageInputField.length
|
|
|
|
const oldFormattedText = messageInputField.getFormattedText(start, end)
|
|
|
|
const found = oldFormattedText.match(/<!--StartFragment-->([\w\W\s]*)<!--EndFragment-->/m);
|
|
|
|
return found[1]
|
|
}
|
|
|
|
function getTextWithPublicKeys() {
|
|
let result = messageInputField.text
|
|
|
|
if (mentionsPos.length > 0) {
|
|
for (var k = 0; k < mentionsPos.length; k++) {
|
|
let leftIndex = result.indexOf(mentionsPos[k].name)
|
|
let rightIndex = leftIndex + mentionsPos[k].name.length
|
|
result = result.substring(0, leftIndex)
|
|
+ mentionsPos[k].pubKey
|
|
+ result.substring(rightIndex, result.length)
|
|
}
|
|
}
|
|
|
|
return result
|
|
}
|
|
|
|
function setFormatInInput(formationFunction, startTag, endTag, formationChar, numFormationChars) {
|
|
const inputText = getFormattedText()
|
|
const plainInputText = messageInputField.getText(0, messageInputField.length)
|
|
|
|
let lengthDifference
|
|
|
|
try {
|
|
const result = formationFunction(inputText)
|
|
|
|
if (!result) {
|
|
return
|
|
}
|
|
const parsed = JSON.parse(result)
|
|
|
|
let substring
|
|
let nbEmojis
|
|
parsed.forEach(function (match) {
|
|
match[1] += 1
|
|
const truncatedInputText = inputText.substring(0, match[1] + numFormationChars)
|
|
const truncatedPlainText = plainInputText.substring(0, messageInputField.cursorPosition)
|
|
|
|
const lengthDifference = truncatedInputText.length - truncatedPlainText.length
|
|
|
|
nbEmojis = StatusQUtils.Emoji.nbEmojis(truncatedInputText)
|
|
|
|
|
|
match[1] += (nbEmojis * -2)
|
|
match[0] += (nbEmojis * -2)
|
|
substring = inputText.substring(match[0], match[1])
|
|
|
|
if (plainInputText.charAt(match[0] - 1) !== formationChar) {
|
|
match[0] -= lengthDifference
|
|
match[1] -= lengthDifference
|
|
} else {
|
|
match[1] -= lengthDifference
|
|
}
|
|
|
|
messageInputField.remove(match[0], match[1])
|
|
insertInTextInput(match[0], `${startTag}${substring}${endTag}`)
|
|
})
|
|
} catch (e) {
|
|
//
|
|
}
|
|
}
|
|
|
|
function onRelease(event) {
|
|
if ((event.modifiers & Qt.ControlModifier) || (event.modifiers & Qt.MetaModifier)) // these are likely shortcuts with no meaningful text
|
|
return
|
|
|
|
if (event.key === Qt.Key_Backspace && (!!d.textFormatMenu && d.textFormatMenu.opened)) {
|
|
d.textFormatMenu.close()
|
|
}
|
|
// the text doesn't get registered to the textarea fast enough
|
|
// we can only get it in the `released` event
|
|
|
|
let eventText = event.text
|
|
if(event.key === Qt.Key_Space) {
|
|
eventText = " "
|
|
}
|
|
|
|
if(d.rightOfMentionIndex !== -1) {
|
|
//make sure to add an extra space between mention and text
|
|
let mentionSeparator = event.key === Qt.Key_Space ? "" : " "
|
|
messageInputField.insert(mentionsPos[d.rightOfMentionIndex].rightIndex, mentionSeparator + eventText)
|
|
|
|
d.rightOfMentionIndex = -1
|
|
}
|
|
|
|
if(d.leftOfMentionIndex !== -1) {
|
|
messageInputField.insert(mentionsPos[d.leftOfMentionIndex].leftIndex, eventText)
|
|
|
|
d.leftOfMentionIndex = -1
|
|
}
|
|
|
|
if (event.key !== Qt.Key_Escape) {
|
|
emojiEvent = emojiHandler(event)
|
|
if (!emojiEvent) {
|
|
emojiSuggestions.close()
|
|
}
|
|
}
|
|
|
|
if (messageInputField.readOnly) {
|
|
messageInputField.readOnly = false;
|
|
messageInputField.cursorPosition = (d.copyTextStart + QClipboardProxy.text.length + d.nbEmojisInClipboard);
|
|
}
|
|
|
|
|
|
if (suggestionsBox.visible) {
|
|
let aliasName = suggestionsBox.formattedPlainTextFilter;
|
|
let lastCursorPosition = suggestionsBox.suggestionFilter.cursorPosition;
|
|
let lastAtPosition = suggestionsBox.suggestionFilter.lastAtPosition;
|
|
let suggestionItem = suggestionsBox.suggestionsModel.get(suggestionsBox.listView.currentIndex);
|
|
if (aliasName !== "" && aliasName.toLowerCase() === suggestionItem.name.toLowerCase()
|
|
&& (event.key !== Qt.Key_Backspace) && (event.key !== Qt.Key_Delete)) {
|
|
|
|
d.insertMention(aliasName, suggestionItem.publicKey, lastAtPosition, lastCursorPosition);
|
|
} else if (event.key === Qt.Key_Space) {
|
|
var plainTextToReplace = messageInputField.getText(lastAtPosition, lastCursorPosition);
|
|
messageInputField.remove(lastAtPosition, lastCursorPosition);
|
|
messageInputField.insert(lastAtPosition, plainTextToReplace);
|
|
suggestionsBox.hide();
|
|
}
|
|
}
|
|
}
|
|
|
|
// since emoji length is not 1 we need to match that position that TextArea returns
|
|
// to the actual position in the string.
|
|
function extrapolateCursorPosition() {
|
|
// we need only the message part to be html
|
|
const text = getPlainText()
|
|
const completelyPlainText = removeMentions(text)
|
|
const plainText = StatusQUtils.Emoji.parse(text);
|
|
|
|
var bracketEvent = false;
|
|
var almostMention = false;
|
|
var mentionEvent = false;
|
|
var length = 0;
|
|
|
|
// This loop calculates the cursor position inside the plain text which contains the image tags (<img>) and the mention tags ([[mention]])
|
|
const cursorPos = messageInputField.cursorPosition
|
|
let character = ""
|
|
for (var i = 0; i < plainText.length; i++) {
|
|
if (length >= cursorPos) break;
|
|
|
|
character = plainText.charAt(i)
|
|
if (!bracketEvent && character !== '<' && !mentionEvent && character !== '[') {
|
|
length++;
|
|
} else if (!bracketEvent && character === '<') {
|
|
bracketEvent = true;
|
|
} else if (bracketEvent && character === '>') {
|
|
bracketEvent = false;
|
|
length++;
|
|
} else if (!mentionEvent && almostMention && plainText.charAt(i) === '[') {
|
|
almostMention = false
|
|
mentionEvent = true
|
|
} else if (!mentionEvent && !almostMention && plainText.charAt(i) === '[') {
|
|
almostMention = true
|
|
} else if (!mentionEvent && almostMention && plainText.charAt(i) !== '[') {
|
|
almostMention = false
|
|
} else if (mentionEvent && !almostMention && plainText.charAt(i) === ']') {
|
|
almostMention = true
|
|
} else if (mentionEvent && almostMention && plainText.charAt(i) === ']') {
|
|
almostMention = false
|
|
mentionEvent = false
|
|
}
|
|
}
|
|
|
|
let textBeforeCursor = StatusQUtils.Emoji.deparse(plainText.substr(0, i));
|
|
|
|
return {
|
|
cursor: countEmojiLengths(plainText.substr(0, i)) + messageInputField.cursorPosition + text.length - completelyPlainText.length,
|
|
data: textBeforeCursor,
|
|
};
|
|
}
|
|
|
|
function emojiHandler(event) {
|
|
let message = extrapolateCursorPosition();
|
|
pollEmojiEvent(message);
|
|
|
|
// state machine to handle different forms of the emoji event state
|
|
if (!emojiEvent && isColonPressed) {
|
|
return (message.data.length <= 1 || Utils.isSpace(message.data.charAt(message.cursor - 1))) ? true : false;
|
|
} else if (emojiEvent && isColonPressed) {
|
|
const index = message.data.lastIndexOf(':', message.cursor - 2);
|
|
if (index >= 0 && message.cursor > 0) {
|
|
const shortname = message.data.substr(index, message.cursor);
|
|
const codePoint = StatusQUtils.Emoji.getEmojiUnicode(shortname);
|
|
if (codePoint !== undefined) {
|
|
replaceWithEmoji(message, shortname, codePoint);
|
|
}
|
|
return false;
|
|
}
|
|
return true;
|
|
} else if (emojiEvent && isKeyValid(event.key) && !isColonPressed) {
|
|
// popup
|
|
const index2 = message.data.lastIndexOf(':', message.cursor - 1);
|
|
if (index2 >= 0 && message.cursor > 0) {
|
|
const emojiPart = message.data.substr(index2, message.cursor);
|
|
if (emojiPart.length > 2) {
|
|
const emojis = StatusQUtils.Emoji.emojiJSON.emoji_json.filter(function (emoji) {
|
|
return emoji.name.includes(emojiPart) ||
|
|
emoji.shortname.includes(emojiPart) ||
|
|
emoji.aliases.some(a => a.includes(emojiPart))
|
|
})
|
|
|
|
emojiSuggestions.openPopup(emojis, emojiPart)
|
|
}
|
|
return true;
|
|
}
|
|
} else if (emojiEvent && !isKeyValid(event.key) && !isColonPressed) {
|
|
return false;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function countEmojiLengths(value) {
|
|
const match = StatusQUtils.Emoji.getEmojis(value);
|
|
var length = 0;
|
|
|
|
if (match && match.length > 0) {
|
|
for (var i = 0; i < match.length; i++) {
|
|
length += StatusQUtils.Emoji.deparse(match[i]).length;
|
|
}
|
|
length = length - match.length;
|
|
}
|
|
return length;
|
|
}
|
|
|
|
function checkForInlineEmojis(force = false) {
|
|
// trigger inline emoji replacements after space, or always (force==true) when sending the message
|
|
if (force || messageInputField.getText(messageInputField.cursorPosition, messageInputField.cursorPosition - 1) === " ") {
|
|
// figure out last word (between spaces), max length of 5
|
|
var lastWord = ""
|
|
const cursorPos = messageInputField.cursorPosition - (force ? 1 : 2) // just before the last non-space character
|
|
for (let i = cursorPos; i > cursorPos - 6; i--) { // go back until we found a space or start of line
|
|
const lastChar = messageInputField.getText(i, i+1)
|
|
if (i < 0 || lastChar === " ") { // reached start of line or a space
|
|
break
|
|
} else {
|
|
lastWord = lastChar + lastWord // collect the last word
|
|
}
|
|
}
|
|
|
|
// check if the word contains any of the trigger chars (emojiReplacementSymbols)
|
|
if (!!lastWord && Array.prototype.some.call(d.emojiReplacementSymbols, (trigger) => lastWord.includes(trigger))) {
|
|
// search the ASCII aliases for a possible match
|
|
const emojiFound = StatusQUtils.Emoji.emojiJSON.emoji_json.find(emoji => emoji.aliases_ascii.includes(lastWord))
|
|
if (emojiFound) {
|
|
replaceWithEmoji("", lastWord, emojiFound.unicode, force ? 0 : 1 /*offset*/);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function replaceWithEmoji(message, shortname, codePoint, offset = 0) {
|
|
const encodedCodePoint = StatusQUtils.Emoji.getEmojiCodepoint(codePoint)
|
|
messageInputField.remove(messageInputField.cursorPosition - shortname.length - offset, messageInputField.cursorPosition);
|
|
insertInTextInput(messageInputField.cursorPosition, StatusQUtils.Emoji.parse(encodedCodePoint) + " ");
|
|
emojiSuggestions.close()
|
|
emojiEvent = false
|
|
}
|
|
|
|
// check if user has placed cursor near valid emoji colon token
|
|
function pollEmojiEvent(message) {
|
|
const index = message.data.lastIndexOf(':', message.cursor);
|
|
if (index >= 0) {
|
|
emojiEvent = validSubstr(message.data.substr(index, message.cursor - index));
|
|
}
|
|
}
|
|
|
|
function validSubstr(substr) {
|
|
for(var i = 0; i < substr.length; i++) {
|
|
var c = substr.charAt(i);
|
|
if (Utils.isSpace(c) || Utils.isPunct(c))
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function isKeyValid(key) {
|
|
if (key === Qt.Key_Space || key === Qt.Key_Tab ||
|
|
(key >= Qt.Key_Exclam && key <= Qt.Key_Slash) ||
|
|
(key >= Qt.Key_Semicolon && key <= Qt.Key_Question) ||
|
|
(key >= Qt.Key_BracketLeft && key <= Qt.Key_hyphen))
|
|
return false;
|
|
return true;
|
|
}
|
|
|
|
function resetImageArea() {
|
|
isImage = false;
|
|
control.fileUrlsAndSources = []
|
|
imageArea.imageSource = [];
|
|
for (let i=0; i<validators.children.length; i++) {
|
|
const validator = validators.children[i]
|
|
validator.images = []
|
|
}
|
|
}
|
|
|
|
function resetReplyArea() {
|
|
isReply = false
|
|
replyArea.messageId = ""
|
|
}
|
|
|
|
function hideExtendedArea() {
|
|
resetImageArea()
|
|
resetReplyArea()
|
|
}
|
|
|
|
function validateImages(imagePaths) {
|
|
if (!imagePaths || !imagePaths.length) {
|
|
return []
|
|
}
|
|
// needed because imageArea.imageSource is not a normal js array
|
|
const existing = (imageArea.imageSource || []).map(x => x.toString())
|
|
let validImages = Utils.deduplicate(existing.concat(imagePaths))
|
|
for (let i=0; i<validators.children.length; i++) {
|
|
const validator = validators.children[i]
|
|
validator.images = validImages
|
|
validImages = validImages.filter(validImage => validator.validImages.includes(validImage))
|
|
}
|
|
return validImages
|
|
}
|
|
|
|
function showImageArea(imagePathsOrData) {
|
|
isImage = imagePathsOrData.length > 0
|
|
imageArea.imageSource = imagePathsOrData
|
|
control.fileUrlsAndSources = imageArea.imageSource
|
|
}
|
|
|
|
// Use this to validate and show the images. The concatanation of previous selected images is done automatically
|
|
// Returns true if the images were valid and added
|
|
function validateImagesAndShowImageArea(imagePaths) {
|
|
const validImages = validateImages(imagePaths)
|
|
showImageArea(validImages)
|
|
return isImage
|
|
}
|
|
|
|
function showReplyArea(messageId, userName, message, contentType, image, album, albumCount, sticker) {
|
|
isReply = true
|
|
replyArea.userName = userName
|
|
replyArea.message = message
|
|
replyArea.contentType = contentType
|
|
replyArea.image = image
|
|
replyArea.stickerData = sticker
|
|
replyArea.messageId = messageId
|
|
replyArea.album = album
|
|
replyArea.albumCount = albumCount
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
|
|
function forceInputActiveFocus() {
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
|
|
Connections {
|
|
target: Global.dragArea
|
|
ignoreUnknownSignals: true
|
|
function onDroppedOnValidScreen(drop) {
|
|
let dropUrls = drop.urls
|
|
if (!drop.hasUrls) {
|
|
console.warn("Trying to drop, list of URLs is empty tho; formats:", drop.formats)
|
|
if (drop.formats.includes("text/x-moz-url")) { // Chrome uses a non-standard MIME type
|
|
dropUrls = drop.getDataAsString("text/x-moz-url")
|
|
}
|
|
}
|
|
|
|
if (validateImagesAndShowImageArea(dropUrls)) {
|
|
drop.acceptProposedAction()
|
|
}
|
|
}
|
|
}
|
|
|
|
// This is used by Squish tests to not have to access the file dialog
|
|
function selectImageString(filePath) {
|
|
validateImagesAndShowImageArea([filePath])
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
|
|
Component {
|
|
id: imageDialogComponent
|
|
|
|
FileDialog {
|
|
title: qsTr("Please choose an image")
|
|
folder: shortcuts.pictures
|
|
selectMultiple: true
|
|
nameFilters: [
|
|
qsTr("Image files (%1)").arg(Constants.acceptedDragNDropImageExtensions.map(img => "*" + img).join(" "))
|
|
]
|
|
onAccepted: {
|
|
imageBtn.highlighted = false
|
|
validateImagesAndShowImageArea(fileUrls)
|
|
messageInputField.forceActiveFocus()
|
|
}
|
|
onRejected: {
|
|
imageBtn.highlighted = false
|
|
}
|
|
}
|
|
}
|
|
|
|
StatusEmojiSuggestionPopup {
|
|
id: emojiSuggestions
|
|
messageInput: messageInput
|
|
onClicked: function (index) {
|
|
if (index === undefined) {
|
|
index = emojiSuggestions.listView.currentIndex
|
|
}
|
|
|
|
const unicode = emojiSuggestions.modelList[index].unicode_alternates || emojiSuggestions.modelList[index].unicode
|
|
replaceWithEmoji(extrapolateCursorPosition(), emojiSuggestions.shortname, unicode);
|
|
}
|
|
}
|
|
|
|
SuggestionBoxPanel {
|
|
id: suggestionsBox
|
|
objectName: "suggestionsBox"
|
|
model: control.usersStore ? control.usersStore.usersModel : []
|
|
x : messageInput.x
|
|
y: -height - Style.current.smallPadding
|
|
width: messageInput.width
|
|
filter: messageInputField.text
|
|
cursorPosition: messageInputField.cursorPosition
|
|
property: ["nickname", "ensName", "name"]
|
|
inputField: messageInputField
|
|
onItemSelected: function (item, lastAtPosition, lastCursorPosition) {
|
|
messageInputField.forceActiveFocus();
|
|
const name = item[suggestionsBox.property.find(p => !!item[p])].replace("@", "")
|
|
d.insertMention(name, item.publicKey, lastAtPosition, lastCursorPosition)
|
|
suggestionsBox.suggestionsModel.clear()
|
|
}
|
|
onVisibleChanged: {
|
|
if (!visible) {
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: chatCommandsPopupComponent
|
|
|
|
ChatCommandsPopup {
|
|
id: chatCommandsPopup
|
|
x: 8
|
|
y: -height
|
|
onSendTransactionCommandButtonClicked: {
|
|
control.sendTransactionCommandButtonClicked()
|
|
close()
|
|
}
|
|
onReceiveTransactionCommandButtonClicked: {
|
|
control.receiveTransactionCommandButtonClicked()
|
|
close()
|
|
}
|
|
onClosed: {
|
|
chatCommandsBtn.highlighted = false
|
|
destroy()
|
|
}
|
|
onOpened: {
|
|
chatCommandsBtn.highlighted = true
|
|
}
|
|
Component.onDestruction: {
|
|
if (d.chatCommandsPopupOpen)
|
|
d.chatCommandsPopupOpen = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: gifPopupComponent
|
|
|
|
StatusGifPopup {
|
|
readonly property point relativePosition: d.getCommonPopupRelativePosition(this, parent)
|
|
|
|
width: 360
|
|
height: 440
|
|
x: relativePosition.x
|
|
y: relativePosition.y
|
|
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
|
|
|
|
gifSelected: function (event, url) {
|
|
messageInputField.text += "\n" + url
|
|
control.sendMessage(event)
|
|
control.isReply = false
|
|
messageInputField.forceActiveFocus()
|
|
if (control.closeGifPopupAfterSelection)
|
|
close()
|
|
}
|
|
onClosed: {
|
|
gifBtn.popup = null
|
|
destroy()
|
|
}
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
id: layout
|
|
anchors.fill: parent
|
|
spacing: 4
|
|
|
|
// TODO remove that Loader when the Chat Commands are re-implemented and fixed
|
|
Loader {
|
|
id: chatCommandsBtnLoader
|
|
active: false
|
|
sourceComponent: StatusQ.StatusFlatRoundButton {
|
|
id: chatCommandsBtn
|
|
Layout.preferredWidth: 32
|
|
Layout.preferredHeight: 32
|
|
Layout.alignment: Qt.AlignBottom
|
|
Layout.bottomMargin: 4
|
|
icon.name: "chat-commands"
|
|
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
|
|
onClicked: {
|
|
d.chatCommandsPopupOpen ? Global.closePopup() : Global.openPopup(chatCommandsPopup);
|
|
d.chatCommandsPopupOpen = !d.chatCommandsPopupOpen;
|
|
}
|
|
visible: RootStore.isWalletEnabled && !isEdit && control.chatType === Constants.chatType.oneToOne
|
|
}
|
|
}
|
|
|
|
StatusQ.StatusFlatRoundButton {
|
|
id: imageBtn
|
|
Layout.preferredWidth: 32
|
|
Layout.preferredHeight: 32
|
|
Layout.alignment: Qt.AlignBottom
|
|
Layout.bottomMargin: 4
|
|
icon.name: "image"
|
|
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
|
|
visible: !isEdit
|
|
onClicked: {
|
|
highlighted = true
|
|
const popup = imageDialogComponent.createObject(control)
|
|
popup.open()
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: messageInput
|
|
|
|
readonly property int defaultInputFieldHeight: 40
|
|
|
|
Layout.fillWidth: true
|
|
|
|
implicitHeight: inputLayout.implicitHeight + inputLayout.anchors.topMargin + inputLayout.anchors.bottomMargin
|
|
implicitWidth: inputLayout.implicitWidth + inputLayout.anchors.leftMargin + inputLayout.anchors.rightMargin
|
|
|
|
color: isEdit ? Theme.palette.statusChatInput.secondaryBackgroundColor : Style.current.inputBackground
|
|
radius: 20
|
|
|
|
Component {
|
|
id: textFormatMenuComponent
|
|
|
|
StatusTextFormatMenu {
|
|
onClosed: {
|
|
messageInputField.deselect()
|
|
destroy()
|
|
}
|
|
|
|
StatusChatInputTextFormationAction {
|
|
wrapper: "**"
|
|
icon.name: "bold"
|
|
text: qsTr("Bold")
|
|
selectedTextWithFormationChars: RootStore.getSelectedTextWithFormationChars(messageInputField)
|
|
onActionTriggered: checked ?
|
|
unwrapSelection(wrapper, RootStore.getSelectedTextWithFormationChars(messageInputField)) :
|
|
wrapSelection(wrapper)
|
|
}
|
|
StatusChatInputTextFormationAction {
|
|
wrapper: "*"
|
|
icon.name: "italic"
|
|
text: qsTr("Italic")
|
|
selectedTextWithFormationChars: RootStore.getSelectedTextWithFormationChars(messageInputField)
|
|
checked: (surroundedBy("*") && !surroundedBy("**")) || surroundedBy("***")
|
|
onActionTriggered: checked ?
|
|
unwrapSelection(wrapper, RootStore.getSelectedTextWithFormationChars(messageInputField)) :
|
|
wrapSelection(wrapper)
|
|
}
|
|
StatusChatInputTextFormationAction {
|
|
wrapper: "~~"
|
|
icon.name: "strikethrough"
|
|
text: qsTr("Strikethrough")
|
|
selectedTextWithFormationChars: RootStore.getSelectedTextWithFormationChars(messageInputField)
|
|
onActionTriggered: checked ?
|
|
unwrapSelection(wrapper, RootStore.getSelectedTextWithFormationChars(messageInputField)) :
|
|
wrapSelection(wrapper)
|
|
}
|
|
StatusChatInputTextFormationAction {
|
|
wrapper: "`"
|
|
icon.name: "code"
|
|
text: qsTr("Code")
|
|
selectedTextWithFormationChars: RootStore.getSelectedTextWithFormationChars(messageInputField)
|
|
onActionTriggered: checked ?
|
|
unwrapSelection(wrapper, RootStore.getSelectedTextWithFormationChars(messageInputField)) :
|
|
wrapSelection(wrapper)
|
|
}
|
|
StatusChatInputTextFormationAction {
|
|
wrapper: "> "
|
|
icon.name: "quote"
|
|
text: qsTr("Quote")
|
|
checked: messageInputField.selectedText && isSelectedLinePrefixedBy(messageInputField.selectionStart, wrapper)
|
|
|
|
onActionTriggered: checked
|
|
? unprefixSelectedLine(wrapper)
|
|
: prefixSelectedLine(wrapper)
|
|
}
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
id: validators
|
|
anchors.bottom: control.imageErrorMessageLocation === StatusChatInput.ImageErrorMessageLocation.Top ? parent.top : undefined
|
|
anchors.bottomMargin: control.imageErrorMessageLocation === StatusChatInput.ImageErrorMessageLocation.Top ? -4 : undefined
|
|
anchors.top: control.imageErrorMessageLocation === StatusChatInput.ImageErrorMessageLocation.Bottom ? parent.bottom : undefined
|
|
anchors.topMargin: control.imageErrorMessageLocation === StatusChatInput.ImageErrorMessageLocation.Bottom ? (isImage ? -4 : 4) : undefined
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
width: parent.width
|
|
z: 1
|
|
|
|
StatusChatImageExtensionValidator {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
}
|
|
StatusChatImageSizeValidator {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
}
|
|
StatusChatImageQtyValidator {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
// Bottom right corner has different radius
|
|
color: parent.color
|
|
anchors.bottom: parent.bottom
|
|
anchors.right: parent.right
|
|
height: parent.height / 2
|
|
width: 32
|
|
radius: Style.current.radius
|
|
}
|
|
|
|
ColumnLayout {
|
|
id: inputLayout
|
|
width: parent.width
|
|
spacing: 4
|
|
|
|
StatusChatInputReplyArea {
|
|
id: replyArea
|
|
visible: isReply
|
|
Layout.fillWidth: true
|
|
Layout.margins: 2
|
|
onCloseButtonClicked: {
|
|
isReply = false
|
|
}
|
|
}
|
|
|
|
StatusChatInputImageArea {
|
|
id: imageArea
|
|
Layout.fillWidth: true
|
|
Layout.leftMargin: Style.current.halfPadding
|
|
Layout.rightMargin: Style.current.halfPadding
|
|
visible: isImage
|
|
onImageClicked: {
|
|
Global.openImagePopup(chatImage)
|
|
}
|
|
onImageRemoved: {
|
|
if (control.fileUrlsAndSources.length > index && control.fileUrlsAndSources[index]) {
|
|
control.fileUrlsAndSources.splice(index, 1)
|
|
}
|
|
showImageArea(control.fileUrlsAndSources)
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Layout.minimumHeight: (messageInputField.contentHeight + messageInputField.topPadding + messageInputField.bottomPadding)
|
|
Layout.maximumHeight: 112
|
|
spacing: Style.current.radius
|
|
StatusScrollView {
|
|
id: inputScrollView
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Layout.leftMargin: 12
|
|
Layout.rightMargin: 12
|
|
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
|
|
|
padding: 0
|
|
contentWidth: availableWidth
|
|
|
|
TextArea {
|
|
id: messageInputField
|
|
|
|
objectName: "messageInputField"
|
|
|
|
property var lastClick: 0
|
|
property int cursorWhenPressed: 0
|
|
property int previousCursorPosition: 0
|
|
|
|
width: inputScrollView.availableWidth
|
|
|
|
textFormat: Text.RichText
|
|
font.pixelSize: 15
|
|
font.family: Style.current.baseFont.name
|
|
wrapMode: TextArea.Wrap
|
|
placeholderText: control.chatInputPlaceholder
|
|
placeholderTextColor: Style.current.secondaryText
|
|
selectByMouse: true
|
|
color: isEdit ? Theme.palette.directColor1 : Style.current.textColor
|
|
topPadding: 9
|
|
bottomPadding: 9
|
|
leftPadding: 0
|
|
padding: 0
|
|
Keys.onUpPressed: {
|
|
if (isEdit && !activeFocus) {
|
|
forceActiveFocus();
|
|
} else {
|
|
if (messageInputField.length === 0) {
|
|
control.keyUpPress();
|
|
}
|
|
}
|
|
if (emojiSuggestions.visible) {
|
|
emojiSuggestions.listView.decrementCurrentIndex();
|
|
}
|
|
event.accepted = false
|
|
}
|
|
Keys.onPressed: {
|
|
keyEvent = event;
|
|
onKeyPress(event)
|
|
cursorWhenPressed = cursorPosition;
|
|
}
|
|
Keys.onReleased: onRelease(event) // gives much more up to date cursorPosition
|
|
Keys.onShortcutOverride: event.accepted = isUploadFilePressed(event)
|
|
selectionColor: Style.current.primarySelectionColor
|
|
persistentSelection: true
|
|
property var keyEvent
|
|
|
|
Component.onDestruction: {
|
|
// NOTE: Without losing focus the app crashes on apply/cancel message editing.
|
|
control.forceActiveFocus();
|
|
}
|
|
|
|
onCursorPositionChanged: {
|
|
if(mentionsPos.length > 0 && ((keyEvent.key === Qt.Key_Left) || (keyEvent.key === Qt.Key_Right)
|
|
|| (selectedText.length>0))) {
|
|
const mention = d.getMentionAtPosition(cursorPosition)
|
|
if (mention) {
|
|
const cursorMovingLeft = (cursorPosition < previousCursorPosition);
|
|
const newCursorPosition = cursorMovingLeft ?
|
|
mention.leftIndex :
|
|
mention.rightIndex
|
|
const isSelection = (selectedText.length>0);
|
|
isSelection ? moveCursorSelection(newCursorPosition, TextEdit.SelectCharacters) :
|
|
cursorPosition = newCursorPosition
|
|
}
|
|
}
|
|
|
|
inputScrollView.ensureVisible(cursorRectangle)
|
|
previousCursorPosition = cursorPosition
|
|
}
|
|
|
|
onTextChanged: {
|
|
if (length <= control.messageLimit) {
|
|
if (length === 0) {
|
|
mentionsPos = [];
|
|
} else {
|
|
checkForInlineEmojis()
|
|
}
|
|
} else {
|
|
const removeFrom = (cursorPosition < messageLimit) ? cursorWhenPressed : messageLimit;
|
|
remove(removeFrom, cursorPosition);
|
|
}
|
|
|
|
d.updateMentionsPositions()
|
|
d.cleanMentionsPos()
|
|
|
|
messageLengthLimit.remainingChars = (messageLimit - length);
|
|
}
|
|
|
|
onReleased: function (event) {
|
|
const now = Date.now()
|
|
if (messageInputField.selectedText.trim() !== "") {
|
|
// If it's a double click, just check the mouse position
|
|
// If it's a mouse select, use the start and end position average)
|
|
const x = now < messageInputField.lastClick + 500
|
|
? event.x
|
|
: (messageInputField.cursorRectangle.x + event.x) / 2
|
|
let menu = Global.openMenu(textFormatMenuComponent, messageInput, {})
|
|
menu.x = x - menu.width / 2
|
|
menu.y = messageInputField.y - menu.height - 5
|
|
d.textFormatMenu = menu
|
|
messageInputField.forceActiveFocus()
|
|
}
|
|
lastClick = now
|
|
}
|
|
|
|
onLinkActivated: {
|
|
const mention = d.getMentionAtPosition(cursorPosition - 1)
|
|
if(mention) {
|
|
select(mention.leftIndex, mention.rightIndex)
|
|
}
|
|
}
|
|
|
|
onEnabledChanged: {
|
|
if (!enabled) {
|
|
clear()
|
|
control.hideExtendedArea()
|
|
}
|
|
}
|
|
|
|
cursorDelegate: StatusCursorDelegate {
|
|
cursorVisible: messageInputField.cursorVisible
|
|
}
|
|
|
|
StatusSyntaxHighlighter {
|
|
quickTextDocument: messageInputField.textDocument
|
|
codeBackgroundColor: Style.current.codeBackground
|
|
codeForegroundColor: Style.current.textColor
|
|
}
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
acceptedButtons: Qt.NoButton
|
|
enabled: parent.hoveredLink
|
|
cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.IBeamCursor
|
|
}
|
|
}
|
|
|
|
|
|
Shortcut {
|
|
enabled: messageInputField.activeFocus
|
|
sequence: StandardKey.Bold
|
|
onActivated: wrapSelection("**")
|
|
}
|
|
Shortcut {
|
|
enabled: messageInputField.activeFocus
|
|
sequence: StandardKey.Italic
|
|
onActivated: wrapSelection("*")
|
|
}
|
|
Shortcut {
|
|
enabled: messageInputField.activeFocus
|
|
sequence: "Ctrl+Shift+Alt+C"
|
|
onActivated: wrapSelection("```")
|
|
}
|
|
Shortcut {
|
|
enabled: messageInputField.activeFocus
|
|
sequence: "Ctrl+Shift+C"
|
|
onActivated: wrapSelection("`")
|
|
}
|
|
Shortcut {
|
|
enabled: messageInputField.activeFocus
|
|
sequence: "Ctrl+Alt+-"
|
|
onActivated: wrapSelection("~~")
|
|
}
|
|
Shortcut {
|
|
enabled: messageInputField.activeFocus
|
|
sequence: "Ctrl+Shift+X"
|
|
onActivated: wrapSelection("~~")
|
|
}
|
|
Shortcut {
|
|
enabled: messageInputField.activeFocus
|
|
sequence: "Ctrl+Meta+Space"
|
|
onActivated: emojiBtn.clicked(null)
|
|
}
|
|
}
|
|
|
|
Column {
|
|
Layout.alignment: Qt.AlignBottom
|
|
Layout.bottomMargin: 3
|
|
|
|
StyledText {
|
|
id: messageLengthLimit
|
|
property int remainingChars: -1
|
|
leftPadding: Style.current.halfPadding
|
|
rightPadding: Style.current.halfPadding
|
|
visible: ((messageInputField.length >= control.messageLimitVisible) && (messageInputField.length <= control.messageLimit))
|
|
color: (remainingChars <= messageLimitVisible) ? Style.current.danger : Style.current.textColor
|
|
text: visible ? remainingChars.toString() : ""
|
|
}
|
|
|
|
Row {
|
|
id: actions
|
|
spacing: 2
|
|
|
|
StatusQ.StatusFlatRoundButton {
|
|
id: emojiBtn
|
|
objectName: "statusChatInputEmojiButton"
|
|
implicitHeight: 32
|
|
implicitWidth: 32
|
|
icon.name: "emojis"
|
|
icon.color: (hovered || highlighted) ? Theme.palette.primaryColor1
|
|
: Theme.palette.baseColor1
|
|
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
|
|
color: "transparent"
|
|
highlighted: d.emojiPopupOpened
|
|
onClicked: {
|
|
if (d.emojiPopupOpened) {
|
|
emojiPopup.close()
|
|
return
|
|
}
|
|
d.emojiPopupOpened = true
|
|
emojiPopup.open()
|
|
}
|
|
}
|
|
|
|
StatusQ.StatusFlatRoundButton {
|
|
id: gifBtn
|
|
|
|
property Popup popup
|
|
|
|
objectName: "gifPopupButton"
|
|
implicitHeight: 32
|
|
implicitWidth: 32
|
|
visible: !isEdit && RootStore.isGifWidgetEnabled
|
|
icon.name: "gif"
|
|
icon.color: (hovered || highlighted) ? Theme.palette.primaryColor1
|
|
: Theme.palette.baseColor1
|
|
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
|
|
color: "transparent"
|
|
highlighted: popup && popup.opened
|
|
onClicked: {
|
|
if (popup) {
|
|
popup.close()
|
|
return
|
|
}
|
|
popup = gifPopupComponent.createObject(gifBtn)
|
|
popup.open()
|
|
}
|
|
}
|
|
|
|
StatusQ.StatusFlatRoundButton {
|
|
id: stickersBtn
|
|
objectName: "statusChatInputStickersButton"
|
|
implicitHeight: 32
|
|
implicitWidth: 32
|
|
width: visible ? 32 : 0
|
|
icon.name: "stickers"
|
|
icon.color: (hovered || highlighted) ? Theme.palette.primaryColor1
|
|
: Theme.palette.baseColor1
|
|
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
|
|
visible: !isEdit && emojiBtn.visible
|
|
color: "transparent"
|
|
highlighted: d.stickersPopupOpened
|
|
onClicked: {
|
|
if (d.stickersPopupOpened) {
|
|
control.stickersPopup.close()
|
|
return
|
|
}
|
|
d.stickersPopupOpened = true
|
|
control.stickersPopup.open()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|