From 26034012075c9d9c3ae35272ad102b9ce02dca16 Mon Sep 17 00:00:00 2001 From: Vincent Date: Wed, 22 Jul 2020 17:46:17 +1000 Subject: [PATCH] sleek-emoji-rendering --- js/models/conversations.js | 2 - ts/components/conversation/Emojify.tsx | 27 +++---- ts/components/conversation/Message.tsx | 2 + ts/components/conversation/MessageBody.tsx | 31 ++++++++ ts/components/conversation/Timestamp.tsx | 4 +- .../conversation/SessionCompositionBox.tsx | 76 ++++++++++--------- 6 files changed, 90 insertions(+), 52 deletions(-) diff --git a/js/models/conversations.js b/js/models/conversations.js index 0d003647f..7cbc75d33 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -1249,8 +1249,6 @@ ) { this.clearTypingTimers(); - console.log('[vince] body:', body); - const destination = this.id; const expireTimer = this.get('expireTimer'); const recipients = this.getRecipients(); diff --git a/ts/components/conversation/Emojify.tsx b/ts/components/conversation/Emojify.tsx index 056792961..d99dde480 100644 --- a/ts/components/conversation/Emojify.tsx +++ b/ts/components/conversation/Emojify.tsx @@ -84,21 +84,22 @@ export class Emojify extends React.Component { default: } - const style = { - fontSize: `${size}em`, - }; + const style = {fontSize: `${size}em`}; + + const emojiText = match[0] ?? match[1]; results.push( - + + + ); last = regex.lastIndex; diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 67d2acb6e..5759f9e33 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -780,6 +780,8 @@ export class Message extends React.PureComponent { return null; } + console.log('[vince] contents:', contents); + return (
{ const sizeClass = disableJumbomoji ? undefined : getSizeClass(text); const textWithPending = textPending ? `${text}...` : text; + const emoji = renderEmoji({ + i18n, + text: textWithPending, + sizeClass, + key: 0, + renderNonEmoji: renderNewLines, + isGroup, + convoId, + }); + if (disableLinks) { return this.addDownloading( renderEmoji({ @@ -128,6 +138,27 @@ export class MessageBody extends React.Component { ); } + const bodyContents = this.addDownloading( + { + return renderEmoji({ + i18n, + text: nonLinkText, + sizeClass, + key, + renderNonEmoji: renderNewLines, + isGroup, + convoId, + }); + }} + /> + ); + + console.log('[vince] bodyContents:', bodyContents); + + return this.addDownloading( { dateString = 'now'; } - dateString.replace('minutes', 'mins'); + dateString = dateString + .replace('minutes', 'mins') + .replace('minute', 'min'); } return ( diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index 633550dc7..efd7d9c6b 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -14,7 +14,7 @@ import { SignalService } from '../../../../ts/protobuf'; import { Constants } from '../../../session'; -import { toArray, Twemoji } from 'react-emoji-render'; +import { toArray } from 'react-emoji-render'; interface Props { @@ -33,7 +33,6 @@ interface Props { interface State { message: string; - nativeMessage: string; // Message with native emojis showRecordingView: boolean; mediaSetting: boolean | null; @@ -53,7 +52,6 @@ export class SessionCompositionBox extends React.Component { this.state = { message: '', - nativeMessage: '', attachments: [], voiceRecording: undefined, showRecordingView: false, @@ -265,18 +263,31 @@ export class SessionCompositionBox extends React.Component { this.setState({ attachments }); } - private onKeyDown(event: any) { + private async onKeyDown(event: any) { if (event.key === 'Enter' && !event.shiftKey) { // If shift, newline. Else send message. event.preventDefault(); - this.onSendMessage(); + await this.onSendMessage(); } else if (event.key === 'Escape' && this.state.showEmojiPanel) { this.hideEmojiPanel(); } } - private onSendMessage() { - const messagePlaintext = this.state.nativeMessage; + private parseEmojis(value: string) { + const emojisArray = toArray(value); + + // toArray outputs React elements for emojis and strings for other + return emojisArray.reduce((previous: string, current: any) => { + if (typeof current === 'string') { + return previous + current; + } + return previous + (current.props.children as string); + }, ''); + } + + private async onSendMessage() { + const messagePlaintext = this.parseEmojis(this.state.message); + if (!messagePlaintext) { return; } @@ -290,12 +301,11 @@ export class SessionCompositionBox extends React.Component { // handle Attachments const { attachments } = this.state; - // Handle emojis - // Send message this.props.onMessageSending(); - this.props + try { + await this.props .sendMessage( messagePlaintext, attachments, @@ -303,22 +313,22 @@ export class SessionCompositionBox extends React.Component { undefined, null, {} - ) - .then(() => { - // Message sending sucess - this.props.onMessageSuccess(); - - // Empty attachments - // Empty composition box - this.setState({ - message: '', - attachments: [], - }); - }) - .catch(() => { - // Message sending failed - this.props.onMessageFailure(); + ); + + // Message sending sucess + this.props.onMessageSuccess(); + + // Empty attachments + // Empty composition box + this.setState({ + message: '', + attachments: [], + showEmojiPanel: false, }); + } catch (e) { + // Message sending failed + this.props.onMessageFailure(); + } } private async sendVoiceMessage(audioBlob: Blob) { @@ -397,21 +407,15 @@ export class SessionCompositionBox extends React.Component { return; } - const { message, nativeMessage } = this.state; + const { message } = this.state; const currentSelectionStart = Number(messageBox.selectionStart); const currentSelectionEnd = Number(messageBox.selectionEnd); - const getNewMessage = (comparisonMessage: any, emojiSorter: any) => { - const before = comparisonMessage.slice(0, currentSelectionStart); - const end = comparisonMessage.slice(currentSelectionEnd); - return `${before}${colons}${end}`; - }; - - - const newMessage = getNewMessage(message, colons); - const newNativeMessage = getNewMessage(nativeMessage, native); + const before = message.slice(0, currentSelectionStart); + const end = message.slice(currentSelectionEnd); + const newMessage = `${before}${colons}${end}`; - this.setState({ message: newMessage, nativeMessage: newNativeMessage }, () => { + this.setState({ message: newMessage }, () => { // update our selection because updating text programmatically // will put the selection at the end of the textarea const selectionStart = currentSelectionStart + Number(colons.length);