From a5416e42c472a87ea3d6750ba11b153a609440ed Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Fri, 18 May 2018 12:00:46 -0700 Subject: [PATCH] Refactor all emoji utility methods into window.Signal.Emoji --- background.html | 1 - js/emoji_util.js | 91 ----------- js/signal.js | 2 + js/views/conversation_list_item_view.js | 1 - js/views/conversation_view.js | 3 +- js/views/message_view.js | 1 - preload.js | 1 - styleguide.config.js | 3 - test/emoji_util_test.js | 179 --------------------- test/index.html | 2 - test/styleguide/legacy_bridge.js | 8 - ts/components/conversation/Emojify.tsx | 110 ++----------- ts/components/conversation/MessageBody.tsx | 3 +- ts/util/emoji.ts | 113 +++++++++++++ 14 files changed, 131 insertions(+), 387 deletions(-) delete mode 100644 js/emoji_util.js delete mode 100644 test/emoji_util_test.js create mode 100644 ts/util/emoji.ts diff --git a/background.html b/background.html index d773c85b7..38c64382d 100644 --- a/background.html +++ b/background.html @@ -934,7 +934,6 @@ - diff --git a/js/emoji_util.js b/js/emoji_util.js deleted file mode 100644 index c97a4ef71..000000000 --- a/js/emoji_util.js +++ /dev/null @@ -1,91 +0,0 @@ -(function() { - 'use strict'; - window.emoji_util = window.emoji_util || {}; - - // EmojiConverter overrides - EmojiConvertor.prototype.getCountOfAllMatches = function(str, regex) { - var match = regex.exec(str); - var count = 0; - - if (!regex.global) { - return match ? 1 : 0; - } - - while (match) { - count += 1; - match = regex.exec(str); - } - - return count; - }; - - EmojiConvertor.prototype.hasNormalCharacters = function(str) { - var self = this; - var noEmoji = str.replace(self.rx_unified, '').trim(); - return noEmoji.length > 0; - }; - - EmojiConvertor.prototype.getSizeClass = function(str) { - var self = this; - - if (self.hasNormalCharacters(str)) { - return ''; - } - - var emojiCount = self.getCountOfAllMatches(str, self.rx_unified); - if (emojiCount > 8) { - return ''; - } else if (emojiCount > 6) { - return 'small'; - } else if (emojiCount > 4) { - return 'medium'; - } else if (emojiCount > 2) { - return 'large'; - } else { - return 'jumbo'; - } - }; - - var imgClass = /(]+ class="emoji)(")/g; - EmojiConvertor.prototype.addClass = function(text, sizeClass) { - if (!sizeClass) { - return text; - } - - return text.replace(imgClass, function(match, before, after) { - return before + ' ' + sizeClass + after; - }); - }; - - var imgTitle = /(]+ class="emoji[^>]+ title=")([^:">]+)(")/g; - EmojiConvertor.prototype.ensureTitlesHaveColons = function(text) { - return text.replace(imgTitle, function(match, before, title, after) { - return before + ':' + title + ':' + after; - }); - }; - - EmojiConvertor.prototype.signalReplace = function(str) { - var sizeClass = this.getSizeClass(str); - - var text = this.replace_unified(str); - text = this.addClass(text, sizeClass); - - return this.ensureTitlesHaveColons(text); - }; - - window.emoji = new EmojiConvertor(); - emoji.init_colons(); - emoji.img_sets.apple.path = - 'node_modules/emoji-datasource-apple/img/apple/64/'; - emoji.include_title = true; - emoji.replace_mode = 'img'; - emoji.supports_css = false; // needed to avoid spans with background-image - - window.emoji_util.parse = function($el) { - if (!$el || !$el.length) { - return; - } - - $el.html(emoji.signalReplace($el.html())); - }; -})(); diff --git a/js/signal.js b/js/signal.js index 02693fcfb..83abc3d91 100644 --- a/js/signal.js +++ b/js/signal.js @@ -3,6 +3,7 @@ const Backbone = require('../ts/backbone'); const Crypto = require('./modules/crypto'); const Database = require('./modules/database'); +const Emoji = require('../ts/util/emoji'); const HTML = require('../ts/html'); const Message = require('./modules/types/message'); const Notifications = require('../ts/notifications'); @@ -117,6 +118,7 @@ exports.setup = (options = {}) => { Components, Crypto, Database, + Emoji, HTML, Migrations, Notifications, diff --git a/js/views/conversation_list_item_view.js b/js/views/conversation_list_item_view.js index 0a73bcb60..2541be50b 100644 --- a/js/views/conversation_list_item_view.js +++ b/js/views/conversation_list_item_view.js @@ -75,7 +75,6 @@ this.timeStampView.setElement(this.$('.last-timestamp')); this.timeStampView.update(); - emoji_util.parse(this.$('.name')); if (lastMessage) { if (this.bodyView) { diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 713ff98a2..32cacb7a1 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -177,7 +177,6 @@ model: this.model, }); - emoji_util.parse(this.$('.conversation-name')); this.window = options.window; this.fileInput = new Whisper.FileInputView({ @@ -1331,7 +1330,7 @@ } const input = this.$messageField; - const message = this.replace_colons(input.val()).trim(); + const message = window.Signal.Emoji.replaceColons(input.val()).trim(); try { if (!message.length && !this.fileInput.hasFiles()) { diff --git a/js/views/message_view.js b/js/views/message_view.js index 417b89805..0fcb5692a 100644 --- a/js/views/message_view.js +++ b/js/views/message_view.js @@ -408,7 +408,6 @@ this.$el.addClass('control'); const content = this.$('.content'); content.text(this.model.getDescription()); - emoji_util.parse(content); } else { this.$el.removeClass('control'); } diff --git a/preload.js b/preload.js index ec425fb06..19bde4a46 100644 --- a/preload.js +++ b/preload.js @@ -91,7 +91,6 @@ const { autoOrientImage } = require('./js/modules/auto_orient_image'); window.autoOrientImage = autoOrientImage; window.dataURLToBlobSync = require('blueimp-canvas-to-blob'); -window.EmojiConvertor = require('emoji-js'); window.emojiData = require('emoji-datasource'); window.EmojiPanel = require('emoji-panel'); window.filesize = require('filesize'); diff --git a/styleguide.config.js b/styleguide.config.js index 03aee37b7..eece210d2 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -124,9 +124,6 @@ module.exports = { { src: 'js/conversation_controller.js', }, - { - src: 'js/emoji_util.js', - }, // Select Backbone views { src: 'js/views/react_wrapper_view.js', diff --git a/test/emoji_util_test.js b/test/emoji_util_test.js deleted file mode 100644 index 681adedce..000000000 --- a/test/emoji_util_test.js +++ /dev/null @@ -1,179 +0,0 @@ -'use strict'; - -describe('EmojiUtil', function() { - describe('getCountOfAllMatches', function() { - it('returns zero for string with no matches', function() { - var r = /s/g; - var str = 'no match'; - var actual = emoji.getCountOfAllMatches(str, r); - assert.equal(actual, 0); - }); - it('returns 1 for one match', function() { - var r = /s/g; - var str = 'just one match'; - var actual = emoji.getCountOfAllMatches(str, r); - assert.equal(actual, 1); - }); - it('returns 2 for two matches', function() { - var r = /s/g; - var str = 's + s'; - var actual = emoji.getCountOfAllMatches(str, r); - assert.equal(actual, 2); - }); - it('returns zero for no match with non-global regular expression', function() { - var r = /s/g; - var str = 'no match'; - var actual = emoji.getCountOfAllMatches(str, r); - assert.equal(actual, 0); - }); - it('returns 1 for match with non-global regular expression', function() { - var r = /s/; - var str = 's + s'; - var actual = emoji.getCountOfAllMatches(str, r); - assert.equal(actual, 1); - }); - }); - - describe('hasNormalCharacters', function() { - it('returns true for all normal text', function() { - var str = 'normal'; - var actual = emoji.hasNormalCharacters(str); - assert.equal(actual, true); - }); - it('returns false for all emoji text', function() { - var str = '🔥🔥🔥🔥'; - var actual = emoji.hasNormalCharacters(str); - assert.equal(actual, false); - }); - it('returns false for emojis mixed with spaces', function() { - var str = '🔥 🔥 🔥 🔥'; - var actual = emoji.hasNormalCharacters(str); - assert.equal(actual, false); - }); - it('returns true for emojis and text', function() { - var str = '🔥 normal 🔥 🔥 🔥'; - var actual = emoji.hasNormalCharacters(str); - assert.equal(actual, true); - }); - }); - - describe('getSizeClass', function() { - it('returns nothing for non-emoji text', function() { - assert.equal(emoji.getSizeClass('normal text'), ''); - }); - it('returns nothing for emojis mixed with text', function() { - assert.equal(emoji.getSizeClass('🔥 normal 🔥'), ''); - }); - it('returns nothing for more than 8 emojis', function() { - assert.equal(emoji.getSizeClass('🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥'), ''); - }); - it('returns "small" for 7-8 emojis', function() { - assert.equal(emoji.getSizeClass('🔥🔥 🔥🔥 🔥🔥 🔥🔥'), 'small'); - assert.equal(emoji.getSizeClass('🔥🔥 🔥🔥 🔥🔥 🔥'), 'small'); - }); - it('returns "medium" for 5-6 emojis', function() { - assert.equal(emoji.getSizeClass('🔥🔥 🔥🔥 🔥🔥'), 'medium'); - assert.equal(emoji.getSizeClass('🔥🔥 🔥🔥 🔥'), 'medium'); - }); - it('returns "large" for 3-4 emojis', function() { - assert.equal(emoji.getSizeClass('🔥🔥 🔥🔥'), 'large'); - assert.equal(emoji.getSizeClass('🔥🔥 🔥'), 'large'); - }); - it('returns "jumbo" for 1-2 emojis', function() { - assert.equal(emoji.getSizeClass('🔥🔥'), 'jumbo'); - assert.equal(emoji.getSizeClass('🔥'), 'jumbo'); - }); - }); - - describe('addClass', function() { - it('returns original string if no emoji images', function() { - var start = 'no images. but there is some 🔥. '; - - var expected = start; - var actual = emoji.addClass(start, 'jumbo'); - - assert.equal(expected, actual); - }); - - it('returns original string if no sizeClass provided', function() { - var start = - 'before after'; - - var expected = start; - var actual = emoji.addClass(start); - - assert.equal(expected, actual); - }); - - it('adds provided class to image class', function() { - var start = - 'before after'; - - var expected = - 'before after'; - var actual = emoji.addClass(start, 'jumbo'); - - assert.equal(expected, actual); - }); - }); - - describe('ensureTitlesHaveColons', function() { - it('returns original string if no emoji images', function() { - var start = 'no images. but there is some 🔥. '; - - var expected = start; - var actual = emoji.ensureTitlesHaveColons(start); - - assert.equal(expected, actual); - }); - - it('returns original string if image title already has colons', function() { - var start = - 'before after'; - - var expected = start; - var actual = emoji.ensureTitlesHaveColons(start); - - assert.equal(expected, actual); - }); - - it('does not change title for non-emoji image', function() { - var start = - 'before after'; - - var expected = start; - var actual = emoji.ensureTitlesHaveColons(start); - - assert.equal(expected, actual); - }); - - it('adds colons to emoji image title', function() { - var start = - 'before after'; - - var expected = - 'before after'; - var actual = emoji.ensureTitlesHaveColons(start); - - assert.equal(expected, actual); - }); - }); - - describe('signalReplace', function() { - it('returns images for every emoji', function() { - var actual = emoji.signalReplace('🏠 🔥'); - var expected = - '' + - ' '; - - assert.equal(expected, actual); - }); - it('properly hyphenates a variation', function() { - var actual = emoji.signalReplace('💪🏿'); // muscle with dark skin tone modifier - var expected = - ''; - - assert.equal(expected, actual); - }); - }); -}); diff --git a/test/index.html b/test/index.html index 23a8c3157..c4aacd441 100644 --- a/test/index.html +++ b/test/index.html @@ -592,7 +592,6 @@ - @@ -654,7 +653,6 @@ - diff --git a/test/styleguide/legacy_bridge.js b/test/styleguide/legacy_bridge.js index 4375753aa..caeb5e70c 100644 --- a/test/styleguide/legacy_bridge.js +++ b/test/styleguide/legacy_bridge.js @@ -63,14 +63,6 @@ window.Signal.Migrations = { window.Signal.Components = {}; -window.EmojiConvertor = function EmojiConvertor() {}; -window.EmojiConvertor.prototype.init_colons = () => {}; -window.EmojiConvertor.prototype.signalReplace = html => html; -window.EmojiConvertor.prototype.replace_unified = string => string; -window.EmojiConvertor.prototype.img_sets = { - apple: {}, -}; - window.i18n = () => ''; // Ideally we don't need to add things here. We want to add them in StyleGuideUtil, which diff --git a/ts/components/conversation/Emojify.tsx b/ts/components/conversation/Emojify.tsx index 654d773b9..6a323d959 100644 --- a/ts/components/conversation/Emojify.tsx +++ b/ts/components/conversation/Emojify.tsx @@ -3,90 +3,14 @@ import React from 'react'; import classnames from 'classnames'; import is from '@sindresorhus/is'; -// @ts-ignore -import EmojiConvertor from 'emoji-js'; - +import { + findImage, + getRegex, + getReplacementData, + getTitle, +} from '../../util/emoji'; import { AddNewLines } from './AddNewLines'; -function getCountOfAllMatches(str: string, regex: RegExp) { - let match = regex.exec(str); - let count = 0; - - if (!regex.global) { - return match ? 1 : 0; - } - - while (match) { - count += 1; - match = regex.exec(str); - } - - return count; -} - -function hasNormalCharacters(str: string) { - const noEmoji = str.replace(instance.rx_unified, '').trim(); - return noEmoji.length > 0; -} - -export function getSizeClass(str: string) { - if (hasNormalCharacters(str)) { - return ''; - } - - const emojiCount = getCountOfAllMatches(str, instance.rx_unified); - if (emojiCount > 8) { - return ''; - } else if (emojiCount > 6) { - return 'small'; - } else if (emojiCount > 4) { - return 'medium'; - } else if (emojiCount > 2) { - return 'large'; - } else { - return 'jumbo'; - } -} - -const VARIATION_LOOKUP: { [index: string]: string } = { - '\uD83C\uDFFB': '1f3fb', - '\uD83C\uDFFC': '1f3fc', - '\uD83C\uDFFD': '1f3fd', - '\uD83C\uDFFE': '1f3fe', - '\uD83C\uDFFF': '1f3ff', -}; - -// Taken from emoji-js/replace_unified -function getEmojiReplacementData( - m: string, - p1: string | undefined, - p2: string | undefined -) { - const unified = instance.map.unified[p1]; - if (unified) { - const variation = VARIATION_LOOKUP[p2 || '']; - if (variation) { - return { - value: unified, - variation, - }; - } - return { - value: unified, - }; - } - - const unifiedVars = instance.map.unified_vars[p1]; - if (unifiedVars) { - return { - value: unifiedVars[0], - variation: unifiedVars[1], - }; - } - - return m; -} - // Some of this logic taken from emoji-js/replacement function getImageTag({ match, @@ -97,14 +21,14 @@ function getImageTag({ sizeClass: string | undefined; key: string | number; }) { - const result = getEmojiReplacementData(match[0], match[1], match[2]); + const result = getReplacementData(match[0], match[1], match[2]); if (is.string(result)) { return {match[0]}; } - const img = instance.find_image(result.value, result.variation); - const title = instance.data[result.value][3][0]; + const img = findImage(result.value, result.variation); + const title = getTitle(result.value); return ( { public render() { const { text, sizeClass } = this.props; const results: Array = []; + const regex = getRegex(); - let match = instance.rx_unified.exec(text); + let match = regex.exec(text); let last = 0; let count = 1; @@ -152,8 +68,8 @@ export class Emojify extends React.Component { results.push(getImageTag({ match, sizeClass, key: count++ })); - last = instance.rx_unified.lastIndex; - match = instance.rx_unified.exec(text); + last = regex.lastIndex; + match = regex.exec(text); } if (last < text.length) { diff --git a/ts/components/conversation/MessageBody.tsx b/ts/components/conversation/MessageBody.tsx index c4d3935d3..703d902c9 100644 --- a/ts/components/conversation/MessageBody.tsx +++ b/ts/components/conversation/MessageBody.tsx @@ -2,7 +2,8 @@ import React from 'react'; import createLinkify from 'linkify-it'; -import { Emojify, getSizeClass } from './Emojify'; +import { getSizeClass } from '../../util/emoji'; +import { Emojify } from './Emojify'; const linkify = createLinkify(); diff --git a/ts/util/emoji.ts b/ts/util/emoji.ts new file mode 100644 index 000000000..3aa3dd708 --- /dev/null +++ b/ts/util/emoji.ts @@ -0,0 +1,113 @@ +// @ts-ignore +import EmojiConvertor from 'emoji-js'; + +const instance = new EmojiConvertor(); +instance.init_unified(); +instance.init_colons(); +instance.img_sets.apple.path = + 'node_modules/emoji-datasource-apple/img/apple/64/'; +instance.include_title = true; +instance.replace_mode = 'img'; +instance.supports_css = false; // needed to avoid spans with background-image + +export function getRegex(): RegExp { + return instance.rx_unified; +} + +export function getTitle(value: string): string | undefined { + return instance.data[value][3][0]; +} + +export function findImage(value: string, variation?: string) { + return instance.find_image(value, variation); +} + +export function replaceColons(str: string) { + return str.replace(instance.rx_colons, m => { + const name = m.substr(1, m.length - 2); + const code = instance.map.colons[name]; + if (code) { + return instance.data[code][0][0]; + } + return m; + }); +} + +function getCountOfAllMatches(str: string, regex: RegExp) { + let match = regex.exec(str); + let count = 0; + + if (!regex.global) { + return match ? 1 : 0; + } + + while (match) { + count += 1; + match = regex.exec(str); + } + + return count; +} + +function hasNormalCharacters(str: string) { + const noEmoji = str.replace(instance.rx_unified, '').trim(); + return noEmoji.length > 0; +} + +export function getSizeClass(str: string) { + if (hasNormalCharacters(str)) { + return ''; + } + + const emojiCount = getCountOfAllMatches(str, instance.rx_unified); + if (emojiCount > 8) { + return ''; + } else if (emojiCount > 6) { + return 'small'; + } else if (emojiCount > 4) { + return 'medium'; + } else if (emojiCount > 2) { + return 'large'; + } else { + return 'jumbo'; + } +} + +const VARIATION_LOOKUP: { [index: string]: string } = { + '\uD83C\uDFFB': '1f3fb', + '\uD83C\uDFFC': '1f3fc', + '\uD83C\uDFFD': '1f3fd', + '\uD83C\uDFFE': '1f3fe', + '\uD83C\uDFFF': '1f3ff', +}; + +// Taken from emoji-js/replace_unified +export function getReplacementData( + m: string, + p1: string | undefined, + p2: string | undefined +): string | { value: string; variation?: string } { + const unified = instance.map.unified[p1]; + if (unified) { + const variation = VARIATION_LOOKUP[p2 || '']; + if (variation) { + return { + value: unified, + variation, + }; + } + return { + value: unified, + }; + } + + const unifiedVars = instance.map.unified_vars[p1]; + if (unifiedVars) { + return { + value: unifiedVars[0], + variation: unifiedVars[1], + }; + } + + return m; +}