Merge branch 'next'

Author: kellyjosephprice

__tests__/compilers/compatability.test.tsx

@@ -291,4 +291,33 @@ This is an image: <img src="http://example.com/#\\>" >
 
     expect(rmdx).toMatch('<Image align="center" width="250px" src="https://files.readme.io/4a1c7a0-Iphone.jpeg" />');
   });
+
+  it('can parse and transform magic image block AST to MDX with caption', () => {
+    const md = `
+[block:image]
+{
+  "images": [
+    {
+      "image": [
+        "https://files.readme.io/fd21f977cfbb9f55b3a13ab0b827525e94ee1576f21bbe82945cdc22cc966d82-Screenshot_2024-09-12_at_3.47.05_PM.png",
+        "",
+        "Data Plane Setup"
+      ],
+      "align": "center",
+      "caption": "Data Plane Setup"
+    }
+  ]
+}
+[/block]`;
+
+    const rmdx = mdx(rdmd.mdast(md));
+    expect(rmdx).toMatchInlineSnapshot(
+      `
+      "<Image alt="Data Plane Setup" src="https://files.readme.io/fd21f977cfbb9f55b3a13ab0b827525e94ee1576f21bbe82945cdc22cc966d82-Screenshot_2024-09-12_at_3.47.05_PM.png">
+        Data Plane Setup
+      </Image>
+      "
+    `,
+    );
+  });
 });

processor/transform/readme-to-mdx.ts

@@ -31,7 +31,7 @@ const readmeToMdx = (): Transform => tree => {
     parent.children.splice(index, 1, {
       type: 'mdxJsxFlowElement',
       name: 'Image',
-      attributes: toAttributes(image, imageAttrs),
+      attributes: toAttributes({ ...image, src: image.src || image.url }, imageAttrs),
       children: caption.children,
     });
   });

types.d.ts

@@ -49,7 +49,7 @@ interface Figure extends Node {
   data: {
     hName: 'figure';
   };
-  children: [ImageBlock, FigCaption];
+  children: [ImageBlock & { url: string }, FigCaption];
 }
 
 interface FigCaption extends Node {