From f8663ed28b86017e9f3d7295b8b56d27ee3bb4d8 Mon Sep 17 00:00:00 2001
From: Mac Carrithers <mac@carrithers.me>
Date: Wed, 23 Aug 2017 17:19:04 +0300
Subject: [PATCH] Parse emoji to make them bigger

---
 client/css/style.css                          | 14 +++++++++----
 .../handlebars/ircmessageparser/findEmoji.js  | 20 +++++++++++++++++++
 client/js/libs/handlebars/parse.js            |  5 +++++
 package.json                                  |  1 +
 4 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 client/js/libs/handlebars/ircmessageparser/findEmoji.js

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 `<span class="inline-channel" role="button" tabindex="0" data-chan="${escapedChannel}">${fragments}</span>`;
+		} else if (textPart.emoji) {
+			return `<span class="emoji">${fragments}</span>`;
 		}
 
 		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",