From 4b425577511759820583e4d9673eaa29da6c4292 Mon Sep 17 00:00:00 2001
From: Kelly Joseph Price <kellyjosephprice@gmail.com>
Date: Fri, 27 Sep 2024 11:39:44 -0700
Subject: [PATCH 1/2] fix: migrating image borders

---
 __tests__/compilers/compatability.test.tsx | 7 ++++---
 __tests__/transformers/images.test.ts      | 2 ++
 processor/compile/compatibility.ts         | 5 ++++-
 processor/transform/readme-to-mdx.ts       | 5 ++++-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/__tests__/compilers/compatability.test.tsx b/__tests__/compilers/compatability.test.tsx
index 1d6fc0ec9..80870bb47 100644
--- a/__tests__/compilers/compatability.test.tsx
+++ b/__tests__/compilers/compatability.test.tsx
@@ -292,7 +292,7 @@ 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', () => {
+  it.only('can parse and transform magic image block AST to MDX with caption', () => {
     const md = `
 [block:image]
 {
@@ -304,7 +304,8 @@ This is an image: <img src="http://example.com/#\\>" >
         "Data Plane Setup"
       ],
       "align": "center",
-      "caption": "Data Plane Setup"
+      "caption": "Data Plane Setup",
+      "border": true
     }
   ]
 }
@@ -313,7 +314,7 @@ This is an image: <img src="http://example.com/#\\>" >
     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">
+      "<Image alt="Data Plane Setup" border={true} src="https://files.readme.io/fd21f977cfbb9f55b3a13ab0b827525e94ee1576f21bbe82945cdc22cc966d82-Screenshot_2024-09-12_at_3.47.05_PM.png">
         Data Plane Setup
       </Image>
       "
diff --git a/__tests__/transformers/images.test.ts b/__tests__/transformers/images.test.ts
index f3cdc66cd..da6598411 100644
--- a/__tests__/transformers/images.test.ts
+++ b/__tests__/transformers/images.test.ts
@@ -28,6 +28,7 @@ describe('images transformer', () => {
 <Image
   align="left"
   alt="Some helpful text"
+  border
   src="https://example.com/image.jpg"
   title="Testing"
   width="100px"
@@ -37,6 +38,7 @@ describe('images transformer', () => {
 
     expect(tree.children[0].align).toBe('left');
     expect(tree.children[0].alt).toBe('Some helpful text');
+    expect(tree.children[0].border).toBe(true);
     expect(tree.children[0].title).toBe('Testing');
     expect(tree.children[0].width).toBe('100px');
   });
diff --git a/processor/compile/compatibility.ts b/processor/compile/compatibility.ts
index 9ab6369bb..c3540c681 100644
--- a/processor/compile/compatibility.ts
+++ b/processor/compile/compatibility.ts
@@ -34,7 +34,9 @@ const html = (node: Html) => {
 };
 
 const figureToImageBlock = (node: any) => {
-  const { align, width, src, url, alt, title, ...image } = node.children.find((child: Node) => child.type === 'image');
+  const { align, border, width, src, url, alt, title, ...image } = node.children.find(
+    (child: Node) => child.type === 'image',
+  );
   const { className } = image.data.hProperties;
   const figcaption = node.children.find((child: Node) => child.type === 'figcaption');
 
@@ -49,6 +51,7 @@ const figureToImageBlock = (node: any) => {
     ...(align && { align }),
     ...(alt && { alt }),
     ...(className && { border: className === 'border' }),
+    ...(border && { border }),
     ...(caption && { caption }),
     ...(title && { title }),
     ...(width && { width }),
diff --git a/processor/transform/readme-to-mdx.ts b/processor/transform/readme-to-mdx.ts
index 0e7df085b..c97ffbbd8 100644
--- a/processor/transform/readme-to-mdx.ts
+++ b/processor/transform/readme-to-mdx.ts
@@ -31,7 +31,10 @@ const readmeToMdx = (): Transform => tree => {
     parent.children.splice(index, 1, {
       type: 'mdxJsxFlowElement',
       name: 'Image',
-      attributes: toAttributes({ ...image, src: image.src || image.url }, imageAttrs),
+      attributes: toAttributes(
+        { ...image, border: image.data.hProperties.className === 'border', src: image.src || image.url },
+        imageAttrs,
+      ),
       children: caption.children,
     });
   });

From 12c7ad56222f4a63d93652b23d0b52e4a5c32152 Mon Sep 17 00:00:00 2001
From: Kelly Joseph Price <kellyjosephprice@gmail.com>
Date: Fri, 27 Sep 2024 11:42:12 -0700
Subject: [PATCH 2/2] tests

---
 __tests__/compilers/compatability.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/__tests__/compilers/compatability.test.tsx b/__tests__/compilers/compatability.test.tsx
index 80870bb47..087d77a27 100644
--- a/__tests__/compilers/compatability.test.tsx
+++ b/__tests__/compilers/compatability.test.tsx
@@ -75,7 +75,7 @@ describe('compatability with RDMD', () => {
     };
 
     expect(mdx(ast).trim()).toMatchInlineSnapshot(`
-      "<Image align="center" width="300px" src="https://drastik.ch/wp-content/uploads/2023/06/blackcat.gif">
+      "<Image align="center" width="300px" src="https://drastik.ch/wp-content/uploads/2023/06/blackcat.gif" border={true}>
         hello **cat**
       </Image>"
     `);
@@ -292,7 +292,7 @@ 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.only('can parse and transform magic image block AST to MDX with caption', () => {
+  it('can parse and transform magic image block AST to MDX with caption', () => {
     const md = `
 [block:image]
 {