Remove legacy emojify function (#38965)

app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap

@@ -1,35 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`<AutosuggestEmoji /> > renders emoji with custom url 1`] = `
-<div
-  className="autosuggest-emoji"
->
-  <img
-    alt="foobar"
-    className="emojione"
-    src="http://example.com/emoji.png"
-  />
-  <div
-    className="autosuggest-emoji__name"
-  >
-    :foobar:
-  </div>
-</div>
-`;
-
-exports[`<AutosuggestEmoji /> > renders native emoji 1`] = `
-<div
-  className="autosuggest-emoji"
->
-  <img
-    alt="💙"
-    className="emojione"
-    src="/emoji/1f499.svg"
-  />
-  <div
-    className="autosuggest-emoji__name"
-  >
-    :foobar:
-  </div>
-</div>
-`;

app/javascript/mastodon/components/__tests__/autosuggest_emoji-test.jsx

@@ -1,29 +0,0 @@
-import renderer from 'react-test-renderer';
-
-import AutosuggestEmoji from '../autosuggest_emoji';
-
-describe('<AutosuggestEmoji />', () => {
-  it('renders native emoji', () => {
-    const emoji = {
-      native: '💙',
-      colons: ':foobar:',
-    };
-    const component = renderer.create(<AutosuggestEmoji emoji={emoji} />);
-    const tree      = component.toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders emoji with custom url', () => {
-    const emoji = {
-      custom: true,
-      imageUrl: 'http://example.com/emoji.png',
-      native: 'foobar',
-      colons: ':foobar:',
-    };
-    const component = renderer.create(<AutosuggestEmoji emoji={emoji} />);
-    const tree      = component.toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

app/javascript/mastodon/components/autosuggest_emoji.jsx

@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { assetHost } from 'mastodon/utils/config';
-
-import { unicodeMapping } from '../features/emoji/emoji_unicode_mapping_light';
-
-export default class AutosuggestEmoji extends PureComponent {
-
-  static propTypes = {
-    emoji: PropTypes.object.isRequired,
-  };
-
-  render () {
-    const { emoji } = this.props;
-    let url;
-
-    if (emoji.custom) {
-      url = emoji.imageUrl;
-    } else {
-      const mapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')];
-
-      if (!mapping) {
-        return null;
-      }
-
-      url = `${assetHost}/emoji/${mapping.filename}.svg`;
-    }
-
-    return (
-      <div className='autosuggest-emoji'>
-        <img
-          className='emojione'
-          src={url}
-          alt={emoji.native || emoji.colons}
-        />
-
-        <div className='autosuggest-emoji__name'>{emoji.colons}</div>
-      </div>
-    );
-  }
-
-}

app/javascript/mastodon/components/autosuggest_emoji.tsx

@@ -0,0 +1,22 @@
+import type { FC } from 'react';
+
+import { useCustomEmojis } from '@/mastodon/hooks/useCustomEmojis';
+
+import { Emoji } from './emoji';
+
+interface LegacyEmoji {
+  colons: string;
+  custom?: boolean;
+  native?: string;
+  imageUrl?: string;
+}
+
+export const AutosuggestEmoji: FC<{ emoji: LegacyEmoji }> = ({ emoji }) => {
+  const emojis = useCustomEmojis();
+  return (
+    <div className='autosuggest-emoji'>
+      <Emoji code={emoji.native ?? emoji.colons} customEmoji={emojis} />
+      <div className='autosuggest-emoji__name'>{emoji.colons}</div>
+    </div>
+  );
+};

app/javascript/mastodon/components/autosuggest_input.jsx

@@ -9,7 +9,7 @@ import Overlay from 'react-overlays/Overlay';
 
 import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
 
-import AutosuggestEmoji from './autosuggest_emoji';
+import { AutosuggestEmoji } from './autosuggest_emoji';
 import { AutosuggestHashtag } from './autosuggest_hashtag';
 
 const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {

app/javascript/mastodon/components/autosuggest_textarea.jsx

@@ -10,7 +10,7 @@ import Textarea from 'react-textarea-autosize';
 
 import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
 
-import AutosuggestEmoji from './autosuggest_emoji';
+import { AutosuggestEmoji } from './autosuggest_emoji';
 import { AutosuggestHashtag } from './autosuggest_hashtag';
 
 const textAtCursorMatchesToken = (str, caretPosition) => {

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

@@ -19,6 +19,7 @@ import {
   stringToEmojiState,
   tokenizeText,
 } from '@/mastodon/features/emoji/render';
+import type { ExtraCustomEmojiMap } from '@/mastodon/features/emoji/types';
 
 import { AnimateEmojiContext, CustomEmojiContext } from './context';
 
@@ -26,14 +27,19 @@ interface EmojiProps {
   code: string;
   showFallback?: boolean;
   showLoading?: boolean;
+  customEmoji?: ExtraCustomEmojiMap | null;
 }
 
 export const Emoji: FC<EmojiProps> = ({
   code,
   showFallback = true,
   showLoading = true,
+  customEmoji: customEmojiOverride,
 }) => {
-  const customEmoji = useContext(CustomEmojiContext);
+  let customEmoji = useContext(CustomEmojiContext);
+  if (customEmojiOverride) {
+    customEmoji = customEmojiOverride;
+  }
 
   // First, set the emoji state based on the input code.
   const [state, setState] = useState(() =>