diff --git a/app/javascript/flavours/glitch/features/emoji/emoji.js b/app/javascript/flavours/glitch/features/emoji/emoji.js
index 50a3991147..4f33200b6c 100644
--- a/app/javascript/flavours/glitch/features/emoji/emoji.js
+++ b/app/javascript/flavours/glitch/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 if (!useSystemEmojiFont) { // 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);
}