Emoji: Bypass legacy emoji normalization (#36377)

app/javascript/entrypoints/public.tsx

@@ -70,7 +70,7 @@ function loaded() {
   };
 
   document.querySelectorAll('.emojify').forEach((content) => {
-    content.innerHTML = emojify(content.innerHTML);
+    content.innerHTML = emojify(content.innerHTML, {}, true); // Force emojify as public doesn't load the new emoji system.
   });
 
   document

app/javascript/mastodon/components/account_bio.tsx

@@ -61,7 +61,7 @@ export const AccountBio: React.FC<AccountBioProps> = ({
     if (!account) {
       return '';
     }
-    return isModernEmojiEnabled() ? account.note : account.note_emojified;
+    return account.note_emojified;
   });
   const extraEmojis = useAppSelector((state) => {
     const account = state.accounts.get(accountId);

app/javascript/mastodon/components/display_name/no-domain.tsx

@@ -2,8 +2,6 @@ import type { ComponentPropsWithoutRef, FC } from 'react';
 
 import classNames from 'classnames';
 
-import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
-
 import { AnimateEmojiProvider } from '../emoji/context';
 import { EmojiHTML } from '../emoji/html';
 import { Skeleton } from '../skeleton';
@@ -24,11 +22,7 @@ export const DisplayNameWithoutDomain: FC<
         {account ? (
           <EmojiHTML
             className='display-name__html'
-            htmlString={
+            htmlString={account.get('display_name_html')}
-              isModernEmojiEnabled()
-                ? account.get('display_name')
-                : account.get('display_name_html')
-            }
             as='strong'
             extraEmojis={account.get('emojis')}
           />

app/javascript/mastodon/components/display_name/simple.tsx

@@ -1,7 +1,5 @@
 import type { ComponentPropsWithoutRef, FC } from 'react';
 
-import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
-
 import { EmojiHTML } from '../emoji/html';
 
 import type { DisplayNameProps } from './index';
@@ -19,11 +17,7 @@ export const DisplayNameSimple: FC<
       <EmojiHTML
         {...props}
         as='span'
-        htmlString={
+        htmlString={account.get('display_name_html')}
-          isModernEmojiEnabled()
-            ? account.get('display_name')
-            : account.get('display_name_html')
-        }
         extraEmojis={account.get('emojis')}
       />
     </bdi>

app/javascript/mastodon/components/status_content.jsx

@@ -28,9 +28,6 @@ const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
  * @returns {string}
  */
 export function getStatusContent(status) {
-  if (isModernEmojiEnabled()) {
-    return status.getIn(['translation', 'content']) || status.get('content');
-  }
   return status.getIn(['translation', 'contentHtml']) || status.get('contentHtml');
 }
 

app/javascript/mastodon/features/emoji/emoji.js

@@ -1,5 +1,6 @@
 import Trie from 'substring-trie';
 
+import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
 import { assetHost } from 'mastodon/utils/config';
 
 import { autoPlayGif } from '../../initial_state';
@@ -148,7 +149,17 @@ const emojifyNode = (node, customEmojis) => {
   }
 };
 
-const emojify = (str, customEmojis = {}) => {
+/**
+ * Legacy emoji processing function.
+ * @param {string} str
+ * @param {object} customEmojis
+ * @param {boolean} force If true, always emojify even if modern emoji is enabled
+ * @returns {string}
+ */
+const emojify = (str, customEmojis = {}, force = false) => {
+  if (isModernEmojiEnabled() && !force) {
+    return str;
+  }
   const wrapper = document.createElement('div');
   wrapper.innerHTML = str;