From b1484cf3ceebe1f1f083e4c06872493dc0a68511 Mon Sep 17 00:00:00 2001 From: fuyu <54523771+mfmfuyu@users.noreply.github.com> Date: Thu, 11 Jun 2020 04:56:14 +0900 Subject: [PATCH] Fixed emoji detection problem to append border (#14020) * Fixed emoji detection problem to append border * Add tests * Add missing semicolon * Fixed wrong result when includes different variation selector * Add missing semicolon * Remove grapheme-splitter and Change emoji list to array from string * Update comment * Remove spaces Co-authored-by: ThibG --- .../features/emoji/__tests__/emoji-test.js | 10 ++++++++++ app/javascript/mastodon/features/emoji/emoji.js | 17 +++++++++++------ 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js b/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js index 36bbde0c0f..07b3d8c53d 100644 --- a/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js +++ b/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js @@ -78,5 +78,15 @@ describe('emoji', () => { expect(emojify('✴︎')) // This is U+2734 EIGHT POINTED BLACK STAR then U+FE0E VARIATION SELECTOR-15 .toEqual('✴'); }); + + it('does an simple emoji properly', () => { + expect(emojify('♀♂')) + .toEqual('♀♂'); + }); + + it('does an emoji containing ZWJ properly', () => { + expect(emojify('💂‍♀️💂‍♂️')) + .toEqual('💂\u200D♀️💂\u200D♂️'); + }); }); }); diff --git a/app/javascript/mastodon/features/emoji/emoji.js b/app/javascript/mastodon/features/emoji/emoji.js index 7bcda63eb7..f7d3cfd08a 100644 --- a/app/javascript/mastodon/features/emoji/emoji.js +++ b/app/javascript/mastodon/features/emoji/emoji.js @@ -6,13 +6,18 @@ const trie = new Trie(Object.keys(unicodeMapping)); const assetHost = process.env.CDN_HOST || ''; -// Emoji requiring extra borders depending on theme -const darkEmoji = '🎱🐜⚫🖤⬛◼️◾◼️✒️▪️💣🎳📷📸♣️🕶️✴️🔌💂‍♀️📽️🍳🦍💂🔪🕳️🕹️🕋🖊️🖋️💂‍♂️🎤🎓🎥🎼♠️🎩🦃📼📹🎮🐃🏴'; -const lightEmoji = '👽⚾🐔☁️💨🕊️👀🍥👻🐐❕❔⛸️🌩️🔊🔇📃🌧️🐏🍚🍙🐓🐑💀☠️🌨️🔉🔈💬💭🏐🏳️⚪⬜◽◻️▫️'; +// Convert to file names from emojis. (For different variation selector emojis) +const emojiFilenames = (emojis) => { + return emojis.map(v => unicodeMapping[v].filename); +}; -const emojiFilename = (filename, match) => { +// Emoji requiring extra borders depending on theme +const darkEmoji = emojiFilenames(['🎱', '🐜', '⚫', '🖤', '⬛', '◼️', '◾', '◼️', '✒️', '▪️', '💣', '🎳', '📷', '📸', '♣️', '🕶️', '✴️', '🔌', '💂‍♀️', '📽️', '🍳', '🦍', '💂', '🔪', '🕳️', '🕹️', '🕋', '🖊️', '🖋️', '💂‍♂️', '🎤', '🎓', '🎥', '🎼', '♠️', '🎩', '🦃', '📼', '📹', '🎮', '🐃', '🏴']); +const lightEmoji = emojiFilenames(['👽', '⚾', '🐔', '☁️', '💨', '🕊️', '👀', '🍥', '👻', '🐐', '❕', '❔', '⛸️', '🌩️', '🔊', '🔇', '📃', '🌧️', '🐏', '🍚', '🍙', '🐓', '🐑', '💀', '☠️', '🌨️', '🔉', '🔈', '💬', '💭', '🏐', '🏳️', '⚪', '⬜', '◽', '◻️', '▫️']); + +const emojiFilename = (filename) => { const borderedEmoji = (document.body && document.body.classList.contains('theme-mastodon-light')) ? lightEmoji : darkEmoji; - return borderedEmoji.includes(match) ? (filename + '_border') : filename; + return borderedEmoji.includes(filename) ? (filename + '_border') : filename; }; const emojify = (str, customEmojis = {}) => { @@ -69,7 +74,7 @@ const emojify = (str, customEmojis = {}) => { } else { // matched to unicode emoji const { filename, shortCode } = unicodeMapping[match]; const title = shortCode ? `:${shortCode}:` : ''; - replacement = `${match}`; + replacement = `${match}`; rend = i + match.length; // If the matched character was followed by VS15 (for selecting text presentation), skip it. if (str.codePointAt(rend) === 65038) {