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",