feat(mdx): add image props(w, h)

Author: hiroppy

packages/mdx-loader/__tests__/__snapshots__/index.js.snap

@@ -802,7 +802,14 @@ export const slides = [props => <>
     <p><img src={require('/tmp/withAlt.jpg')} {...{
       \\"alt\\": \\"Alt\\"
     }}></img>{\`
-\`}<img src={require('/tmp/withoutAlt.jpg')}></img></p>
+\`}<img src={require('/tmp/withoutAlt.jpg')}></img>{\`
+\`}<img src={require('/tmp/style.jpg')} style={{
+      \\"height\\": \\"100%\\"
+    }}></img>{\`
+\`}<img src={require('/tmp/style.jpg?dont=delete')} style={{
+      \\"height\\": \\"100px\\",
+      \\"width\\": \\"100%\\"
+    }}></img></p>
 
             </>];
 export const backgrounds = [0];
@@ -820,7 +827,14 @@ export default function MDXContent({
     <p><img src={require('/tmp/withAlt.jpg')} {...{
         \\"alt\\": \\"Alt\\"
       }}></img>{\`
-\`}<img src={require('/tmp/withoutAlt.jpg')}></img></p>
+\`}<img src={require('/tmp/withoutAlt.jpg')}></img>{\`
+\`}<img src={require('/tmp/style.jpg')} style={{
+        \\"height\\": \\"100%\\"
+      }}></img>{\`
+\`}<img src={require('/tmp/style.jpg?dont=delete')} style={{
+        \\"height\\": \\"100px\\",
+        \\"width\\": \\"100%\\"
+      }}></img></p>
 
     </MDXLayout>;
 }

packages/mdx-loader/__tests__/index.js

@@ -142,6 +142,8 @@ second
     const src = `
 ![Alt](/tmp/withAlt.jpg)
 ![](/tmp/withoutAlt.jpg)
+![](/tmp/style.jpg?h=100%)
+![](/tmp/style.jpg?dont=delete&h=100px&w=100%)
 `;
     expect(await transformToJS(src)).toMatchSnapshot();
   });

packages/mdx-loader/src/transformers/transformMarkdownImageNodeToJSX.js

@@ -5,8 +5,9 @@ const mdxAstToMdxHast = require('@mdx-js/mdx/mdx-ast-to-mdx-hast');
 
 function transformMarkdownImageNodeToJSX(node) {
   const hash = mdxAstToMdxHast()(node);
-  const { src, alt } = hash.properties;
+  let { src, alt } = hash.properties;
   let jsx;
+  const style = {};
 
   if (alt === null || alt === undefined) {
     delete hash.properties.alt;
@@ -15,7 +16,39 @@ function transformMarkdownImageNodeToJSX(node) {
   // Do not resolve remote url as a module
   if (!src.includes('http')) {
     delete hash.properties.src;
-    jsx = toJSX(hash).replace(/<img(\s?.*)>/, `<img src={require('${src}')} $1>`);
+
+    const match = src.match(/(\?|&)?([w,h]=.+?(px|%))&?/gm);
+
+    if (match) {
+      // has.properties.src attaches `25` when fusuma uses %
+      src = src.replace(/(\?|&)?([w,h]=.+?(px|%))&?/gm, '').replace(/(25)+$/g, '');
+
+      match.forEach((v) => {
+        const [key, value] = v.split('=').map((item, i) => {
+          if (i === 0) {
+            let k = item.replace(/[?|&]/g, '');
+
+            if (k === 'w') {
+              return 'width';
+            }
+            if (k === 'h') {
+              return 'height';
+            }
+          }
+          if (i === 1) {
+            return item.replace('&', '');
+          }
+        });
+        style[key] = value;
+      });
+    }
+
+    jsx = toJSX(hash).replace(
+      /<img(\s?.*)>/,
+      `<img src={require('${src}')} ${
+        Object.keys(style).length ? `style={${JSON.stringify(style)}}` : ''
+      } $1>`
+    );
   } else {
     jsx = toJSX(hash);
   }

samples/debug/slides/02-file-loader.md

@@ -6,14 +6,14 @@
 
 ### markdown
 
-![js](../assets/js.jpg)
+![js](../assets/js.jpg?w=150px&h=150px)
 
 <!-- block-end -->
 <!-- block-start: column -->
 
 ### html
 
-<p><img src="../assets/js.jpg" alt="js" /></p>
+<p><img src="../assets/js.jpg" alt="js" style={{width:150, height:150}} /></p>
 
 <!-- block-end -->
 <!-- block-end -->