diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx
index c0975b1..6170b9f 100644
--- a/src/app/molecules/message/Message.jsx
+++ b/src/app/molecules/message/Message.jsx
@@ -3,6 +3,7 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
import PropTypes from 'prop-types';
import './Message.scss';
+import { getShortcodeToCustomEmoji } from '../../organisms/emoji-board/custom-emoji';
import { twemojify } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix';
@@ -301,12 +302,12 @@ function genReactionMsg(userIds, reaction) {
return (
<>
{userIds.map((userId, index) => (
- <>
+
{twemojify(getUsername(userId))}
{index === userIds.length - 1 ? ' and ' : ', '}
- >
+
))}
{' reacted with '}
{twemojify(reaction, { className: 'react-emoji' })}
@@ -315,8 +316,14 @@ function genReactionMsg(userIds, reaction) {
}
function MessageReaction({
- reaction, count, users, isActive, onClick,
+ shortcodeToEmoji, reaction, count, users, isActive, onClick,
}) {
+ const customEmojiMatch = reaction.match(/^:(\S+):$/);
+ let customEmojiUrl = null;
+ if (customEmojiMatch) {
+ const customEmoji = shortcodeToEmoji.get(customEmojiMatch[1]);
+ customEmojiUrl = initMatrix.matrixClient.mxcUrlToHttp(customEmoji?.mxc);
+ }
return (
- { twemojify(reaction, { className: 'react-emoji' }) }
+ {
+ customEmojiUrl
+ ?
+ : twemojify(reaction, { className: 'react-emoji' })
+ }
{count}
);
}
MessageReaction.propTypes = {
+ shortcodeToEmoji: PropTypes.shape({}).isRequired,
reaction: PropTypes.node.isRequired,
count: PropTypes.number.isRequired,
users: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -346,6 +358,7 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
const eventId = mEvent.getId();
const mx = initMatrix.matrixClient;
const reactions = {};
+ const shortcodeToEmoji = getShortcodeToCustomEmoji(roomTimeline.room);
const eventReactions = reactionTimeline.get(eventId);
const addReaction = (key, count, senderId, isActive) => {
@@ -392,6 +405,7 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
Object.keys(reactions).map((key) => (
pack.getEmojis())
+ .forEach((emoji) => {
+ allEmoji.set(emoji.shortcode, emoji);
+ });
+
+ return allEmoji;
+}
+
// Produces a special list of emoji specifically for auto-completion
//
// This list contains each emoji once, with all emoji being deduplicated by shortcode.
@@ -167,5 +179,7 @@ function getEmojiForCompletion(room) {
}
export {
- getUserImagePack, getShortcodeToEmoji, getRelevantPacks, getEmojiForCompletion,
+ getUserImagePack,
+ getShortcodeToEmoji, getShortcodeToCustomEmoji,
+ getRelevantPacks, getEmojiForCompletion,
};