Merge pull request #3186 from matrix-org/jryans/reactions-allow-text

Allow diplayed reaction values to contain anything

res/css/views/messages/_ReactionsRowButton.scss

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_ReactionsRowButton {
-    display: inline-block;
+    display: inline-flex;
     height: 20px;
     line-height: 21px;
     margin-right: 6px;
@@ -35,3 +35,11 @@ limitations under the License.
         border-color: $reaction-row-button-selected-border-color;
     }
 }
+
+.mx_ReactionsRowButton_content {
+    max-width: 100px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding-right: 4px;
+}

src/HtmlUtils.js

@@ -66,19 +66,10 @@ const VARIATION_SELECTOR = String.fromCharCode(0xFE0F);
  * need emojification.
  * unicodeToImage uses this function.
  */
-export function mightContainEmoji(str) {
+function mightContainEmoji(str) {
     return SURROGATE_PAIR_PATTERN.test(str) || SYMBOL_PATTERN.test(str);
 }
 
-/**
- * Returns true if the string definitely contains a single emoji.
- * @param {String} str String to test
- * @return {Boolean}
- */
-export function isSingleEmoji(str) {
-    return mightContainEmoji(str) && SINGLE_EMOJI_REGEX.test(str);
-}
-
 /**
  * Returns the shortcode for an emoji character.
  *

src/components/views/messages/ReactionsRow.js

@@ -20,7 +20,6 @@ import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { isContentActionable } from '../../../utils/EventUtils';
-import { isSingleEmoji } from '../../../HtmlUtils';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 
 // The maximum number of reactions to initially show on a message.
@@ -115,9 +114,6 @@ export default class ReactionsRow extends React.PureComponent {
 
         const ReactionsRowButton = sdk.getComponent('messages.ReactionsRowButton');
         let items = reactions.getSortedAnnotationsByKey().map(([content, events]) => {
-            if (!isSingleEmoji(content)) {
-                return null;
-            }
             const count = events.size;
             if (!count) {
                 return null;

src/components/views/messages/ReactionsRowButton.js

@@ -101,7 +101,12 @@ export default class ReactionsRowButton extends React.PureComponent {
             onMouseOver={this.onMouseOver}
             onMouseOut={this.onMouseOut}
         >
-            {content} {count}
+            <span className="mx_ReactionsRowButton_content">
+                {content}
+            </span>
+            <span className="mx_ReactionsRowButton_count">
+                {count}
+            </span>
             {tooltip}
         </span>;
     }