fix: migrating image borders

__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>"
     `);
@@ -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>
       "

__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');
   });

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 }),

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,
     });
   });