diff --git a/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js b/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js
index 2f19aab7e..72a732e3b 100644
--- a/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js
+++ b/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js
@@ -88,5 +88,10 @@ describe('emoji', () => {
expect(emojify('šāāļøšāāļø'))
.toEqual('![:female-guard: š\u200Dāļø](/emoji/1f482-200d-2640-fe0f_border.svg)
');
});
+
+ it('keeps ordering as expected (issue fixed by PR 20677)', () => {
+ expect(emojify('
š #foo test: foo.
'))
+ .toEqual('
#foo test: foo.
');
+ });
});
});
diff --git a/app/javascript/mastodon/features/emoji/emoji.js b/app/javascript/mastodon/features/emoji/emoji.js
index 52a8458fb..bc3dd8c60 100644
--- a/app/javascript/mastodon/features/emoji/emoji.js
+++ b/app/javascript/mastodon/features/emoji/emoji.js
@@ -19,8 +19,6 @@ const emojiFilename = (filename) => {
return borderedEmoji.includes(filename) ? (filename + '_border') : filename;
};
-const domParser = new DOMParser();
-
const emojifyTextNode = (node, customEmojis) => {
let str = node.textContent;
@@ -39,7 +37,7 @@ const emojifyTextNode = (node, customEmojis) => {
}
}
- let rend, replacement = '';
+ let rend, replacement = null;
if (i === str.length) {
break;
} else if (str[i] === ':') {
@@ -51,7 +49,14 @@ const emojifyTextNode = (node, customEmojis) => {
// 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;
- replacement = `
`;
+ replacement = document.createElement('img');
+ replacement.setAttribute('draggable', false);
+ replacement.setAttribute('class', 'emojione custom-emoji');
+ replacement.setAttribute('alt', shortname);
+ replacement.setAttribute('title', shortname);
+ replacement.setAttribute('src', filename);
+ replacement.setAttribute('data-original', customEmojis[shortname].url);
+ replacement.setAttribute('data-static', customEmojis[shortname].static_url);
return true;
}
return false;
@@ -59,7 +64,12 @@ const emojifyTextNode = (node, customEmojis) => {
} else { // matched to unicode emoji
const { filename, shortCode } = unicodeMapping[match];
const title = shortCode ? `:${shortCode}:` : '';
- replacement = `
`;
+ replacement = document.createElement('img');
+ replacement.setAttribute('draggable', false);
+ replacement.setAttribute('class', 'emojione');
+ replacement.setAttribute('alt', match);
+ replacement.setAttribute('title', title);
+ 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) {
@@ -69,9 +79,8 @@ const emojifyTextNode = (node, customEmojis) => {
fragment.append(document.createTextNode(str.slice(0, i)));
if (replacement) {
- fragment.append(domParser.parseFromString(replacement, 'text/html').documentElement.getElementsByTagName('img')[0]);
+ fragment.append(replacement);
}
- node.textContent = str.slice(0, i);
str = str.slice(rend);
}