merge devel

src/widgets/chat-message.jsx

@@ -159,6 +159,7 @@ class BaseChatMessage extends React.PureComponent {
     const sideClass = this.props.sequence + ' ' + (this.props.response ? 'left' : 'right');
     const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ? 'bubble tip' : 'bubble';
     const avatar = this.props.userAvatar || true;
+    let textSizeClass = 'message-content';
     const fullDisplay = (this.props.isGroup && this.props.response &&
       (this.props.sequence == 'single' || this.props.sequence == 'last'));
 
@@ -185,7 +186,14 @@ class BaseChatMessage extends React.PureComponent {
       }, this);
       const tree = Drafty.format(content, fullFormatter, this.formatterContext);
       content = React.createElement(React.Fragment, null, tree);
-    } else if (typeof content != 'string') {
+    } else if (typeof content == 'string') {
+      // Make font bigger for emoji-only messages.
+      // Must use 'new RegExp(...)' because React does not like /{1-5}/.
+      if (new RegExp('^\\p{RGI_Emoji}{1,5}$', 'v').test(content || '')) {
+        // Content consists of 1-5 emoji characters. Count how many and use it to increase the font size.
+        textSizeClass += ' emoji-' + (content || '').match(/\p{RGI_Emoji}/vg).length;
+      }
+    } else {
       content = <><i className="material-icons gray">warning_amber</i> <i className="gray">
         <FormattedMessage id="invalid_content"
           defaultMessage="invalid content" description="Shown when the message is unreadable" /></i></>
@@ -207,7 +215,7 @@ class BaseChatMessage extends React.PureComponent {
         <div>
           <div className={bubbleClass}>
             <div className="content-meta">
-              <div className="message-content">
+              <div className={textSizeClass}>
                 {content}
                 {attachments}
               </div>