Emoji: Import and use shortcode data (#37178)

app/javascript/mastodon/components/emoji/emoji.stories.tsx

@@ -2,8 +2,6 @@ import type { ComponentProps } from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { importCustomEmojiData } from '@/mastodon/features/emoji/loader';
-
 import { Emoji } from './index';
 
 type EmojiProps = ComponentProps<typeof Emoji> & { state: string };
@@ -38,7 +36,6 @@ const meta = {
     },
   },
   render(args) {
-    void importCustomEmojiData();
     return <Emoji {...args} />;
   },
 } satisfies Meta<EmojiProps>;
@@ -54,3 +51,9 @@ export const CustomEmoji: Story = {
     code: ':custom:',
   },
 };
+
+export const LegacyEmoji: Story = {
+  args: {
+    code: ':copyright:',
+  },
+};

app/javascript/mastodon/components/emoji/index.tsx

@@ -3,7 +3,10 @@ import { useContext, useEffect, useState } from 'react';
 
 import classNames from 'classnames';
 
-import { EMOJI_TYPE_CUSTOM } from '@/mastodon/features/emoji/constants';
+import {
+  EMOJI_TYPE_CUSTOM,
+  EMOJI_TYPE_UNICODE,
+} from '@/mastodon/features/emoji/constants';
 import { useEmojiAppState } from '@/mastodon/features/emoji/mode';
 import {
   emojiToInversionClassName,
@@ -47,8 +50,6 @@ export const Emoji: FC<EmojiProps> = ({
 
   const animate = useContext(AnimateEmojiContext);
 
-  const inversionClass = emojiToInversionClassName(code);
-
   const fallback = showFallback ? code : null;
 
   // If the code is invalid or we otherwise know it's not valid, show the fallback.
@@ -56,10 +57,6 @@ export const Emoji: FC<EmojiProps> = ({
     return fallback;
   }
 
-  if (!shouldRenderImage(state, appState.mode)) {
-    return code;
-  }
-
   if (!isStateLoaded(state)) {
     if (showLoading) {
       return <span className='emojione emoji-loading' title={code} />;
@@ -67,6 +64,17 @@ export const Emoji: FC<EmojiProps> = ({
     return fallback;
   }
 
+  const inversionClass =
+    state.type === EMOJI_TYPE_UNICODE &&
+    emojiToInversionClassName(state.data.unicode);
+
+  if (!shouldRenderImage(state, appState.mode)) {
+    if (state.type === EMOJI_TYPE_UNICODE) {
+      return state.data.unicode;
+    }
+    return code;
+  }
+
   if (state.type === EMOJI_TYPE_CUSTOM) {
     const shortcode = `:${state.code}:`;
     return (