feat: ensure bordered images are rendered via a magic block

__tests__/__snapshots__/flavored-compilers.test.js.snap

@@ -91,7 +91,7 @@ exports[`ReadMe Magic Blocks Image 1`] = `
 "
 `;
 
-exports[`ReadMe Magic Blocks Image with sizing 1`] = `
+exports[`ReadMe Magic Blocks Image with sizing and border 1`] = `
 "[block:image]
 {
   \\"images\\": [
@@ -101,7 +101,8 @@ exports[`ReadMe Magic Blocks Image with sizing 1`] = `
         \\"rdme-blue.svg\\",
         \\"\\"
       ],
-      \\"sizing\\": \\"80px\\"
+      \\"sizing\\": \\"80px\\",
+      \\"border\\": true
     }
   ]
 }

__tests__/flavored-compilers.test.js

@@ -181,15 +181,16 @@ describe('ReadMe Magic Blocks', () => {
     expect(out).toMatchSnapshot();
   });
 
-  it('Image with sizing', () => {
+  it('Image with sizing and border', () => {
     const txt = `[block:image]
     {
        "images": [{
           "image": [
             "https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg",
             "rdme-blue.svg"
           ],
-          "sizing": "80px"
+          "sizing": "80px",
+          "border": true
        }]
     }
     [/block]`;

processor/compile/figure.js

@@ -1,10 +1,11 @@
 const { imgSizeByWidth } = require('../parse/magic-block-parser');
 
 const compileImage = image => {
+  const { className, width } = image.data.hProperties || {};
   const img = {
     image: [image.url, image.title, image.alt],
-    ...(image.data.hProperties.width && { sizing: imgSizeByWidth[image.data.hProperties.width] }),
-    ...(image.border && { border: image.border }),
+    ...(width && { sizing: imgSizeByWidth[width] }),
+    ...(className === 'border' && { border: true }),
   };
 
   return img;

processor/compile/image.js

@@ -7,7 +7,10 @@ module.exports = function ImageCompiler() {
   visitors.image = function compile(node, ...args) {
     if (node.data?.hProperties?.className === 'emoji') return node.title;
 
-    if (node.data?.hProperties?.width) return visitors.figure.call(this, node, ...args);
+    // Use magic block instead of markdown when there are certain defined properties we can't store in markdown
+    const { className, width } = node.data?.hProperties || {};
+    const useMagicBlock = Boolean(width) || className?.length;
+    if (useMagicBlock) return visitors.figure.call(this, node, ...args);
 
     return originalImageCompiler.call(this, node, ...args);
   };