emoji-definition-reversion

js/models/conversations.js

@@ -1249,6 +1249,8 @@
     ) {
       this.clearTypingTimers();
 
+      console.log('[vince] body:', body);
+
       const destination = this.id;
       const expireTimer = this.get('expireTimer');
       const recipients = this.getRecipients();

stylesheets/_emoji.scss

@@ -47,20 +47,20 @@ img.emoji {
 }
 
 img.emoji.small {
-  width: 1.25em;
-  height: 1.25em;
+  width: 1.10em;
+  height: 1.10em;
 }
 img.emoji.medium {
-  width: 1.75em;
-  height: 1.75em;
+  width: 1.30em;
+  height: 1.30em;
 }
 img.emoji.large {
-  width: 2.5em;
-  height: 2.5em;
+  width: 1.7em;
+  height: 1.7em;
 }
 img.emoji.jumbo {
-  width: 3em;
-  height: 3em;
+  width: 2em;
+  height: 2em;
 }
 
 // we need these, or we'll make conversation items too big in the left-nav

ts/components/conversation/Emojify.tsx

@@ -4,50 +4,12 @@ import classNames from 'classnames';
 import is from '@sindresorhus/is';
 
 import {
-  findImage,
   getRegex,
-  getReplacementData,
-  getTitle,
   SizeClassType,
 } from '../../util/emoji';
 
 import { LocalizerType, RenderTextCallbackType } from '../../types/Util';
-
-// Some of this logic taken from emoji-js/replacement
-function getImageTag({
-  match,
-  sizeClass,
-  key,
-  i18n,
-}: {
-  match: any;
-  sizeClass?: SizeClassType;
-  key: string | number;
-  i18n: LocalizerType;
-}) {
-  const result = getReplacementData(match[0], match[1], match[2]);
-
-  if (is.string(result)) {
-    return <span key={key}>{match[0]}</span>;
-  }
-
-  const img = findImage(result.value, result.variation);
-  const title = getTitle(result.value);
-
-  return (
-    // tslint:disable-next-line react-a11y-img-has-alt
-    <img
-      key={key}
-      src={img.path}
-      // We can't use alt or it will be what is captured when a user copies message
-      //   contents ("Emoji of ':1'"). Instead, we want the title to be copied (':+1:').
-      aria-label={i18n('emojiAlt', [title || ''])}
-      className={classNames('emoji', sizeClass)}
-      data-codepoints={img.full_idx}
-      title={`:${title}:`}
-    />
-  );
-}
+import { Twemoji } from 'react-emoji-render';
 
 interface Props {
   text: string;
@@ -105,7 +67,39 @@ export class Emojify extends React.Component<Props> {
         );
       }
 
-      results.push(getImageTag({ match, sizeClass, key: count++, i18n }));
+      let size = 1.00;
+      switch (sizeClass) {
+        case 'jumbo':
+          size = 2.00;
+          break;
+        case 'large':
+          size = 1.80;
+          break;
+        case 'medium':
+          size = 1.50;
+          break;
+        case 'small':
+          size = 1.10;
+          break;
+        default:
+      }
+
+      const style = {
+        fontSize: `${size}em`,
+      };
+
+      results.push(
+        <Twemoji
+          style={style}
+          key={count++}
+          text={text}
+          options={{
+            baseUrl: 'images/twemoji/',
+            protocol: '',
+            ext: 'png',
+          }}
+        />
+      );
 
       last = regex.lastIndex;
       match = regex.exec(text);

ts/components/conversation/Timestamp.tsx

@@ -59,7 +59,7 @@ export class Timestamp extends React.Component<Props> {
     // Use relative time for under 24hrs ago.
     const now = Math.floor(Date.now());
     const messageAgeInDays =
-      (now - timestamp) / (1000 * window.CONSTANTS.SECS_IN_DAY);
+      (now - timestamp) / (window.CONSTANTS.SECS_IN_DAY * 1000);
     const daysBeforeRelativeTiming = 1;
 
     let dateString;
@@ -68,7 +68,11 @@ export class Timestamp extends React.Component<Props> {
     } else {
       dateString = moment(timestamp).fromNow();
       // Prevent times reading "NOW AGO"
-      if (dateString.startsWith('now')) dateString = 'now';
+      if (dateString.startsWith('now')) {
+        dateString = 'now';
+      }
+
+      dateString.replace('minutes', 'mins');
     }
 
     return (

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -33,8 +33,7 @@ interface Props {
 
 interface State {
   message: string;
-  messageSpaced: string;
-  messageJSX: JSX.Element;
+  nativeMessage: string; // Message with native emojis
   showRecordingView: boolean;
 
   mediaSetting: boolean | null;
@@ -54,8 +53,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
 
     this.state = {
       message: '',
-      messageSpaced: '',
-      messageJSX: <></>,
+      nativeMessage: '',
       attachments: [],
       voiceRecording: undefined,
       showRecordingView: false,
@@ -161,7 +159,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
 
   private renderCompositionView() {
     const { placeholder } = this.props;
-    const { showEmojiPanel, message, messageSpaced, messageJSX } = this.state;
+    const { showEmojiPanel, message } = this.state;
 
     return (
       <>
@@ -191,9 +189,6 @@ export class SessionCompositionBox extends React.Component<Props, State> {
           role="main"
           onClick={this.focusCompositionBox}
         >
-          <span className="send-message-input__emoji-overlay">
-            {messageJSX}
-          </span>
           <TextareaAutosize
             rows={1}
             maxRows={3}
@@ -202,12 +197,9 @@ export class SessionCompositionBox extends React.Component<Props, State> {
             placeholder={placeholder}
             maxLength={Constants.CONVERSATION.MAX_MESSAGE_BODY_LENGTH}
             onKeyDown={this.onKeyDown}
-            value={messageSpaced}
+            value={message}
             onChange={this.onChange}
-          >
-            {messageJSX}
-          </TextareaAutosize>
-
+          />
         </div>
 
         <SessionIconButton
@@ -284,7 +276,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
   }
 
   private onSendMessage() {
-    const messagePlaintext = this.state.message;
+    const messagePlaintext = this.state.nativeMessage;
     if (!messagePlaintext) {
       return;
     }
@@ -355,8 +347,6 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       // success!
     }
 
-    console.log(`[compositionbox] Sending voice message:`, audioBlob);
-
     this.onExitVoiceNoteView();
   }
 
@@ -407,14 +397,21 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       return;
     }
 
-    const { message } = this.state;
+    const { message, nativeMessage } = this.state;
     const currentSelectionStart = Number(messageBox.selectionStart);
     const currentSelectionEnd = Number(messageBox.selectionEnd);
-    const before = message.slice(0, currentSelectionStart);
-    const end = message.slice(currentSelectionEnd);
-    const newMessage = `${before}${colons}${end}`;
 
-    this.setState({ message: newMessage }, () => {
+    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);
+
+    this.setState({ message: newMessage, nativeMessage: newNativeMessage }, () => {
       // update our selection because updating text programmatically
       // will put the selection at the end of the textarea
       const selectionStart = currentSelectionStart + Number(colons.length);