From afa40af686be5196783f663e33443d0773101b9b Mon Sep 17 00:00:00 2001
From: Kelly Joseph Price <kellyjosephprice@gmail.com>
Date: Wed, 25 Sep 2024 10:54:36 -0700
Subject: [PATCH] fix: migrating captions (#971)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[![PR App][icn]][demo] | RM-10929
:-------------------:|:----------:

## 🧰 Changes

Fixes migrating images with captions.

Recent PRs have been normalizing the use of `src` and `url` with the
various image transformers. I misssed one 🤮

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].


[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg
---
 __tests__/compilers/compatability.test.tsx | 29 ++++++++++++++++++++++
 processor/transform/readme-to-mdx.ts       |  2 +-
 types.d.ts                                 |  2 +-
 3 files changed, 31 insertions(+), 2 deletions(-)

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: <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>
+      "
+    `,
+    );
+  });
 });
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 {