From f8663ed28b86017e9f3d7295b8b56d27ee3bb4d8 Mon Sep 17 00:00:00 2001 From: Mac Carrithers Date: Wed, 23 Aug 2017 17:19:04 +0300 Subject: [PATCH 1/2] 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 `${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", From 70ea6e73a043c97bbd829d1f708dc240d1978131 Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Wed, 23 Aug 2017 17:34:20 +0300 Subject: [PATCH 2/2] Add findEmoji tests --- .../handlebars/ircmessageparser/findEmoji.js | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 test/client/js/libs/handlebars/ircmessageparser/findEmoji.js diff --git a/test/client/js/libs/handlebars/ircmessageparser/findEmoji.js b/test/client/js/libs/handlebars/ircmessageparser/findEmoji.js new file mode 100644 index 00000000..1360fa6d --- /dev/null +++ b/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); + }); +});