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>
master
fuyu 4 years ago committed by GitHub
parent 91055f497f
commit b1484cf3ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 10
      app/javascript/mastodon/features/emoji/__tests__/emoji-test.js
  2. 15
      app/javascript/mastodon/features/emoji/emoji.js

@ -78,5 +78,15 @@ describe('emoji', () => {
expect(emojify('✴')) // This is U+2734 EIGHT POINTED BLACK STAR then U+FE0E VARIATION SELECTOR-15 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" />'); .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" />');
});
}); });
}); });

@ -6,13 +6,18 @@ const trie = new Trie(Object.keys(unicodeMapping));
const assetHost = process.env.CDN_HOST || ''; 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 // Emoji requiring extra borders depending on theme
const darkEmoji = '🎱🐜⚫🖤⬛◼◾◼💣🎳📷📸♣🕶🔌💂📽🍳🦍💂🔪🕳🕹🕋🖊🖋💂🎤🎓🎥🎼♠🎩🦃📼📹🎮🐃🏴'; const darkEmoji = emojiFilenames(['🎱', '🐜', '', '🖤', '', '', '', '', '', '', '💣', '🎳', '📷', '📸', '', '🕶', '', '🔌', '💂', '📽', '🍳', '🦍', '💂', '🔪', '🕳', '🕹', '🕋', '🖊', '🖋', '💂', '🎤', '🎓', '🎥', '🎼', '', '🎩', '🦃', '📼', '📹', '🎮', '🐃', '🏴']);
const lightEmoji = '👽⚾🐔☁💨🕊👀🍥👻🐐❕❔⛸🌩🔊🔇📃🌧🐏🍚🍙🐓🐑💀☠🌨🔉🔈💬💭🏐🏳⚪⬜◽◻'; const lightEmoji = emojiFilenames(['👽', '', '🐔', '', '💨', '🕊', '👀', '🍥', '👻', '🐐', '', '', '', '🌩', '🔊', '🔇', '📃', '🌧', '🐏', '🍚', '🍙', '🐓', '🐑', '💀', '', '🌨', '🔉', '🔈', '💬', '💭', '🏐', '🏳', '', '', '', '', '']);
const emojiFilename = (filename, match) => { const emojiFilename = (filename) => {
const borderedEmoji = (document.body && document.body.classList.contains('theme-mastodon-light')) ? lightEmoji : darkEmoji; 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 = {}) => { const emojify = (str, customEmojis = {}) => {
@ -69,7 +74,7 @@ const emojify = (str, customEmojis = {}) => {
} else { // matched to unicode emoji } else { // matched to unicode emoji
const { filename, shortCode } = unicodeMapping[match]; const { filename, shortCode } = unicodeMapping[match];
const title = shortCode ? `:${shortCode}:` : ''; 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; rend = i + match.length;
// If the matched character was followed by VS15 (for selecting text presentation), skip it. // If the matched character was followed by VS15 (for selecting text presentation), skip it.
if (str.codePointAt(rend) === 65038) { if (str.codePointAt(rend) === 65038) {

Loading…
Cancel
Save