fix(mdx-loader): allow image paths to be URL encoded (#6792)

packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/img.md

@@ -8,6 +8,8 @@
 
 ![img from second static folder](./static2/img2.png)
 
+![img with URL encoded chars](./static2/img2%20copy.png)
+
 ![img](./static/img.png 'Title') ![img](/img.png)
 
 ![img with "quotes"](./static/img.png ''Quoted' title')

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

@@ -27,6 +27,8 @@ exports[`transformImage plugin transform md images to <img /> 1`] = `
 
 <img loading=\\"lazy\\" alt={\\"img from second static folder\\"} 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!./static2/img2.png\\").default} width=\\"256\\" height=\\"82\\" />
 
+<img loading=\\"lazy\\" alt={\\"img with URL encoded chars\\"} 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!./static2/img2 copy.png\\").default} width=\\"256\\" height=\\"82\\" />
+
 <img loading=\\"lazy\\" 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.png\\").default} title=\\"Title\\" width=\\"200\\" height=\\"200\\" /> <img loading=\\"lazy\\" 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.png\\").default} width=\\"200\\" height=\\"200\\" />
 
 <img loading=\\"lazy\\" alt={\\"img with &quot;quotes&quot;\\"} 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.png\\").default} title=\\"&#39;Quoted&#39; title\\" width=\\"200\\" height=\\"200\\" />

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

@@ -121,7 +121,10 @@ async function getImageAbsolutePath(
     return imageFilePath;
   }
   // relative paths are resolved against the source file's folder
-  const imageFilePath = path.join(path.dirname(filePath), imagePath);
+  const imageFilePath = path.join(
+    path.dirname(filePath),
+    decodeURIComponent(imagePath),
+  );
   await ensureImageFileExist(imageFilePath, filePath);
   return imageFilePath;
 }

packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/__fixtures__/asset.md

@@ -4,6 +4,8 @@
 
 [asset](./asset.pdf)
 
+[asset with URL encoded chars](./asset%20%282%29.pdf)
+
 [asset with hash](./asset.pdf#page=2)
 
 [asset](asset.pdf 'Title')

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

@@ -16,6 +16,8 @@ exports[`transformAsset plugin transform md links to <a /> 1`] = `
 
 <a target=\\"_blank\\" href={require('!<PROJECT_ROOT>/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[contenthash].[ext]!./asset.pdf').default}>asset</a>
 
+<a target=\\"_blank\\" href={require('!<PROJECT_ROOT>/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[contenthash].[ext]!./asset (2).pdf').default}>asset with URL encoded chars</a>
+
 <a target=\\"_blank\\" href={require('!<PROJECT_ROOT>/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[contenthash].[ext]!./asset.pdf').default + '#page=2'}>asset with hash</a>
 
 <a target=\\"_blank\\" href={require('!<PROJECT_ROOT>/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[contenthash].[ext]!./asset.pdf').default} title=\\"Title\\">asset</a>

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

@@ -130,7 +130,10 @@ async function processLinkNode(node: Link, context: Context) {
     return;
   }
 
-  const assetPath = await getAssetAbsolutePath(parsedUrl.pathname, context);
+  const assetPath = await getAssetAbsolutePath(
+    decodeURIComponent(parsedUrl.pathname),
+    context,
+  );
   if (assetPath) {
     toAssetRequireNode(node, assetPath, context.filePath);
   }

website/_dogfooding/_docs tests/tests/img-tests.mdx

@@ -10,6 +10,8 @@ import docusaurusImport from '@site/static/img/docusaurus.png';
 
 export const docusaurusRequire = require('@site/static/img/docusaurus.png');
 
+![URL encoded image](./img/oss_logo%20%282%29.png)
+
 ## Regular images
 
 <img src={docusaurusImport} />