mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-24 21:39:24 +00:00
6cba8810e0
1. Don't allow mention invalidation by altering mention with mouse or keyboard 2. Don't allow mention duplication on the same position 3. Clean mentions after text with mentions changes 4. Fix mention selection 5. Make sure mention is separated by text with valid separators (we're using only space) 6. Cursor will consider the mention as an object and will jump over it as it would be a single character (placing cursor inside leaves room for mention invalidation)
1483 lines
60 KiB
QML
1483 lines
60 KiB
QML
import QtQuick 2.13
|
|
import QtQuick.Controls 2.13
|
|
import QtQuick.Layouts 1.13
|
|
import QtQuick.Dialogs 1.3
|
|
import DotherSide 0.1
|
|
|
|
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.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
|
|
|
|
signal sendTransactionCommandButtonClicked()
|
|
signal receiveTransactionCommandButtonClicked()
|
|
signal stickerSelected(string hashId, string packId, string url)
|
|
signal sendMessage(var event)
|
|
signal unblockChat()
|
|
|
|
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 emojiPopupOpened: false
|
|
property bool stickersPopupOpened: false
|
|
property bool closeGifPopupAfterSelection: true
|
|
|
|
property bool emojiEvent: false
|
|
property bool isColonPressed: false
|
|
property bool isReply: false
|
|
property string replyMessageId: replyArea.messageId
|
|
|
|
property bool isImage: false
|
|
property bool isEdit: false
|
|
property bool isContactBlocked: false
|
|
property bool isActiveChannel: 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 var messageContextMenu
|
|
|
|
property alias suggestions: suggestionsBox
|
|
|
|
enum ImageErrorMessageLocation {
|
|
Top,
|
|
Bottom
|
|
}
|
|
|
|
objectName: "statusChatInput"
|
|
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
|
|
|
|
//mentions helper properties
|
|
property string copiedTextPlain: ""
|
|
property string copiedTextFormatted: ""
|
|
property var copiedMentionsPos: []
|
|
property int copyTextStart: 0
|
|
|
|
// set to true when pasted text comes from this component (was copied within this component)
|
|
property bool internalPaste: false
|
|
|
|
property int leftOfMentionIndex: -1
|
|
property int rightOfMentionIndex: -1
|
|
|
|
readonly property StateGroup emojiPopupTakeover: StateGroup {
|
|
states: State {
|
|
when: control.emojiPopupOpened
|
|
|
|
PropertyChanges {
|
|
target: emojiPopup
|
|
|
|
parent: control
|
|
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
|
|
x: control.width - emojiPopup.width - Style.current.halfPadding
|
|
y: -emojiPopup.height
|
|
}
|
|
}
|
|
}
|
|
readonly property StateGroup stickersPopupTakeover: StateGroup {
|
|
states: State {
|
|
when: control.stickersPopupOpened
|
|
|
|
PropertyChanges {
|
|
target: stickersPopup
|
|
|
|
parent: control
|
|
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
|
|
x: control.width - stickersPopup.width - Style.current.halfPadding
|
|
y: -stickersPopup.height
|
|
}
|
|
}
|
|
}
|
|
|
|
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/>"));
|
|
}
|
|
|
|
function togglePopup(popup, btn) {
|
|
if (popup !== control.stickersPopup) {
|
|
control.stickersPopup.close()
|
|
}
|
|
|
|
if (popup !== gifPopup) {
|
|
gifPopup.close()
|
|
}
|
|
|
|
if (popup !== emojiPopup) {
|
|
emojiPopup.close()
|
|
}
|
|
|
|
if (popup.opened) {
|
|
popup.close()
|
|
btn.highlighted = false
|
|
} else {
|
|
popup.open()
|
|
btn.highlighted = true
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
enabled: control.emojiPopupOpened
|
|
target: emojiPopup
|
|
|
|
onEmojiSelected: function (text, atCursor) {
|
|
insertInTextInput(atCursor ? messageInputField.cursorPosition : messageInputField.length, text)
|
|
emojiBtn.highlighted = false
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
onClosed: {
|
|
emojiBtn.highlighted = false
|
|
control.emojiPopupOpened = false
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
enabled: control.stickersPopupOpened
|
|
target: control.stickersPopup
|
|
|
|
onStickerSelected: {
|
|
control.stickerSelected(hashId, packId, url)
|
|
control.hideExtendedArea();
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
onClosed: {
|
|
stickersBtn.highlighted = false
|
|
control.stickersPopupOpened = false
|
|
}
|
|
}
|
|
|
|
property var mentionsPos: []
|
|
|
|
function isUploadFilePressed(event) {
|
|
return (event.key === Qt.Key_U) && (event.modifiers & Qt.ControlModifier) && imageBtn.visible && !imageDialog.visible
|
|
}
|
|
|
|
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) {
|
|
control.sendMessage(event)
|
|
control.hideExtendedArea();
|
|
event.accepted = true
|
|
return;
|
|
}
|
|
if (event) {
|
|
event.accepted = true
|
|
messageTooLongDialog.open()
|
|
}
|
|
} 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) {
|
|
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
|
|
showImageArea([clipboardImage])
|
|
event.accepted = true
|
|
} else {
|
|
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 = globalUtils.plainText(QClipboardProxy.text)
|
|
const copiedText = globalUtils.plainText(d.copiedTextPlain)
|
|
if (copiedText === clipboardText) {
|
|
d.internalPaste = true
|
|
} else {
|
|
d.copiedTextPlain = ""
|
|
d.copiedTextFormatted = ""
|
|
d.copiedMentionsPos = []
|
|
}
|
|
}
|
|
}
|
|
|
|
// ⌘⇧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;
|
|
|
|
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.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();
|
|
}
|
|
}
|
|
}
|
|
|
|
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 globalUtils.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.key === Qt.Key_Backspace && textFormatMenu.opened) {
|
|
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
|
|
}
|
|
|
|
messageInputField.readOnly = false
|
|
|
|
if (d.internalPaste) {
|
|
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()
|
|
}
|
|
}
|
|
}
|
|
|
|
const prevLength = messageInputField.length
|
|
insertInTextInput(d.copyTextStart, d.copiedTextFormatted)
|
|
messageInputField.cursorPosition = d.copyTextStart + messageInputField.length - prevLength
|
|
d.internalPaste = false
|
|
} else if (event.matches(StandardKey.Paste)) {
|
|
insertInTextInput(d.copyTextStart, QClipboardProxy.text)
|
|
messageInputField.cursorPosition = d.copyTextStart + QClipboardProxy.text.length
|
|
}
|
|
|
|
if (event.key !== Qt.Key_Escape) {
|
|
emojiEvent = emojiHandler(event)
|
|
if (!emojiEvent) {
|
|
emojiSuggestions.close()
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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.deparseFromParse(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.deparseFromParse(match[i]).length;
|
|
}
|
|
length = length - match.length;
|
|
}
|
|
return length;
|
|
}
|
|
|
|
function replaceWithEmoji(message, shortname, codePoint) {
|
|
const encodedCodePoint = StatusQUtils.Emoji.getEmojiCodepoint(codePoint)
|
|
messageInputField.remove(messageInputField.cursorPosition - shortname.length, 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 hideExtendedArea() {
|
|
isImage = false;
|
|
isReply = false;
|
|
control.fileUrlsAndSources = []
|
|
imageArea.imageSource = [];
|
|
replyArea.userName = ""
|
|
replyArea.message = ""
|
|
for (let i=0; i<validators.children.length; i++) {
|
|
const validator = validators.children[i]
|
|
validator.images = []
|
|
}
|
|
}
|
|
|
|
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 = true;
|
|
isReply = false;
|
|
|
|
imageArea.imageSource = imagePathsOrData
|
|
control.fileUrlsAndSources = imageArea.imageSource
|
|
}
|
|
|
|
function showReplyArea(messageId, userName, message, contentType, image, sticker) {
|
|
isReply = true
|
|
replyArea.userName = userName
|
|
replyArea.message = message
|
|
replyArea.contentType = contentType
|
|
replyArea.image = image
|
|
replyArea.stickerData = sticker
|
|
replyArea.messageId = messageId
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
|
|
function forceInputActiveFocus() {
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
|
|
Connections {
|
|
enabled: control.isActiveChannel
|
|
target: Global.dragArea
|
|
ignoreUnknownSignals: true
|
|
onDroppedOnValidScreen: (drop) => {
|
|
let validImages = validateImages(drop.urls)
|
|
if (validImages.length > 0) {
|
|
showImageArea(validImages)
|
|
drop.acceptProposedAction()
|
|
}
|
|
}
|
|
}
|
|
|
|
// This is used by Squish tests to not have to access the file dialog
|
|
function selectImageString(filePath) {
|
|
let validImages = validateImages([filePath])
|
|
if (validImages.length > 0) {
|
|
control.showImageArea(validImages)
|
|
}
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
|
|
FileDialog {
|
|
id: imageDialog
|
|
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
|
|
let validImages = validateImages(imageDialog.fileUrls)
|
|
if (validImages.length > 0) {
|
|
control.showImageArea(validImages)
|
|
}
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
onRejected: {
|
|
imageBtn.highlighted = false
|
|
}
|
|
}
|
|
|
|
MessageDialog {
|
|
id: messageTooLongDialog
|
|
title: qsTr("Your message is too long.")
|
|
icon: StandardIcon.Critical
|
|
text: qsTr("Please make your message shorter. We have set the limit to 2000 characters to be courteous of others.")
|
|
standardButtons: StandardButton.Ok
|
|
}
|
|
|
|
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: ["name", "nickname", "ensName", "alias"]
|
|
inputField: messageInputField
|
|
onItemSelected: function (item, lastAtPosition, lastCursorPosition) {
|
|
messageInputField.forceActiveFocus();
|
|
let name = item.name.replace("@", "")
|
|
d.insertMention(name, item.publicKey, lastAtPosition, lastCursorPosition)
|
|
suggestionsBox.suggestionsModel.clear()
|
|
}
|
|
onVisibleChanged: {
|
|
if (!visible) {
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
}
|
|
}
|
|
|
|
ChatCommandsPopup {
|
|
id: chatCommandsPopup
|
|
x: 8
|
|
y: -height
|
|
onSendTransactionCommandButtonClicked: {
|
|
control.sendTransactionCommandButtonClicked()
|
|
chatCommandsPopup.close()
|
|
}
|
|
onReceiveTransactionCommandButtonClicked: {
|
|
control.receiveTransactionCommandButtonClicked()
|
|
chatCommandsPopup.close()
|
|
}
|
|
onClosed: {
|
|
chatCommandsBtn.highlighted = false
|
|
}
|
|
onOpened: {
|
|
chatCommandsBtn.highlighted = true
|
|
}
|
|
}
|
|
|
|
StatusGifPopup {
|
|
id: gifPopup
|
|
width: 360
|
|
height: 440
|
|
x: control.width - width - Style.current.halfPadding
|
|
y: -height
|
|
gifSelected: function (event, url) {
|
|
messageInputField.text += "\n" + url
|
|
control.sendMessage(event)
|
|
gifBtn.highlighted = false
|
|
messageInputField.forceActiveFocus()
|
|
if (control.closeGifPopupAfterSelection)
|
|
gifPopup.close()
|
|
}
|
|
onClosed: {
|
|
gifBtn.highlighted = false
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
id: layout
|
|
anchors.fill: parent
|
|
spacing: 4
|
|
|
|
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
|
|
visible: RootStore.isWalletEnabled && !isEdit && control.chatType === Constants.chatType.oneToOne
|
|
enabled: !control.isContactBlocked
|
|
onClicked: {
|
|
chatCommandsPopup.opened ?
|
|
chatCommandsPopup.close() :
|
|
chatCommandsPopup.open()
|
|
}
|
|
}
|
|
|
|
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 && control.chatType !== Constants.chatType.publicChat
|
|
enabled: !control.isContactBlocked
|
|
onClicked: {
|
|
highlighted = true
|
|
imageDialog.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
|
|
|
|
enabled: !control.isContactBlocked
|
|
color: isEdit ? Theme.palette.statusChatInput.secondaryBackgroundColor : Style.current.inputBackground
|
|
radius: 20
|
|
|
|
StatusTextFormatMenu {
|
|
id: textFormatMenu
|
|
|
|
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)
|
|
}
|
|
onClosed: {
|
|
messageInputField.deselect();
|
|
}
|
|
}
|
|
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
|
|
|
|
anchors.fill: parent
|
|
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, messageContextMenu)
|
|
onImageRemoved: {
|
|
if (control.fileUrlsAndSources.length > index && control.fileUrlsAndSources[index]) {
|
|
control.fileUrlsAndSources.splice(index, 1)
|
|
}
|
|
isImage = control.fileUrlsAndSources.length > 0
|
|
validateImages(control.fileUrlsAndSources)
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
spacing: Style.current.radius
|
|
|
|
StatusScrollView {
|
|
id: inputScrollView
|
|
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Layout.leftMargin: 12
|
|
Layout.rightMargin: 12
|
|
Layout.maximumHeight: 112
|
|
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
|
|
|
padding: 0
|
|
contentWidth: availableWidth
|
|
contentHeight: messageInputField.implicitHeight
|
|
|
|
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.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) {
|
|
const mention = d.getMentionAtPosition(cursorPosition)
|
|
if(mention) {
|
|
const cursorMovingLeft = cursorPosition < previousCursorPosition
|
|
const newCursorPosition = cursorMovingLeft ?
|
|
mention.leftIndex :
|
|
mention.rightIndex
|
|
const isSelection = selectionStart != selectionEnd
|
|
isSelection ? moveCursorSelection(newCursorPosition, TextEdit.SelectCharacters) :
|
|
cursorPosition = newCursorPosition
|
|
}
|
|
}
|
|
|
|
inputScrollView.ensureVisible(cursorRectangle)
|
|
|
|
previousCursorPosition = cursorPosition
|
|
}
|
|
|
|
onTextChanged: {
|
|
if (length <= control.messageLimit) {
|
|
var symbols = ":='xX><0O;*dB8-D#%\\";
|
|
if ((length > 1) && (symbols.indexOf(getText((cursorPosition - 2), (cursorPosition - 1))) !== -1)
|
|
&& (!getText((cursorPosition - 7), cursorPosition).includes("http"))) {
|
|
const emojis = StatusQUtils.Emoji.emojiJSON.emoji_json.filter(function (emoji) {
|
|
if (emoji.aliases_ascii.includes(getText((cursorPosition - 2), cursorPosition)) ||
|
|
emoji.aliases_ascii.includes(getText((cursorPosition - 3), cursorPosition))) {
|
|
var has2Chars = emoji.aliases_ascii.includes(getText((cursorPosition - 2), cursorPosition));
|
|
replaceWithEmoji("", getText(cursorPosition - (has2Chars ? 2 : 3), cursorPosition), emoji.unicode);
|
|
}
|
|
})
|
|
}
|
|
if (length === 0) {
|
|
mentionsPos = [];
|
|
}
|
|
} else {
|
|
var 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)
|
|
let x = now < messageInputField.lastClick + 500 ? x = event.x :
|
|
(messageInputField.cursorRectangle.x + event.x) / 2
|
|
x -= textFormatMenu.width / 2
|
|
|
|
textFormatMenu.popup(x, messageInputField.y - textFormatMenu.height - 5)
|
|
messageInputField.forceActiveFocus();
|
|
}
|
|
lastClick = now
|
|
}
|
|
|
|
onLinkActivated: {
|
|
const mention = d.getMentionAtPosition(cursorPosition - 1)
|
|
if(mention) {
|
|
select(mention.leftIndex, mention.rightIndex)
|
|
}
|
|
}
|
|
|
|
cursorDelegate: Rectangle {
|
|
color: Theme.palette.primaryColor1
|
|
implicitWidth: 2
|
|
implicitHeight: 22
|
|
radius: 1
|
|
visible: messageInputField.cursorVisible
|
|
|
|
SequentialAnimation on visible {
|
|
loops: Animation.Infinite
|
|
running: messageInputField.cursorVisible
|
|
PropertyAnimation { to: false; duration: 600; }
|
|
PropertyAnimation { to: true; duration: 600; }
|
|
}
|
|
}
|
|
|
|
StatusSyntaxHighlighter {
|
|
quickTextDocument: messageInputField.textDocument
|
|
}
|
|
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"
|
|
onClicked: {
|
|
control.emojiPopupOpened = true
|
|
|
|
togglePopup(emojiPopup, emojiBtn)
|
|
}
|
|
}
|
|
|
|
StatusQ.StatusFlatRoundButton {
|
|
id: gifBtn
|
|
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"
|
|
onClicked: togglePopup(gifPopup, gifBtn)
|
|
}
|
|
|
|
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"
|
|
onClicked: {
|
|
control.stickersPopupOpened = true
|
|
|
|
togglePopup(control.stickersPopup, stickersBtn)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
StatusQ.StatusButton {
|
|
id: unblockBtn
|
|
Layout.alignment: Qt.AlignBottom
|
|
Layout.bottomMargin: 4
|
|
visible: control.isContactBlocked
|
|
text: qsTr("Unblock")
|
|
type: StatusQ.StatusBaseButton.Type.Danger
|
|
onClicked: function (event) {
|
|
control.unblockChat()
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|