Fix nodes order being sometimes mangled when rewriting emoji (#20677)

* Fix front-end emoji tests

* Fix nodes order being sometimes mangled when rewriting emoji

1 files changed, 11 insertions, 4 deletions

diff --git a/app/javascript/mastodon/features/emoji/emoji.js b/app/javascript/mastodon/features/emoji/emoji.js
index 0ab32767a..52a8458fb 100644
--- a/app/javascript/mastodon/features/emoji/emoji.js
+++ b/app/javascript/mastodon/features/emoji/emoji.js
@@ -19,10 +19,13 @@ const emojiFilename = (filename) => {
   return borderedEmoji.includes(filename) ? (filename + '_border') : filename;
 };
 
+const domParser = new DOMParser();
+
 const emojifyTextNode = (node, customEmojis) => {
-  const parentElement = node.parentElement;
   let str = node.textContent;
 
+  const fragment = new DocumentFragment();
+
   for (;;) {
     let match, i = 0;
 
@@ -64,12 +67,16 @@ 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]);
+    }
     node.textContent = str.slice(0, i);
-    parentElement.insertAdjacentHTML('beforeend', replacement);
     str = str.slice(rend);
-    node = document.createTextNode(str);
-    parentElement.append(node);
   }
+
+  fragment.append(document.createTextNode(str));
+  node.parentElement.replaceChild(fragment, node);
 };
 
 const emojifyNode = (node, customEmojis) => {