diff --git a/client/css/style.css b/client/css/style.css
index 934f3205..7215771e 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1619,6 +1619,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
color: #333;
margin-top: 6px;
margin-bottom: 6px;
+ line-height: 1.4;
transition: background-color 0.2s;
}
@@ -1643,11 +1644,16 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
opacity: 1;
}
-.textcomplete-item .emoji {
- margin-right: 8px;
- width: 16px;
- text-align: center;
+.emoji {
display: inline-block;
+ font-size: 1.4em;
+ vertical-align: bottom;
+ line-height: 1;
+}
+
+.textcomplete-item .emoji {
+ width: 32px;
+ text-align: center;
}
.textcomplete-item .irc-bg {
diff --git a/client/js/libs/handlebars/ircmessageparser/findEmoji.js b/client/js/libs/handlebars/ircmessageparser/findEmoji.js
new file mode 100644
index 00000000..15d4a9cb
--- /dev/null
+++ b/client/js/libs/handlebars/ircmessageparser/findEmoji.js
@@ -0,0 +1,20 @@
+"use strict";
+
+const emojiRegExp = require("emoji-regex")();
+
+function findEmoji(text) {
+ const result = [];
+ let match;
+
+ while ((match = emojiRegExp.exec(text))) {
+ result.push({
+ start: match.index,
+ end: match.index + match[0].length,
+ emoji: match[0]
+ });
+ }
+
+ return result;
+}
+
+module.exports = findEmoji;
diff --git a/client/js/libs/handlebars/parse.js b/client/js/libs/handlebars/parse.js
index b5e9e5d7..fdf32bdc 100644
--- a/client/js/libs/handlebars/parse.js
+++ b/client/js/libs/handlebars/parse.js
@@ -4,6 +4,7 @@ const Handlebars = require("handlebars/runtime");
const parseStyle = require("./ircmessageparser/parseStyle");
const findChannels = require("./ircmessageparser/findChannels");
const findLinks = require("./ircmessageparser/findLinks");
+const findEmoji = require("./ircmessageparser/findEmoji");
const merge = require("./ircmessageparser/merge");
// Create an HTML `span` with styling information for a given fragment
@@ -59,10 +60,12 @@ module.exports = function parse(text) {
const userModes = ["!", "@", "%", "+"]; // TODO User modes should be RPL_ISUPPORT.PREFIX
const channelParts = findChannels(cleanText, channelPrefixes, userModes);
const linkParts = findLinks(cleanText);
+ const emojiParts = findEmoji(cleanText);
// Sort all parts identified based on their position in the original text
const parts = channelParts
.concat(linkParts)
+ .concat(emojiParts)
.sort((a, b) => a.start - b.start);
// Merge the styling information with the channels / URLs / text objects and
@@ -78,6 +81,8 @@ module.exports = function parse(text) {
} else if (textPart.channel) {
const escapedChannel = Handlebars.Utils.escapeExpression(textPart.channel);
return `${fragments}`;
+ } else if (textPart.emoji) {
+ return `${fragments}`;
}
return fragments;
diff --git a/package.json b/package.json
index e7fcba68..9c81ed24 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
"babel-loader": "7.1.2",
"babel-preset-env": "1.6.0",
"chai": "4.1.1",
+ "emoji-regex": "6.5.1",
"eslint": "4.5.0",
"font-awesome": "4.7.0",
"fuzzy": "0.1.3",