treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Fix characters being emojified even when using Variation Selector 15 (text) (#20949)

pull/59/head^2
Claire 2023-04-20 16:43:55 +02:00 committed by GitHub
parent faf657d709
commit 37886c28da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/features/emoji/__tests__/emoji-test.js
View File

@ -74,9 +74,9 @@ describe('emoji', () => {
.toEqual('<span class="invisible">😄<br>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/emoji/1f607.svg">'); .toEqual('<span class="invisible">😄<br>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/emoji/1f607.svg">');
}); });
it('skips the textual presentation VS15 character', () => { it('does not emojify emojis with textual presentation VS15 character', () => {
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('✴︎');
}); });
it('does an simple emoji properly', () => { it('does an simple emoji properly', () => {

74
app/javascript/mastodon/features/emoji/emoji.js
View File

@ -20,13 +20,18 @@ const emojiFilename = (filename) => {
}; };
const emojifyTextNode = (node, customEmojis) => { const emojifyTextNode = (node, customEmojis) => {
const VS15 = 0xFE0E;
const VS16 = 0xFE0F;
let str = node.textContent; let str = node.textContent;
const fragment = new DocumentFragment(); const fragment = new DocumentFragment();
let i = 0;
for (;;) { for (;;) {
let match, i = 0; let match;
// Skip to the next potential emoji to replace
if (customEmojis === null) { if (customEmojis === null) {
while (i < str.length && !(match = trie.search(str.slice(i)))) { while (i < str.length && !(match = trie.search(str.slice(i)))) {
i += str.codePointAt(i) < 65536 ? 1 : 2; i += str.codePointAt(i) < 65536 ? 1 : 2;
@ -37,51 +42,58 @@ const emojifyTextNode = (node, customEmojis) => {
} }
} }
let rend, replacement = null; // We reached the end of the string, nothing to replace
if (i === str.length) { if (i === str.length) {
break; break;
} else if (str[i] === ':') { }
if (!(() => {
rend = str.indexOf(':', i + 1) + 1; let rend, replacement = null;
if (!rend) return false; // no pair of ':' if (str[i] === ':') { // Potentially the start of a custom emoji shortcode
const shortname = str.slice(i, rend); if (!(rend = str.indexOf(':', i + 1) + 1)) {
// now got a replacee as ':shortname:' continue; // no pair of ':'
// if you want additional emoji handler, add statements below which set replacement and return true. }
if (shortname in customEmojis) {
const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url; const shortname = str.slice(i, rend);
replacement = document.createElement('img'); // now got a replacee as ':shortname:'
replacement.setAttribute('draggable', 'false'); // if you want additional emoji handler, add statements below which set replacement and return true.
replacement.setAttribute('class', 'emojione custom-emoji'); if (shortname in customEmojis) {
replacement.setAttribute('alt', shortname); const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url;
replacement.setAttribute('title', shortname); replacement = document.createElement('img');
replacement.setAttribute('src', filename); replacement.setAttribute('draggable', 'false');
replacement.setAttribute('data-original', customEmojis[shortname].url); replacement.setAttribute('class', 'emojione custom-emoji');
replacement.setAttribute('data-static', customEmojis[shortname].static_url); replacement.setAttribute('alt', shortname);
return true; replacement.setAttribute('title', shortname);
} replacement.setAttribute('src', filename);
return false; replacement.setAttribute('data-original', customEmojis[shortname].url);
})()) rend = ++i; replacement.setAttribute('data-static', customEmojis[shortname].static_url);
} else {
continue;
}
} else { // matched to unicode emoji } else { // matched to unicode emoji
rend = i + match.length;
// If the matched character was followed by VS15 (for selecting text presentation), skip it.
if (str.codePointAt(rend - 1) !== VS16 && str.codePointAt(rend) === VS15) {
i = rend + 1;
continue;
}
const { filename, shortCode } = unicodeMapping[match]; const { filename, shortCode } = unicodeMapping[match];
const title = shortCode ? `:${shortCode}:` : ''; const title = shortCode ? `:${shortCode}:` : '';
replacement = document.createElement('img'); replacement = document.createElement('img');
replacement.setAttribute('draggable', 'false'); replacement.setAttribute('draggable', 'false');
replacement.setAttribute('class', 'emojione'); replacement.setAttribute('class', 'emojione');
replacement.setAttribute('alt', match); replacement.setAttribute('alt', match);
replacement.setAttribute('title', title); replacement.setAttribute('title', title);
replacement.setAttribute('src', `${assetHost}/emoji/${emojiFilename(filename)}.svg`); replacement.setAttribute('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) {
rend += 1;
}
} }
// Add the processed-up-to-now string and the emoji replacement
fragment.append(document.createTextNode(str.slice(0, i))); fragment.append(document.createTextNode(str.slice(0, i)));
if (replacement) { fragment.append(replacement);
fragment.append(replacement);
}
str = str.slice(rend); str = str.slice(rend);
i = 0;
} }
fragment.append(document.createTextNode(str)); fragment.append(document.createTextNode(str));