adds element handler prop with new props arg

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

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import type { CustomEmojiMapArg } from '@/mastodon/features/emoji/types';
 import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
+import type { OnElementHandler } from '@/mastodon/utils/html';
 import { htmlStringToComponents } from '@/mastodon/utils/html';
 import { polymorphicForwardRef } from '@/types/polymorphic';
 
@@ -14,6 +15,7 @@ interface EmojiHTMLProps {
   htmlString: string;
   extraEmojis?: CustomEmojiMapArg;
   className?: string;
+  onElement?: OnElementHandler;
 }
 
 export const ModernEmojiHTML = polymorphicForwardRef<'div', EmojiHTMLProps>(
@@ -23,13 +25,15 @@ export const ModernEmojiHTML = polymorphicForwardRef<'div', EmojiHTMLProps>(
       htmlString,
       as: asProp = 'div', // Rename for syntax highlighting
       className = '',
+      onElement,
       ...props
     },
     ref,
   ) => {
     const contents = useMemo(
-      () => htmlStringToComponents(htmlString, { onText: textToEmojis }),
+      () =>
-      [htmlString],
+        htmlStringToComponents(htmlString, { onText: textToEmojis, onElement }),
+      [htmlString, onElement],
     );
 
     return (
@@ -46,6 +50,7 @@ export const ModernEmojiHTML = polymorphicForwardRef<'div', EmojiHTMLProps>(
     );
   },
 );
+ModernEmojiHTML.displayName = 'ModernEmojiHTML';
 
 export const LegacyEmojiHTML = polymorphicForwardRef<'div', EmojiHTMLProps>(
   (props, ref) => {
@@ -54,6 +59,7 @@ export const LegacyEmojiHTML = polymorphicForwardRef<'div', EmojiHTMLProps>(
       htmlString,
       extraEmojis,
       className,
+      onElement,
       ...rest
     } = props;
     const Wrapper = asElement ?? 'div';
@@ -67,6 +73,7 @@ export const LegacyEmojiHTML = polymorphicForwardRef<'div', EmojiHTMLProps>(
     );
   },
 );
+LegacyEmojiHTML.displayName = 'LegacyEmojiHTML';
 
 export const EmojiHTML = isModernEmojiEnabled()
   ? ModernEmojiHTML

app/javascript/mastodon/utils/__tests__/html-test.ts

@@ -53,13 +53,19 @@ describe('html', () => {
 
     it('calls onElement callback', () => {
       const input = '<p>lorem ipsum</p>';
-      const onElement = vi.fn(
+      const onElement = vi.fn<html.OnElementHandler>(
-        (element: HTMLElement, children: React.ReactNode[]) =>
+        (element, props, children) =>
-          React.createElement(element.tagName.toLowerCase(), {}, ...children),
+          React.createElement(
+            element.tagName.toLowerCase(),
+            props,
+            ...children,
+          ),
       );
       html.htmlStringToComponents(input, { onElement });
       expect(onElement).toHaveBeenCalledExactlyOnceWith(
         expect.objectContaining({ tagName: 'P' }),
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        expect.objectContaining({ key: expect.any(String) }),
         expect.arrayContaining(['lorem ipsum']),
         {},
       );
@@ -71,6 +77,8 @@ describe('html', () => {
       const output = html.htmlStringToComponents(input, { onElement });
       expect(onElement).toHaveBeenCalledExactlyOnceWith(
         expect.objectContaining({ tagName: 'P' }),
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        expect.objectContaining({ key: expect.any(String) }),
         expect.arrayContaining(['lorem ipsum']),
         {},
       );

app/javascript/mastodon/utils/html.ts

@@ -32,14 +32,21 @@ interface QueueItem {
   depth: number;
 }
 
-export interface HTMLToStringOptions<Arg extends Record<string, unknown>> {
+export type OnElementHandler<
-  maxDepth?: number;
+  Arg extends Record<string, unknown> = Record<string, unknown>,
-  onText?: (text: string, extra: Arg) => React.ReactNode;
+> = (
-  onElement?: (
   element: HTMLElement,
+  props: Record<string, unknown>,
   children: React.ReactNode[],
   extra: Arg,
 ) => React.ReactNode;
+
+export interface HTMLToStringOptions<
+  Arg extends Record<string, unknown> = Record<string, unknown>,
+> {
+  maxDepth?: number;
+  onText?: (text: string, extra: Arg) => React.ReactNode;
+  onElement?: OnElementHandler<Arg>;
   onAttribute?: (
     name: string,
     value: string,
@@ -125,20 +132,9 @@ export function htmlStringToComponents<Arg extends Record<string, unknown>>(
         const children: React.ReactNode[] = [];
         let element: React.ReactNode = undefined;
 
-        // If onElement is provided, use it to create the element.
+        // Generate props from attributes.
-        if (onElement) {
+        const key = `html-${uniqueIdCounter++}`; // Get the current key and then increment it.
-          const component = onElement(node, children, extraArgs);
+        const props: Record<string, unknown> = { key };
-
-          // Check for undefined to allow returning null.
-          if (component !== undefined) {
-            element = component;
-          }
-        }
-
-        // If the element wasn't created, use the default conversion.
-        if (element === undefined) {
-          const props: Record<string, unknown> = {};
-          props.key = `html-${uniqueIdCounter++}`; // Get the current key and then increment it.
         for (const attr of node.attributes) {
           let name = attr.name.toLowerCase();
 
@@ -184,6 +180,18 @@ export function htmlStringToComponents<Arg extends Record<string, unknown>>(
           }
         }
 
+        // If onElement is provided, use it to create the element.
+        if (onElement) {
+          const component = onElement(node, props, children, extraArgs);
+
+          // Check for undefined to allow returning null.
+          if (component !== undefined) {
+            element = component;
+          }
+        }
+
+        // If the element wasn't created, use the default conversion.
+        if (element === undefined) {
           element = React.createElement(
             tagName,
             props,