[Glitch] Fix emoji rewrite adding unnecessary curft to the DOM for mo…

…st emoji Port 44f5f1f to glitch-soc Signed-off-by: Claire <[email protected]>
glitch-soc · Feb 4, 2025 · c59f879 · c59f879
1 parent 1dbeac2
commit c59f879
Showing 1 changed file with 16 additions and 16 deletions.
diff --git a/app/javascript/flavours/glitch/features/emoji/emoji.js b/app/javascript/flavours/glitch/features/emoji/emoji.js
@@ -97,30 +97,30 @@ const emojifyTextNode = (node, customEmojis) => {
       const { filename, shortCode } = unicodeMapping[unicode_emoji];
       const title = shortCode ? `:${shortCode}:` : '';
 
-      replacement = document.createElement('picture');
-
       const isSystemTheme = !!document.body?.classList.contains('theme-system');
 
-      if(isSystemTheme) {
-        let source = document.createElement('source');
-        source.setAttribute('media', '(prefers-color-scheme: dark)');
-        source.setAttribute('srcset', `${assetHost}/emoji/${emojiFilename(filename, "dark")}.svg`);
-        replacement.appendChild(source);
-      }
+      const theme = (isSystemTheme || document.body?.classList.contains('theme-mastodon-light')) ? 'light' : 'dark';
+
+      const imageFilename = emojiFilename(filename, theme);
 
-      let img = document.createElement('img');
+      const img = document.createElement('img');
       img.setAttribute('draggable', 'false');
       img.setAttribute('class', 'emojione');
       img.setAttribute('alt', unicode_emoji);
       img.setAttribute('title', title);
+      img.setAttribute('src', `${assetHost}/emoji/${imageFilename}.svg`);
 
-      let theme = "light";
+      if (isSystemTheme && imageFilename !== emojiFilename(filename, 'dark')) {
+        replacement = document.createElement('picture');
 
-      if(!isSystemTheme && !document.body?.classList.contains('skin-mastodon-light'))
-        theme = "dark";
-
-      img.setAttribute('src', `${assetHost}/emoji/${emojiFilename(filename, theme)}.svg`);
-      replacement.appendChild(img);
+        const source = document.createElement('source');
+        source.setAttribute('media', '(prefers-color-scheme: dark)');
+        source.setAttribute('srcset', `${assetHost}/emoji/${emojiFilename(filename, 'dark')}.svg`);
+        replacement.appendChild(source);
+        replacement.appendChild(img);
+      } else {
+        replacement = img;
+      }
     }
 
     // Add the processed-up-to-now string and the emoji replacement
@@ -135,7 +135,7 @@ const emojifyTextNode = (node, customEmojis) => {
 };
 
 const emojifyNode = (node, customEmojis) => {
-  for (const child of node.childNodes) {
+  for (const child of Array.from(node.childNodes)) {
     switch(child.nodeType) {
     case Node.TEXT_NODE:
       emojifyTextNode(child, customEmojis);