[Glitch] Adds new HTMLBlock component

Port e07b9dfdc1 to glitch-soc

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

app/javascript/flavours/glitch/components/html_block/index.tsx

@@ -0,0 +1,50 @@
+import type { FC, ReactNode } from 'react';
+import { useMemo } 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 { htmlStringToComponents } from '../../utils/html';
+
+// 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 },
+    });
+
+    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;
+}