Emoji Component (#36293)

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

@@ -2,9 +2,10 @@ import type { ComponentPropsWithoutRef, FC } from 'react';
 
 import classNames from 'classnames';
 
-import { EmojiHTML } from '@/mastodon/features/emoji/emoji_html';
 import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
 
+import { AnimateEmojiProvider } from '../emoji/context';
+import { EmojiHTML } from '../emoji/html';
 import { Skeleton } from '../skeleton';
 
 import type { DisplayNameProps } from './index';
@@ -14,9 +15,10 @@ export const DisplayNameWithoutDomain: FC<
     ComponentPropsWithoutRef<'span'>
 > = ({ account, className, children, ...props }) => {
   return (
-    <span
+    <AnimateEmojiProvider
       {...props}
-      className={classNames('display-name animate-parent', className)}
+      as='span'
+      className={classNames('display-name', className)}
     >
       <bdi>
         {account ? (
@@ -27,8 +29,8 @@ export const DisplayNameWithoutDomain: FC<
                 ? account.get('display_name')
                 : account.get('display_name_html')
             }
-            shallow
             as='strong'
+            extraEmojis={account.get('emojis')}
           />
         ) : (
           <strong className='display-name__html'>
@@ -37,6 +39,6 @@ export const DisplayNameWithoutDomain: FC<
         )}
       </bdi>
       {children}
-    </span>
+    </AnimateEmojiProvider>
   );
 };

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

@@ -1,8 +1,9 @@
 import type { ComponentPropsWithoutRef, FC } from 'react';
 
-import { EmojiHTML } from '@/mastodon/features/emoji/emoji_html';
 import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
 
+import { EmojiHTML } from '../emoji/html';
+
 import type { DisplayNameProps } from './index';
 
 export const DisplayNameSimple: FC<
@@ -12,12 +13,19 @@ export const DisplayNameSimple: FC<
   if (!account) {
     return null;
   }
-  const accountName = isModernEmojiEnabled()
-    ? account.get('display_name')
-    : account.get('display_name_html');
+
   return (
     <bdi>
-      <EmojiHTML {...props} htmlString={accountName} shallow as='span' />
+      <EmojiHTML
+        {...props}
+        as='span'
+        htmlString={
+          isModernEmojiEnabled()
+            ? account.get('display_name')
+            : account.get('display_name_html')
+        }
+        extraEmojis={account.get('emojis')}
+      />
     </bdi>
   );
 };