Style inline images properly

Author: benface

packages/rehype-unwrap-images/index.js

@@ -1,22 +1,19 @@
 /**
- * @import {Element, Root} from 'hast'
+ * @import {Root} from 'hast'
  */
 
-/**
- * This is a private fork of https://github.com/rehypejs/rehype-unwrap-images to work around a Nextra bug.
- * See https://github.com/rehypejs/rehype-unwrap-images/pull/1 for why this won't be merged upstream.
- */
-
-import { interactive } from 'hast-util-interactive'
 import { whitespace } from 'hast-util-whitespace'
 import { SKIP, visit } from 'unist-util-visit'
 
-const unknown = 1
-const containsImage = 2
-const containsOther = 3
+const isImage = (node) =>
+  (node.type === 'element' && node.tagName === 'img') || (node.type === 'mdxJsxFlowElement' && node.name === 'img')
 
 /**
- * Remove the wrapping paragraph for images.
+ * This plugin does two things:
+ * 1. Removes the `p` tag when it only contains images (and whitespace)
+ * 2. Adds data attributes to help with image rendering:
+ *    - `data-wrapping-image` to links that contain an image
+ *    - `data-inline-image` to images that are in a paragraph with other content (text, links, etc.)
  *
  * @returns
  *   Transform.
@@ -32,54 +29,38 @@ export default function rehypeUnwrapImages() {
    */
   return function (tree) {
     visit(tree, 'element', function (node, index, parent) {
-      if (node.tagName === 'p' && parent && typeof index === 'number' && applicable(node, false) === containsImage) {
-        parent.children.splice(index, 1, ...node.children)
-        return [SKIP, index]
-      }
-    })
-  }
-}
-
-/**
- * Check if a node can be unraveled.
- *
- * @param {Element} node
- *   Node.
- * @param {boolean} inLink
- *   Whether the node is in a link.
- * @returns {1 | 2 | 3}
- *   Info.
- */
-function applicable(node, inLink) {
-  /** @type {1 | 2 | 3} */
-  let image = unknown
-  let index = -1
-
-  while (++index < node.children.length) {
-    const child = node.children[index]
+      if (node.tagName === 'p' && parent && typeof index === 'number') {
+        // First pass: check if the paragraph contains any non-image content
+        const hasNonImageContent = node.children.some((child) => {
+          if (child.type === 'text') {
+            return !whitespace(child.value)
+          } else {
+            return !isImage(child)
+          }
+        })
 
-    if (child.type === 'text' && whitespace(child.value)) {
-      // Whitespace is fine.
-    } else if (
-      (child.type === 'element' && child.tagName === 'img') ||
-      (child.type === 'mdxJsxFlowElement' && child.name === 'img')
-    ) {
-      image = containsImage
-    } else if (!inLink && interactive(child)) {
-      // Cast as `interactive` is always `Element`.
-      const linkResult = applicable(/** @type {Element} */ (child), true)
+        // Second pass: add data attributes
+        node.children.forEach((child) => {
+          if (child.type === 'element' && child.tagName === 'a' && child.children.some(isImage)) {
+            child.properties = child.properties || {}
+            child.properties['data-wrapping-image'] = true
+          } else if (isImage(child) && hasNonImageContent) {
+            if (child.type === 'mdxJsxFlowElement') {
+              child.attributes = child.attributes || []
+              child.attributes.push({ type: 'mdxJsxAttribute', name: 'data-inline-image', value: true })
+            } else {
+              child.properties = child.properties || {}
+              child.properties['data-inline-image'] = true
+            }
+          }
+        })
 
-      if (linkResult === containsOther) {
-        return containsOther
+        // If the paragraph only contains images (and whitespace), remove it
+        if (!hasNonImageContent) {
+          parent.children.splice(index, 1, ...node.children)
+          return [SKIP, index]
+        }
       }
-
-      if (linkResult === containsImage) {
-        image = containsImage
-      }
-    } else {
-      return containsOther
-    }
+    })
   }
-
-  return image
 }

website/src/layout/Layout.tsx

@@ -1,18 +1,21 @@
 import merge from 'lodash/merge'
+import NextImage from 'next/image'
 import { NextSeo, type NextSeoProps } from 'next-seo'
 import type { NextraThemeLayoutProps } from 'nextra'
 import { useFSRoute, useRouter } from 'nextra/hooks'
 import { MDXProvider } from 'nextra/mdx'
 import { normalizePages } from 'nextra/normalize-pages'
-import { type ReactNode, useEffect, useState } from 'react'
+import { type ComponentProps, createContext, type ReactNode, useContext, useEffect, useState } from 'react'
 
 import type { WithOptional } from '@edgeandnode/common'
 import {
   ButtonOrLink,
+  classNames,
   ExperimentalAppLauncher,
   ExperimentalButton,
   ExperimentalCodeInline,
   ExperimentalLink,
+  type ExperimentalLinkProps,
   ExperimentalLocaleSwitcher,
   ExperimentalNavLink,
   type NestedStrings,
@@ -44,6 +47,7 @@ import {
   DocSearch,
   Heading,
   Image,
+  type ImageProps,
   NavigationGroup,
   NavigationItem,
   Table,
@@ -521,18 +525,17 @@ export default function Layout({ pageOpts, children }: NextraThemeLayoutProps<Fr
           <div>
             <MDXProvider
               components={{
-                // TODO: Get rid of the `as any`s
-                a: ExperimentalLink as any,
-                Link: ExperimentalLink,
+                a: LinkWrapper,
                 blockquote: Callout,
+                // TODO: Get rid of the `as any`
                 code: ExperimentalCodeInline as any,
                 h1: Heading.H1,
                 h2: Heading.H2,
                 h3: Heading.H3,
                 h4: Heading.H4,
                 h5: Heading.H5,
                 h6: Heading.H6,
-                img: Image,
+                img: ImageWrapper,
                 // TODO: Fix "[Shiki] X instances have been created. Shiki is supposed to be used as a singleton" warnings
                 pre: CodeBlock,
                 // TODO: Build and use `ExperimentalTable`
@@ -605,3 +608,26 @@ export default function Layout({ pageOpts, children }: NextraThemeLayoutProps<Fr
     </LayoutContext.Provider>
   )
 }
+
+const LinkContext = createContext<{} | null>(null)
+
+function LinkWrapper({ children, ...props }: ComponentProps<'a'>) {
+  if ('data-wrapping-image' in props) {
+    return (
+      <LinkContext.Provider value={{}}>
+        <a {...props}>{children}</a>
+      </LinkContext.Provider>
+    )
+  }
+  return <ExperimentalLink {...(props as ExperimentalLinkProps.ExternalLinkProps)}>{children}</ExperimentalLink>
+}
+
+function ImageWrapper({ src: passedSrc, className, ...props }: ImageProps) {
+  const linkContext = useContext(LinkContext)
+  if (linkContext || 'data-inline-image' in props) {
+    const src =
+      typeof passedSrc === 'object' ? ('default' in passedSrc ? passedSrc.default.src : passedSrc.src) : passedSrc
+    return <img src={src} alt="" className={classNames(['inline-block', className])} {...props} />
+  }
+  return <Image src={passedSrc} className={className} {...props} />
+}