diff --git a/app/soapbox/features/emoji/__tests__/emoji.test.ts b/app/soapbox/features/emoji/__tests__/emoji.test.ts
index 83b6ef14d..df6798ef7 100644
--- a/app/soapbox/features/emoji/__tests__/emoji.test.ts
+++ b/app/soapbox/features/emoji/__tests__/emoji.test.ts
@@ -88,5 +88,10 @@ describe('emoji', () => {
expect(emojify('šāāļøšāāļø'))
.toEqual('
');
});
+
+ it('keeps ordering as expected (issue fixed by PR 20677)', () => {
+ expect(emojify('
š #foo test: foo.
'))
+ .toEqual('
#foo test: foo.
');
+ });
});
});
diff --git a/app/soapbox/features/emoji/emoji.js b/app/soapbox/features/emoji/emoji.js
index 9eadddbc6..e9b4caa35 100644
--- a/app/soapbox/features/emoji/emoji.js
+++ b/app/soapbox/features/emoji/emoji.js
@@ -6,8 +6,6 @@ import unicodeMapping from './emoji-unicode-mapping-light';
const trie = new Trie(Object.keys(unicodeMapping));
-const domParser = new DOMParser();
-
const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
let str = node.textContent;
@@ -26,7 +24,7 @@ const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
}
}
- let rend, replacement = '';
+ let rend, replacement = null;
if (i === str.length) {
break;
} else if (str[i] === ':') {
@@ -39,7 +37,14 @@ const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
// 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;
@@ -47,8 +52,12 @@ const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
} else { // matched to unicode emoji
const { filename, shortCode } = unicodeMapping[match];
const title = shortCode ? `:${shortCode}:` : '';
- const src = joinPublicPath(`packs/emoji/${filename}.svg`);
- replacement = `
`;
+ replacement = document.createElement('img');
+ replacement.setAttribute('draggable', false);
+ replacement.setAttribute('class', 'emojione');
+ replacement.setAttribute('alt', match);
+ replacement.setAttribute('title', title);
+ replacement.setAttribute('src', joinPublicPath(`packs/emoji/${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) {
@@ -58,7 +67,7 @@ const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
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);