Emoji: Cleanup new code (#36402)

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

@@ -0,0 +1,56 @@
+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 };
+
+const meta = {
+  title: 'Components/Emoji',
+  component: Emoji,
+  args: {
+    code: '🖤',
+    state: 'auto',
+  },
+  argTypes: {
+    code: {
+      name: 'Emoji',
+    },
+    state: {
+      control: {
+        type: 'select',
+        labels: {
+          auto: 'Auto',
+          native: 'Native',
+          twemoji: 'Twemoji',
+        },
+      },
+      options: ['auto', 'native', 'twemoji'],
+      name: 'Emoji Style',
+      mapping: {
+        auto: { meta: { emoji_style: 'auto' } },
+        native: { meta: { emoji_style: 'native' } },
+        twemoji: { meta: { emoji_style: 'twemoji' } },
+      },
+    },
+  },
+  render(args) {
+    void importCustomEmojiData();
+    return <Emoji {...args} />;
+  },
+} satisfies Meta<EmojiProps>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const CustomEmoji: Story = {
+  args: {
+    code: ':custom:',
+  },
+};

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

@@ -14,7 +14,7 @@ import { polymorphicForwardRef } from '@/types/polymorphic';
 import { AnimateEmojiProvider, CustomEmojiProvider } from './context';
 import { textToEmojis } from './index';
 
-interface EmojiHTMLProps {
+export interface EmojiHTMLProps {
   htmlString: string;
   extraEmojis?: CustomEmojiMapArg;
   className?: string;

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

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import { useContext, useEffect, useState } from 'react';
 
 import { EMOJI_TYPE_CUSTOM } from '@/mastodon/features/emoji/constants';
-import { useEmojiAppState } from '@/mastodon/features/emoji/hooks';
+import { useEmojiAppState } from '@/mastodon/features/emoji/mode';
 import { unicodeHexToUrl } from '@/mastodon/features/emoji/normalize';
 import {
   isStateLoaded,

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

@@ -7,23 +7,49 @@ const meta = {
   title: 'Components/HTMLBlock',
   component: HTMLBlock,
   args: {
-    contents:
-      '<p>Hello, world!</p>\n<p><a href="#">A link</a></p>\n<p>This should be filtered out: <button>Bye!</button></p>',
+    htmlString: `<p>Hello, world!</p>
+<p><a href="#">A link</a></p>
+<p>This should be filtered out: <button>Bye!</button></p>
+<p>This also has emoji: 🖤</p>`,
+  },
+  argTypes: {
+    extraEmojis: {
+      table: {
+        disable: true,
+      },
+    },
+    onElement: {
+      table: {
+        disable: true,
+      },
+    },
+    onAttribute: {
+      table: {
+        disable: true,
+      },
+    },
   },
   render(args) {
     return (
       // Just for visual clarity in Storybook.
-      <div
+      <HTMLBlock
+        {...args}
         style={{
           border: '1px solid black',
           padding: '1rem',
           minWidth: '300px',
         }}
-      >
-        <HTMLBlock {...args} />
-      </div>
+      />
     );
   },
+  // Force Twemoji to demonstrate emoji rendering.
+  parameters: {
+    state: {
+      meta: {
+        emoji_style: 'twemoji',
+      },
+    },
+  },
 } satisfies Meta<typeof HTMLBlock>;
 
 export default meta;

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

@@ -1,50 +1,30 @@
-import type { FC, ReactNode } from 'react';
-import { useMemo } from 'react';
+import { useCallback } from 'react';
 
-import { cleanExtraEmojis } from '@/mastodon/features/emoji/normalize';
-import type { CustomEmojiMapArg } from '@/mastodon/features/emoji/types';
-import { createLimitedCache } from '@/mastodon/utils/cache';
+import type { OnElementHandler } from '@/mastodon/utils/html';
+import { polymorphicForwardRef } from '@/types/polymorphic';
 
-import { htmlStringToComponents } from '../../utils/html';
+import type { EmojiHTMLProps } from '../emoji/html';
+import { ModernEmojiHTML } from '../emoji/html';
+import { useElementHandledLink } from '../status/handled_link';
 
-// Use a module-level cache to avoid re-rendering the same HTML multiple times.
-const cache = createLimitedCache<ReactNode>({ maxSize: 1000 });
-
-interface HTMLBlockProps {
-  contents: string;
-  extraEmojis?: CustomEmojiMapArg;
-}
-
-export const HTMLBlock: FC<HTMLBlockProps> = ({
-  contents: raw,
-  extraEmojis,
-}) => {
-  const customEmojis = useMemo(
-    () => cleanExtraEmojis(extraEmojis),
-    [extraEmojis],
-  );
-  const contents = useMemo(() => {
-    const key = JSON.stringify({ raw, customEmojis });
-    if (cache.has(key)) {
-      return cache.get(key);
-    }
-
-    const rendered = htmlStringToComponents(raw, {
-      onText,
-      extraArgs: { customEmojis },
+export const HTMLBlock = polymorphicForwardRef<
+  'div',
+  EmojiHTMLProps & Parameters<typeof useElementHandledLink>[0]
+>(
+  ({
+    onElement: onParentElement,
+    hrefToMention,
+    hashtagAccountId,
+    ...props
+  }) => {
+    const { onElement: onLinkElement } = useElementHandledLink({
+      hrefToMention,
+      hashtagAccountId,
     });
-
-    cache.set(key, rendered);
-    return rendered;
-  }, [raw, customEmojis]);
-
-  return contents;
-};
-
-function onText(
-  text: string,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Doesn't do anything, just showing how typing would work.
-  { customEmojis }: { customEmojis: CustomEmojiMapArg | null },
-) {
-  return text;
-}
+    const onElement: OnElementHandler = useCallback(
+      (...args) => onParentElement?.(...args) ?? onLinkElement(...args),
+      [onLinkElement, onParentElement],
+    );
+    return <ModernEmojiHTML {...props} onElement={onElement} />;
+  },
+);