diff --git a/__tests__/compilers/compatability.test.tsx b/__tests__/compilers/compatability.test.tsx index 1d6fc0ec9..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(` - " + " hello **cat** " `); @@ -304,7 +304,8 @@ This is an image: "Data Plane Setup" ], "align": "center", - "caption": "Data Plane Setup" + "caption": "Data Plane Setup", + "border": true } ] } @@ -313,7 +314,7 @@ This is an image: const rmdx = mdx(rdmd.mdast(md)); expect(rmdx).toMatchInlineSnapshot( ` - "Data Plane Setup + "Data Plane Setup Data Plane Setup " 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', () => { Some helpful text { 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, }); });