status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor and add support for converting to emoji after pasting text

This commit is contained in:
hydr063n 2020-09-04 16:06:50 +02:00 committed by Iuri Matias
parent 542020d6a6
commit e77b6d193e
2 changed files with 117 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml
View File

@ -6,7 +6,6 @@ import QtQuick.Dialogs 1.0
import "../components"
import "../../../../shared"
import "../../../../imports"
import "../components/emojiList.js" as EmojiJSON
Rectangle {
id: rectangle
@ -18,6 +17,8 @@ Rectangle {
visible: chatsModel.activeChannel.chatType !== Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.isMember(profileModel.profile.pubKey)
property bool emojiEvent: false;
property bool paste: false;
property bool isColonPressed: false;
Audio {
id: sendMessageSound
@ -56,125 +57,140 @@ Rectangle {
if (event.modifiers === Qt.NoModifier && (event.key === Qt.Key_Enter || event.key === Qt.Key_Return)) {
sendMsg(event);
}
if ((event.key == Qt.Key_V) && (event.modifiers & Qt.ControlModifier)) {
paste = true;
}
isColonPressed = (event.key == Qt.Key_Colon) && (event.modifiers & Qt.ShiftModifier);
}
function onRelease(event) {
emojiEvent = emojiHandler(emojiEvent, event);
// the text doesn't get registered to the textarea fast enough
// we can only get it in the `released` event
if (paste) {
paste = false;
interrogateMessage();
}
emojiEvent = emojiHandler(event);
}
function onMouseClicked() {
emojiEvent = emojiHandler(emojiEvent, {key: null});
emojiEvent = emojiHandler({key: null});
}
function countEmojis(value) {
let match = value.match(/<img class=\"emoji\" draggable=\"false\" alt=\"(.+?)\" src=\"qrc:\/imports\/twemoji\/.+?"\/>/g, "$1");
var length = 0;
function interrogateMessage() {
const text = chatsModel.plainText(Emoji.deparse(txtData.text));
var words = text.split(' ');
if (match && match.length > 0) {
for (var i = 0; i < match.length; i++) {
var deparse = Emoji.deparse(match[i]);
length += deparse.length;
for (var i = 0; i < words.length; i++) {
var transform = true;
if (words[i].charAt(0) === ':') {
for (var j = 0; j < words[i].length; j++) {
if (isSpace(words[i].charAt(j)) === true || isPunct(words[i].charAt(j)) === true) {
transform = false;
}
console.log("cursorPosition: ", length - match.length, "[", length,"]", "[",match.length,"]");
length = length - match.length;
}
return length;
}
function extraPolatePosition(text, cursorPosition) {
if (transform) {
const codePoint = Emoji.getEmojiUnicode(words[i]);
words[i] = words[i].replace(words[i], (codePoint !== undefined) ? Emoji.fromCodePoint(codePoint) : words[i]);
}
}
}
txtData.remove(0, txtData.length);
txtData.insert(0, Emoji.parse(words.join(' '), '26x26'));
}
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 || 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 = Emoji.getEmojiUnicode(shortname);
const newMessage = message.data.replace(shortname, (codePoint !== undefined) ? Emoji.fromCodePoint(codePoint) : shortname);
txtData.remove(0, txtData.cursorPosition);
txtData.insert(0, Emoji.parse(newMessage, '26x26'));
return false;
}
return true;
} else if (emojiEvent && isKeyValid(event.key) && !isColonPressed) {
console.log('popup');
return true;
} else if (emojiEvent && !isKeyValid(event.key) && !isColonPressed) {
return false;
}
return false;
}
// 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 = chatsModel.plainText(Emoji.deparse(txtData.text));
const plainText = Emoji.parse(text, '26x26');
var bracketEvent = false;
var length = 0;
for (var i =0; i < text.length;) {
for (var i = 0; i < plainText.length;) {
if (length >= txtData.cursorPosition) break;
if (length >= cursorPosition)
break;
if (!bracketEvent && text.charAt(i) !== '<') {
if (!bracketEvent && plainText.charAt(i) !== '<') {
i++;
length++;
} else if (!bracketEvent && text.charAt(i) === '<') {
} else if (!bracketEvent && plainText.charAt(i) === '<') {
bracketEvent = true;
i++;
} else if (bracketEvent && text.charAt(i) !== '>') {
} else if (bracketEvent && plainText.charAt(i) !== '>') {
i++;
} else if (bracketEvent && text.charAt(i) === '>') {
} else if (bracketEvent && plainText.charAt(i) === '>') {
bracketEvent = false;
i++;
length++;
}
}
var substr = text.substr(0, i);
substr = substr.replace(/<img class=\"emoji\" draggable=\"false\" alt=\"(.+?)\" src=\"qrc:\/imports\/twemoji\/.+?"\/>/g, "$1");
return substr;
let textBeforeCursor = Emoji.deparseFromParse(plainText.substr(0, i));
return {
cursor: countEmojiLengths(plainText.substr(0, i)) + txtData.cursorPosition,
data: chatsModel.plainText(Emoji.deparseFromParse(textBeforeCursor)),
};
}
function deparseFromParse(substr) {
return substr.replace(/<img class=\"emoji\" draggable=\"false\" alt=\"(.+?)\" src=\"qrc:\/imports\/twemoji\/.+?"\/>/g, "$1");
function countEmojiLengths(value) {
const match = Emoji.getEmojis(value);
var length = 0;
if (match && match.length > 0) {
for (var i = 0; i < match.length; i++) {
length += Emoji.deparseFromParse(match[i]).length;
}
length = length - match.length;
}
return length;
}
function emojiHandler(emojiEvent, event) {
var deparse = Emoji.deparse(txtData.text);
var plain = chatsModel.plainText(deparse)
var TheText = Emoji.parse(plain, '26x26');
var text = extraPolatePosition(TheText, txtData.cursorPosition);
var cursorPosition = countEmojis(text) + txtData.cursorPosition;
var msg = chatsModel.plainText(deparseFromParse(text));
console.log("MESSAGE: [", msg, "]", "[", msg.length, "]", txtData.cursorPosition);
// check if user has placed cursor near valid emoji colon token
var index = msg.lastIndexOf(':', cursorPosition);
function pollEmojiEvent(message) {
const index = message.data.lastIndexOf(':', message.cursor);
if (index >= 0) {
var substr = msg.substr(index, cursorPosition - index);
console.log("MESSAGE: [", msg, "]", "[", msg.length, "]", txtData.cursorPosition, index, substr, validSubstr(substr));
emojiEvent = validSubstr(substr);
emojiEvent = validSubstr(message.data.substr(index, message.cursor - index));
}
console.log("EVENT: ", event.key, Qt.Key_Colon, event.key === Qt.Key_Colon, emojiEvent);
// state machine to handle different forms of the emoji event state
if (emojiEvent === false && event.key === Qt.Key_Colon) {
if (msg.length <= 1 || isSpace(msg.charAt(cursorPosition - 1)) === true) {
return true;
}
return false;
} else if (emojiEvent === true && event.key === Qt.Key_Colon) {
var index = msg.lastIndexOf(':', cursorPosition - 1);
console.log("BEGIN SENTENCE: ", index, cursorPosition, txtData.cursorPosition);
if (index >= 0 && cursorPosition > 0) {
var shortname = msg.substr(index, cursorPosition);
var codePoint = getEmojiUnicodeFromShortname(shortname);
var newText = (codePoint !== undefined) ? Emoji.fromCodePoint(codePoint) : shortname;
var newMsg = msg.replace(shortname, newText)
console.log("INDEX AND CURSOR: ", index, cursorPosition, "[",shortname,"]", "[",msg,"]", "[",newMsg,"]");
txtData.remove(0, cursorPosition);
txtData.insert(0, Emoji.parse(newMsg, '26x26'));
if (event) event.accepted = true;
return false;
}
return true;
} else if (emojiEvent === true && isKeyValid(event.key) === true) {
console.log('popup');
return true;
}
else if (emojiEvent === true && isKeyValid(event.key) === false) {
console.log('emoji event stopped');
return false;
}
return false;
}
function validSubstr(substr) {
for(var i = 0; i < substr.length; i++) {
var c = substr.charAt(i);
console.log("isSpace: ", isSpace(c), "isPunct: ", isPunct(c))
if (isSpace(c) === true || isPunct(c) === true)
return false;
}
@ -192,8 +208,8 @@ Rectangle {
function isSpace(c) {
if (/( |\t|\n|\r)/.test(c))
return true
return false
return true;
return false;
}
function isPunct(c) {
@ -202,31 +218,6 @@ Rectangle {
return false;
}
function isKeyAlpha(key) {
if (key >= Qt.Key_A && key <= Qt.Key_Z)
return true;
return false;
}
function isKeyDigit(key) {
if (key >= Qt.Key_0 && key <= Qt.Key_9)
return true;
return false;
}
// search for shortname
function getEmojiUnicodeFromShortname(shortname) {
var _emoji;
EmojiJSON.emoji_json.forEach(function(emoji) {
if (emoji.shortname === shortname)
_emoji = emoji;
})
if (_emoji !== undefined)
return _emoji.unicode;
return undefined;
}
FileDialog {
id: imageDialog
//% "Please choose an image"

18
ui/imports/Emoji.qml
View File

@ -2,6 +2,7 @@ pragma Singleton
import QtQuick 2.13
import "./twemoji/twemoji.js" as Twemoji
import "../app/AppLayouts/Chat/components/emojiList.js" as EmojiJSON
QtObject {
property string base: Qt.resolvedUrl("twemoji/")
@ -17,8 +18,25 @@ QtObject {
function deparse(value){
return value.replace(/<img src=\"qrc:\/imports\/twemoji\/.+?" alt=\"(.+?)\" \/>/g, "$1");
}
function deparseFromParse(value) {
return value.replace(/<img class=\"emoji\" draggable=\"false\" alt=\"(.+?)\" src=\"qrc:\/imports\/twemoji\/.+?"\/>/g, "$1");
}
function hasEmoji(value) {
let match = value.match(/<img src=\"qrc:\/imports\/twemoji\/.+?" alt=\"(.+?)\" \/>/g)
return match && match.length > 0
}
function getEmojis(value) {
return value.match(/<img class=\"emoji\" draggable=\"false\" alt=\"(.+?)\" src=\"qrc:\/imports\/twemoji\/.+?"\/>/g, "$1");
}
function getEmojiUnicode(shortname) {
var _emoji;
EmojiJSON.emoji_json.forEach(function(emoji) {
if (emoji.shortname === shortname)
_emoji = emoji;
})
if (_emoji !== undefined)
return _emoji.unicode;
return undefined;
}
}