Merge pull request #1446 from thelounge/parse-emoji

Parse emoji to make them bigger

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 {
+.emoji {
-	margin-right: 8px;
-	width: 16px;
-	text-align: center;
 	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 {

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;

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;

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

test/client/js/libs/handlebars/ircmessageparser/findEmoji.js

@@ -0,0 +1,58 @@
+"use strict";
+
+const expect = require("chai").expect;
+const findEmoji = require("../../../../../../client/js/libs/handlebars/ircmessageparser/findEmoji");
+
+describe("findEmoji", () => {
+	it("should find default emoji presentation character", () => {
+		const input = "test \u{231A} test";
+		const expected = [{
+			start: 5,
+			end: 6,
+			emoji: "\u{231A}",
+		}];
+
+		const actual = findEmoji(input);
+
+		expect(actual).to.deep.equal(expected);
+	});
+
+	it("should find default text presentation character rendered as emoji", () => {
+		const input = "test \u{2194}\u{FE0F} test";
+		const expected = [{
+			start: 5,
+			end: 7,
+			emoji: "\u{2194}\u{FE0F}",
+		}];
+
+		const actual = findEmoji(input);
+
+		expect(actual).to.deep.equal(expected);
+	});
+
+	it("should find emoji modifier base", () => {
+		const input = "test\u{1F469}test";
+		const expected = [{
+			start: 4,
+			end: 6,
+			emoji: "\u{1F469}",
+		}];
+
+		const actual = findEmoji(input);
+
+		expect(actual).to.deep.equal(expected);
+	});
+
+	it("should find emoji modifier base followed by a modifier", () => {
+		const input = "test\u{1F469}\u{1F3FF}test";
+		const expected = [{
+			start: 4,
+			end: 8,
+			emoji: "\u{1F469}\u{1F3FF}",
+		}];
+
+		const actual = findEmoji(input);
+
+		expect(actual).to.deep.equal(expected);
+	});
+});