[Glitch] Emoji: Cleanup new code

Port 0c64e7f75e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/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 '@/flavours/glitch/features/emoji/normalize';
-import type { CustomEmojiMapArg } from '@/flavours/glitch/features/emoji/types';
-import { createLimitedCache } from '@/flavours/glitch/utils/cache';
+import type { OnElementHandler } from '@/flavours/glitch/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} />;
+  },
+);