Adds new HTMLBlock component (#36262)

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

@@ -26,9 +26,11 @@ exports[`html > htmlStringToComponents > handles nested elements 1`] = `
 exports[`html > htmlStringToComponents > ignores empty text nodes 1`] = `
 [
   <p>
+       
     <span>
       lorem     ipsum
     </span>
+       
   </p>,
 ]
 `;
@@ -37,6 +39,7 @@ exports[`html > htmlStringToComponents > respects allowedTags option 1`] = `
 [
   <p>
     lorem 
+     
     <em>
       dolor
     </em>

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

@@ -48,7 +48,7 @@ describe('html', () => {
       const input = '<p>lorem ipsum</p>';
       const onText = vi.fn((text: string) => text);
       html.htmlStringToComponents(input, { onText });
-      expect(onText).toHaveBeenCalledExactlyOnceWith('lorem ipsum');
+      expect(onText).toHaveBeenCalledExactlyOnceWith('lorem ipsum', {});
     });
 
     it('calls onElement callback', () => {
@@ -61,6 +61,7 @@ describe('html', () => {
       expect(onElement).toHaveBeenCalledExactlyOnceWith(
         expect.objectContaining({ tagName: 'P' }),
         expect.arrayContaining(['lorem ipsum']),
+        {},
       );
     });
 
@@ -71,6 +72,7 @@ describe('html', () => {
       expect(onElement).toHaveBeenCalledExactlyOnceWith(
         expect.objectContaining({ tagName: 'P' }),
         expect.arrayContaining(['lorem ipsum']),
+        {},
       );
       expect(output).toMatchSnapshot();
     });
@@ -88,15 +90,16 @@ describe('html', () => {
         'href',
         'https://example.com',
         'a',
+        {},
       );
-      expect(onAttribute).toHaveBeenCalledWith('target', '_blank', 'a');
-      expect(onAttribute).toHaveBeenCalledWith('rel', 'nofollow', 'a');
+      expect(onAttribute).toHaveBeenCalledWith('target', '_blank', 'a', {});
+      expect(onAttribute).toHaveBeenCalledWith('rel', 'nofollow', 'a', {});
     });
 
     it('respects allowedTags option', () => {
       const input = '<p>lorem <strong>ipsum</strong> <em>dolor</em></p>';
       const output = html.htmlStringToComponents(input, {
-        allowedTags: new Set(['p', 'em']),
+        allowedTags: { p: {}, em: {} },
       });
       expect(output).toMatchSnapshot();
     });