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 + 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 {