fix: the image wrttien in markdown-syntax ![]() is not rendered

Author: arayaryoma

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

@@ -608,6 +608,53 @@ export default function MDXContent({
 MDXContent.isMDXComponent = true;"
 `;
 
+exports[`fusuma-loader should convert markdown-syntax image to JSX 1`] = `
+"/* @jsx mdx */
+
+
+        import React from 'react';
+        import { mdx } from '@mdx-js/react';
+        export const slides = [
+          (props) => (
+            <>
+              
+    <p><img src={require('/tmp/withAlt.jpg')} {...{
+        \\"alt\\": \\"Alt\\"
+      }}></img><br parentName=\\"p\\"></br>{\`
+\`}<img src={require('/tmp/withoutAlt.jpg')} {...{
+        \\"alt\\": null
+      }}></img></p>
+    
+            </>
+          )];
+        export const fusumaProps = [{}];
+const makeShortcode = name => function MDXDefaultShortcode(props) {
+  console.warn(\\"Component \\" + name + \\" was not imported, exported, or provided by MDXProvider as global scope\\")
+  return <div {...props}/>
+};
+
+const layoutProps = {
+  slides
+};
+const MDXLayout = \\"wrapper\\"
+export default function MDXContent({
+  components,
+  ...props
+}) {
+  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+    <p><img src={require('/tmp/withAlt.jpg')} {...{
+        \\"alt\\": \\"Alt\\"
+      }}></img><br parentName=\\"p\\"></br>{\`
+\`}<img src={require('/tmp/withoutAlt.jpg')} {...{
+        \\"alt\\": null
+      }}></img></p>
+
+    </MDXLayout>;
+}
+
+MDXContent.isMDXComponent = true;"
+`;
+
 exports[`fusuma-loader should convert mermaid 1`] = `
 "/* @jsx mdx */
 

packages/mdx-loader/__tests__/index.js

@@ -135,6 +135,14 @@ first
 \`\`\`ts line="10-100"
 second
 \`\`\`
+`;
+    expect(await transformToJS(src)).toMatchSnapshot();
+  });
+
+  test('should convert markdown-syntax image to JSX', async () => {
+    const src = `
+![Alt](/tmp/withAlt.jpg)    
+![](/tmp/withoutAlt.jpg)
 `;
     expect(await transformToJS(src)).toMatchSnapshot();
   });

packages/mdx-loader/src/mdxPlugin.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const visit = require('unist-util-visit');
+
 const mdxAstToMdxHast = require('@mdx-js/mdx/mdx-ast-to-mdx-hast');
 const { toJSX } = require('@mdx-js/mdx/mdx-hast-to-jsx');
 
@@ -52,6 +54,25 @@ function createFusumaProps(nodes) {
     .join(',')}}`;
 }
 
+function transferMarkdownImageNodeToJSX(node) {
+  const hash = mdxAstToMdxHast()(node);
+  const { src } = hash.properties;
+  let jsx;
+
+  // Do not resolve remote url as a module
+  if (src.indexOf('http') < 0) {
+    delete hash.properties.src;
+    jsx = toJSX(hash).replace(/<img\s(.*)>/, `<img src={require('${src}')} $1>`);
+  } else {
+    jsx = toJSX(hash);
+  }
+
+  return {
+    type: 'jsx',
+    value: jsx
+  };
+}
+
 function mdxPlugin() {
   return (tree, file) => {
     const slides = [];
@@ -115,6 +136,17 @@ function mdxPlugin() {
           });
         }
       } else {
+        visit(n, null, (node) => {
+          if (node.type === 'image' || node.type === 'img') {
+            const { type, value } = transferMarkdownImageNodeToJSX(node);
+            node.type = type;
+            node.value = value;
+            delete node.alt;
+            delete node.title;
+            delete node.url;
+          }
+        });
+
         slide.push(n);
 
         if (n.type === 'jsx') {
@@ -134,10 +166,8 @@ function mdxPlugin() {
         children: slide
       });
       const mdxJSX = toJSX(hash);
-
       // jsx variable is established, so we don't use babel/parser
       const jsx = mdxJSX.match(/<MDXLayout.+?>([\s\S]*)<\/MDXLayout>/m);
-
       if (jsx) {
         const template = `
           (props) => (