fix: rehype inject filesv2 for estree (#2081)

packages/fern-docs/mdx/src/index.ts

@@ -1,4 +1,7 @@
-export type { MdxJsxAttribute } from "mdast-util-mdx";
+export type {
+  MdxJsxAttribute,
+  MdxJsxExpressionAttribute,
+} from "mdast-util-mdx";
 export type { MDXComponents } from "mdx/types";
 export type { PluggableList } from "unified";
 export {

packages/fern-docs/ui/package.json

@@ -81,6 +81,7 @@
     "colorjs.io": "^0.5.2",
     "es-toolkit": "^1.27.0",
     "esbuild": "0.24.2",
+    "estree-walker": "^3.0.3",
     "fastdom": "^1.0.12",
     "framer-motion": "^11.2.4",
     "github-slugger": "^2.0.0",

packages/fern-docs/ui/src/components/FernImage.tsx

@@ -52,7 +52,10 @@ export const FernImage = forwardRef<
 
   // nextjs requires a strict allowlist of hosts for <Image>
   // so we'll fall back to <img> if the host is not in the allowlist (or if no custom loader is provided)
-  if ((!host || !NEXT_IMAGE_HOSTS.includes(host)) && !loader) {
+  if (
+    ((!host || !NEXT_IMAGE_HOSTS.includes(host)) && !loader) ||
+    (!width && !height)
+  ) {
     return (
       <img
         ref={ref}

packages/fern-docs/ui/src/mdx/plugins/rehype-files.ts

@@ -1,10 +1,16 @@
-import type { Hast } from "@fern-docs/mdx";
+import type {
+  Hast,
+  MdxJsxAttribute,
+  MdxJsxExpressionAttribute,
+} from "@fern-docs/mdx";
 import {
   isMdxJsxAttribute,
   isMdxJsxElementHast,
   mdxJsxAttributeToString,
   visit,
 } from "@fern-docs/mdx";
+import { walk } from "estree-walker";
+
 import type { ImageData } from "../../atoms/types";
 
 export interface RehypeFilesOptions {
@@ -121,5 +127,43 @@ export function rehypeFiles(
         }
       }
     });
+
+    // additional support for jsx attributes that are nested inside of jsx attributes
+    visit(tree, (node) => {
+      if (isMdxJsxElementHast(node)) {
+        node.attributes.forEach((attr) => {
+          const estree = getEstree(attr);
+          if (estree == null) {
+            return;
+          }
+          walk(estree, {
+            enter(node) {
+              if (node.type === "Literal" && typeof node.value === "string") {
+                // TODO: if the replaced src is a Image (contains width and height), we need to add them to the parent JSX root somehow.
+                // for example: <Card icon={<img src="fileId" />} /> -> <Card icon={<img src="replacedImgUrl" width={w} height={h} />} />
+                // currently, we cannot leverage NextJS Image Optimization for this edge case.
+                node.value =
+                  options.replaceSrc?.(node.value)?.src ?? node.value;
+              }
+            },
+          });
+        });
+      }
+    });
   };
 }
+
+function getEstree(attr: MdxJsxAttribute | MdxJsxExpressionAttribute) {
+  if (
+    attr.type === "mdxJsxAttribute" &&
+    attr.value &&
+    typeof attr.value !== "string" &&
+    attr.value.type === "mdxJsxAttributeValueExpression" &&
+    attr.value.data?.estree
+  ) {
+    return attr.value.data?.estree;
+  } else if (attr.type === "mdxJsxExpressionAttribute" && attr.data?.estree) {
+    return attr.data?.estree;
+  }
+  return null;
+}