fix(mdx-loader): fix md image paths with spaces bug related to transf…

…ormImage encoding problem (#10723)

packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.ts.snap

@@ -48,5 +48,15 @@ in paragraph <img alt="img" src={require("!<PROJECT_ROOT>/node_modules/url-loade
 \`\`\`md
 ![img](./static/img.png)
 \`\`\`
+
+## Images with spaces
+
+<img alt="img" src={require("!<PROJECT_ROOT>/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[contenthash].[ext]&fallback=<PROJECT_ROOT>/node_modules/file-loader/dist/cjs.js!./static/img with spaces.png").default} width="200" height="200" />
+
+<img alt="img" src={require("!<PROJECT_ROOT>/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[contenthash].[ext]&fallback=<PROJECT_ROOT>/node_modules/file-loader/dist/cjs.js!./static/img with spaces.png").default} width="200" height="200" />
+
+<img alt="img" src={require("!<PROJECT_ROOT>/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[contenthash].[ext]&fallback=<PROJECT_ROOT>/node_modules/file-loader/dist/cjs.js!./static/img with one encoded%20space.png").default} width="200" height="200" />
+
+<img alt="img" src={require("!<PROJECT_ROOT>/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[contenthash].[ext]&fallback=<PROJECT_ROOT>/node_modules/file-loader/dist/cjs.js!./static/img with one encoded%20space.png").default} width="200" height="200" />
 "
 `;

packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts

@@ -98,6 +98,7 @@ async function toImageRequireNode(
       });
     }
   } catch (err) {
+    console.error(err);
     // Workaround for https://github.com/yarnpkg/berry/pull/3889#issuecomment-1034469784
     // TODO remove this check once fixed in Yarn PnP
     if (!process.versions.pnp) {
@@ -152,10 +153,7 @@ async function getImageAbsolutePath(
     return imageFilePath;
   }
   // relative paths are resolved against the source file's folder
-  const imageFilePath = path.join(
-    path.dirname(filePath),
-    decodeURIComponent(imagePath),
-  );
+  const imageFilePath = path.join(path.dirname(filePath), imagePath);
   await ensureImageFileExist(imageFilePath, filePath);
   return imageFilePath;
 }
@@ -180,9 +178,14 @@ async function processImageNode(target: Target, context: Context) {
     return;
   }
 
+  // We decode it first because Node Url.pathname is always encoded
+  // while the image file-system path are not.
+  // See https://github.com/facebook/docusaurus/discussions/10720
+  const decodedPathname = decodeURIComponent(parsedUrl.pathname);
+
   // We try to convert image urls without protocol to images with require calls
   // going through webpack ensures that image assets exist at build time
-  const imagePath = await getImageAbsolutePath(parsedUrl.pathname, context);
+  const imagePath = await getImageAbsolutePath(decodedPathname, context);
   await toImageRequireNode(target, imagePath, context);
 }
 

website/_dogfooding/_pages tests/markdown-tests-mdx.mdx

@@ -206,14 +206,18 @@ Code tag + double pipe: <code>&#124;&#124;</code>
 
 Code tag + double pipe: <code>||</code>
 
-## Images edge cases
+## Images
 
 ![](/新控制器空间/图片.png)
 
 ![](/4/图片.png)
 
 ![](/4/docu.png)
 
+![](</image with spaces.png>)
+
+![](<@site/_dogfooding/_asset-tests/image with spaces.png>)
+
 ## Details
 
 <details>
@@ -359,10 +363,14 @@ See [#3337](https://github.com/facebook/docusaurus/issues/3337)
 
 - [/someFile.xyz](/someFile.xyz)
 
+- [/image with space.png](</image with spaces.png>)
+
 - [@site/\_dogfooding/\_asset-tests/someFile.pdf](@site/_dogfooding/_asset-tests/someFile.pdf)
 
 - [@site/\_dogfooding/\_asset-tests/someFile.xyz](@site/_dogfooding/_asset-tests/someFile.xyz)
 
+- [@site/\_dogfooding/\_asset-tests/image with space.png](<@site/_dogfooding/_asset-tests/image with spaces.png>)
+
 ### Linking to non-SPA page hosted within website
 
 See [#3309](https://github.com/facebook/docusaurus/issues/3309)