diff --git a/__tests__/compilers/compatability.test.tsx b/__tests__/compilers/compatability.test.tsx
index a7b3fc899..0c39dea08 100644
--- a/__tests__/compilers/compatability.test.tsx
+++ b/__tests__/compilers/compatability.test.tsx
@@ -291,4 +291,33 @@ This is an image:
expect(rmdx).toMatch('');
});
+
+ 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(
+ `
+ "
+ Data Plane Setup
+
+ "
+ `,
+ );
+ });
});
diff --git a/processor/transform/readme-to-mdx.ts b/processor/transform/readme-to-mdx.ts
index 036a35075..0e7df085b 100644
--- a/processor/transform/readme-to-mdx.ts
+++ b/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,
});
});
diff --git a/types.d.ts b/types.d.ts
index 0a011fb6d..b5be5e7f1 100644
--- a/types.d.ts
+++ b/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 {