feat(mdx-loader): read image dimensions when processing Markdown (#6339)

package.json

@@ -96,7 +96,7 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "glob": "^7.1.6",
     "husky": "^7.0.4",
-    "image-size": "^1.0.0",
+    "image-size": "^1.0.1",
     "jest": "^26.6.3",
     "lerna": "^4.0.0",
     "lerna-changelog": "^1.0.1",

packages/docusaurus-mdx-loader/package.json

@@ -28,6 +28,7 @@
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
     "gray-matter": "^4.0.3",
+    "image-size": "^1.0.1",
     "mdast-util-to-string": "^2.0.0",
     "remark-emoji": "^2.1.0",
     "stringify-object": "^3.3.0",

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

@@ -17,8 +17,11 @@ import path from 'path';
 import url from 'url';
 import fs from 'fs-extra';
 import escapeHtml from 'escape-html';
+import sizeOf from 'image-size';
+import {promisify} from 'util';
 import type {Plugin, Transformer} from 'unified';
 import type {Image, Literal} from 'mdast';
+import logger from '@docusaurus/logger';
 
 const {
   loaders: {inlineMarkdownImageFileLoader},
@@ -30,7 +33,11 @@ interface PluginOptions {
   siteDir: string;
 }
 
-function toImageRequireNode(node: Image, imagePath: string, filePath: string) {
+async function toImageRequireNode(
+  node: Image,
+  imagePath: string,
+  filePath: string,
+) {
   const jsxNode = node as Literal & Partial<Image>;
   let relativeImagePath = posixPath(
     path.relative(path.dirname(filePath), imagePath),
@@ -46,13 +53,27 @@ function toImageRequireNode(node: Image, imagePath: string, filePath: string) {
     escapePath(relativeImagePath) + search
   }").default${hash ? ` + '${hash}'` : ''}`;
   const title = node.title ? ` title="${escapeHtml(node.title)}"` : '';
+  let width = '';
+  let height = '';
+  try {
+    const size = (await promisify(sizeOf)(imagePath))!;
+    if (size.width) {
+      width = ` width="${size.width}"`;
+    }
+    if (size.height) {
+      height = ` height="${size.height}"`;
+    }
+  } catch (e) {
+    logger.error`The image at path=${imagePath} can't be read correctly. Please ensure it's a valid image.
+${(e as Error).message}`;
+  }
 
   Object.keys(jsxNode).forEach(
     (key) => delete jsxNode[key as keyof typeof jsxNode],
   );
 
   (jsxNode as Literal).type = 'jsx';
-  jsxNode.value = `<img ${alt}src={${src}}${title} />`;
+  jsxNode.value = `<img ${alt}src={${src}}${title}${width}${height} />`;
 }
 
 async function ensureImageFileExist(imagePath: string, sourceFilePath: string) {
@@ -124,7 +145,7 @@ async function processImageNode(node: Image, options: PluginOptions) {
   }
 
   const imagePath = await getImageAbsolutePath(parsedUrl.pathname, options);
-  toImageRequireNode(node, imagePath, options.filePath);
+  await toImageRequireNode(node, imagePath, options.filePath);
 }
 
 const plugin: Plugin<[PluginOptions]> = (options) => {

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

@@ -44,7 +44,7 @@ exports[`transformAsset plugin transform md links to <a /> 1`] = `
 
 <a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}>Just staticAsset.pdf</a>, and <a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}><strong>awesome</strong> staticAsset 2.pdf &#39;It is really &quot;AWESOME&quot;&#39;</a>, but also <a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}>coded <code>staticAsset 3.pdf</code></a>
 
-<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAssetImage.png').default}><img alt={\\"Clickable Docusaurus logo\\"} src={require(\\"![CWD]/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=[CWD]/node_modules/file-loader/dist/cjs.js!./static/staticAssetImage.png\\").default} /></a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAssetImage.png').default}><img alt={\\"Clickable Docusaurus logo\\"} src={require(\\"![CWD]/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=[CWD]/node_modules/file-loader/dist/cjs.js!./static/staticAssetImage.png\\").default} width=\\"200\\" height=\\"200\\" /></a>
 
 <a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default}><span style={{color: \\"red\\"}}>Stylized link to asset file</span></a>
 "

packages/docusaurus-theme-classic/src/theme/MDXComponents/styles.css

@@ -9,3 +9,7 @@ ul.contains-task-list {
   padding-left: 0;
   list-style: none;
 }
+
+img {
+  height: auto;
+}

website/src/css/custom.css

@@ -181,6 +181,3 @@ html[data-theme='dark'] img[src$='#gh-light-mode-only'] {
 .test-marker-site-custom-css-unique-rule {
   content: 'site-custom-css-unique-rule';
 }
-.test-marker-site-custom-css-shared-rule {
-  max-width: 100%;
-}

website/testCSSOrder.mjs

@@ -35,7 +35,6 @@ const EXPECTED_CSS_MARKERS = [
   '.DocSearch-Hit-content-wrapper',
   '.navbar__title',
   '--ifm-color-scheme:light',
-  '.test-marker-site-custom-css-shared-rule',
   '.col[class*=col--]',
   '.padding-vert--xl',
   '.footer__link-item',

yarn.lock

@@ -10194,7 +10194,7 @@ image-q@^1.1.1:
   resolved "https://registry.yarnpkg.com/image-q/-/image-q-1.1.1.tgz#fc84099664460b90ca862d9300b6bfbbbfbf8056"
   integrity sha1-/IQJlmRGC5DKhi2TALa/u7+/gFY=
 
-image-size@^1.0.0:
+image-size@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-1.0.1.tgz#86d6cfc2b1d19eab5d2b368d4b9194d9e48541c5"
   integrity sha512-VAwkvNSNGClRw9mDHhc5Efax8PLlsOGcUTh0T/LIriC8vPA3U5PdqXWqkz406MoYHMKW8Uf9gWr05T/rYB44kQ==