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 <thib@sitedethib.com>
---
.../features/emoji/__tests__/emoji-test.js | 10 ++++++++++
app/javascript/mastodon/features/emoji/emoji.js | 15 ++++++++++-----
2 files changed, 20 insertions(+), 5 deletions(-)
diff --git a/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js b/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js
index 36bbde0c0..07b3d8c53 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('<img draggable="false" class="emojione" alt="✴" title=":eight_pointed_black_star:" src="/emoji/2734_border.svg" />');
});
+
+ it('does an simple emoji properly', () => {
+ expect(emojify('♀♂'))
+ .toEqual('<img draggable="false" class="emojione" alt="♀" title=":female_sign:" src="/emoji/2640.svg" /><img draggable="false" class="emojione" alt="♂" title=":male_sign:" src="/emoji/2642.svg" />');
+ });
+
+ it('does an emoji containing ZWJ properly', () => {
+ expect(emojify('💂â€â™€ï¸ðŸ’‚â€â™‚ï¸'))
+ .toEqual('<img draggable="false" class="emojione" alt="💂\u200D♀ï¸" title=":female-guard:" src="/emoji/1f482-200d-2640-fe0f_border.svg" /><img draggable="false" class="emojione" alt="💂\u200D♂ï¸" title=":male-guard:" src="/emoji/1f482-200d-2642-fe0f_border.svg" />');
+ });
});
});
diff --git a/app/javascript/mastodon/features/emoji/emoji.js b/app/javascript/mastodon/features/emoji/emoji.js
index 7bcda63eb..f7d3cfd08 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 || '';
+// Convert to file names from emojis. (For different variation selector emojis)
+const emojiFilenames = (emojis) => {
+ return emojis.map(v => unicodeMapping[v].filename);
+};
+
// Emoji requiring extra borders depending on theme
-const darkEmoji = '🎱ðŸœâš«ðŸ–¤â¬›â—¼ï¸â—¾â—¼ï¸âœ’ï¸â–ªï¸ðŸ’£ðŸŽ³ðŸ“·ðŸ“¸â™£ï¸ðŸ•¶ï¸âœ´ï¸ðŸ”ŒðŸ’‚â€â™€ï¸ðŸ“½ï¸ðŸ³ðŸ¦ðŸ’‚🔪🕳ï¸ðŸ•¹ï¸ðŸ•‹ðŸ–Šï¸ðŸ–‹ï¸ðŸ’‚â€â™‚ï¸ðŸŽ¤ðŸŽ“🎥🎼♠ï¸ðŸŽ©ðŸ¦ƒðŸ“¼ðŸ“¹ðŸŽ®ðŸƒðŸ´';
-const lightEmoji = '👽⚾ðŸ”â˜ï¸ðŸ’¨ðŸ•Šï¸ðŸ‘€ðŸ¥ðŸ‘»ðŸâ•â”⛸ï¸ðŸŒ©ï¸ðŸ”ŠðŸ”‡ðŸ“ƒðŸŒ§ï¸ðŸðŸšðŸ™ðŸ“ðŸ‘💀☠ï¸ðŸŒ¨ï¸ðŸ”‰ðŸ”ˆðŸ’¬ðŸ’ðŸðŸ³ï¸âšªâ¬œâ—½â—»ï¸â–«ï¸';
+const darkEmoji = emojiFilenames(['🎱', 'ðŸœ', 'âš«', '🖤', '⬛', 'â—¼ï¸', 'â—¾', 'â—¼ï¸', '✒ï¸', 'â–ªï¸', '💣', '🎳', '📷', '📸', '♣ï¸', '🕶ï¸', '✴ï¸', '🔌', '💂â€â™€ï¸', '📽ï¸', 'ðŸ³', 'ðŸ¦', '💂', '🔪', '🕳ï¸', '🕹ï¸', '🕋', '🖊ï¸', '🖋ï¸', '💂â€â™‚ï¸', '🎤', '🎓', '🎥', '🎼', 'â™ ï¸', '🎩', '🦃', '📼', '📹', '🎮', 'ðŸƒ', 'ðŸ´']);
+const lightEmoji = emojiFilenames(['👽', 'âš¾', 'ðŸ”', 'â˜ï¸', '💨', '🕊ï¸', '👀', 'ðŸ¥', '👻', 'ðŸ', 'â•', 'â”', '⛸ï¸', '🌩ï¸', '🔊', '🔇', '📃', '🌧ï¸', 'ðŸ', 'ðŸš', 'ðŸ™', 'ðŸ“', 'ðŸ‘', '💀', '☠ï¸', '🌨ï¸', '🔉', '🔈', '💬', 'ðŸ’', 'ðŸ', 'ðŸ³ï¸', '⚪', '⬜', 'â—½', 'â—»ï¸', 'â–«ï¸']);
-const emojiFilename = (filename, match) => {
+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 = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${assetHost}/emoji/${emojiFilename(filename, match)}.svg" />`;
+ replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${assetHost}/emoji/${emojiFilename(filename)}.svg" />`;
rend = i + match.length;
// If the matched character was followed by VS15 (for selecting text presentation), skip it.
if (str.codePointAt(rend) === 65038) {
--
GitLab