diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index 335bfb8b3..bbf417d56 100644
--- a/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -2780,7 +2780,7 @@ exports[`Storyshots Message list 1`] = `
"backgroundColor": "transparent",
"color": "#2F343D",
"fontFamily": "System",
- "fontSize": 16,
+ "fontSize": 46,
"fontWeight": "400",
}
}
@@ -2796,6 +2796,210 @@ exports[`Storyshots Message list 1`] = `
+
+ Single Emoji
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ diego.mello
+
+
+
+ 10:00 AM
+
+
+
+
+
+
+ 👏
+
+
+
+
+
+
+
+
+
@@ -3013,8 +3217,8 @@ exports[`Storyshots Message list 1`] = `
}
style={
Object {
- "height": 20,
- "width": 20,
+ "height": 50,
+ "width": 50,
}
}
/>
@@ -3027,6 +3231,654 @@ exports[`Storyshots Message list 1`] = `
"uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
}
}
+ style={
+ Object {
+ "height": 50,
+ "width": 50,
+ }
+ }
+ />
+
+
+
+
+
+
+
+
+
+ Single Custom Emojis
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ diego.mello
+
+
+
+ 10:00 AM
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Normal Emoji + Custom Emojis
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ diego.mello
+
+
+
+ 10:00 AM
+
+
+
+
+
+
+ 🤙
+
+
+
+
+
+
+
+
+
+
+
+ Four emoji
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ diego.mello
+
+
+
+ 10:00 AM
+
+
+
+
+
+
+ 🤙
+
+
+
+ 🤙🤙
+
diff --git a/app/containers/message/Markdown.js b/app/containers/message/Markdown.js
index ae8cc77af..86fc7d63a 100644
--- a/app/containers/message/Markdown.js
+++ b/app/containers/message/Markdown.js
@@ -20,6 +20,33 @@ const formatText = text => text.replace(
(match, url, title) => `[${ title }](${ url })`
);
+const emojiRanges = [
+ '\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]', // unicode emoji from https://www.regextester.com/106421
+ ':.{1,40}:', // custom emoji
+ ' |\n' // allow spaces and line breaks
+].join('|');
+
+const removeAllEmoji = str => str.replace(new RegExp(emojiRanges, 'g'), '');
+
+const isOnlyEmoji = str => !removeAllEmoji(str).length;
+
+const removeOneEmoji = str => str.replace(new RegExp(emojiRanges), '');
+
+const emojiCount = (str) => {
+ let oldLength = 0;
+ let counter = 0;
+
+ while (oldLength !== str.length) {
+ oldLength = str.length;
+ str = removeOneEmoji(str);
+ if (oldLength !== str.length) {
+ counter += 1;
+ }
+ }
+
+ return counter;
+};
+
const Markdown = React.memo(({
msg, style, rules, baseUrl, username, isEdited, numberOfLines, mentions, channels, getCustomEmoji, useMarkdown = true
}) => {
@@ -30,6 +57,7 @@ const Markdown = React.memo(({
if (m) {
m = emojify(m, { output: 'unicode' });
}
+
m = m.replace(/^\[([^\]]*)\]\(([^)]*)\)/, '').trim();
if (numberOfLines > 0) {
m = m.replace(/[\n]+/g, '\n').trim();
@@ -39,6 +67,8 @@ const Markdown = React.memo(({
return {m};
}
+ const isMessageContainsOnlyEmoji = isOnlyEmoji(m) && emojiCount(m) <= 3;
+
return (
;
+ return (
+
+ );
}
return :{content}:;
}
@@ -102,7 +139,7 @@ const Markdown = React.memo(({
}}
style={{
paragraph: styles.paragraph,
- text: styles.text,
+ text: isMessageContainsOnlyEmoji ? styles.textBig : styles.text,
codeInline: styles.codeInline,
codeBlock: styles.codeBlock,
link: styles.link,
diff --git a/app/containers/message/styles.js b/app/containers/message/styles.js
index c08467ef0..6939b3abd 100644
--- a/app/containers/message/styles.js
+++ b/app/containers/message/styles.js
@@ -39,6 +39,11 @@ export default StyleSheet.create({
...sharedStyles.textColorNormal,
...sharedStyles.textRegular
},
+ textBig: {
+ fontSize: 46,
+ ...sharedStyles.textColorNormal,
+ ...sharedStyles.textRegular
+ },
textInfo: {
fontStyle: 'italic',
fontSize: 16,
@@ -49,6 +54,10 @@ export default StyleSheet.create({
width: 20,
height: 20
},
+ customEmojiBig: {
+ width: 50,
+ height: 50
+ },
temp: { opacity: 0.3 },
marginTop: {
marginTop: 6
diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js
index 87c821384..79511c744 100644
--- a/storybook/stories/Message.js
+++ b/storybook/stories/Message.js
@@ -128,9 +128,21 @@ export default (
+
+
+
+
+
+
+
+
+
+
+
+