WiP fix: respect noZoom for images (#826)

packages/ui/app/src/mdx/base-components.tsx

@@ -116,45 +116,81 @@ export const A: FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({ className, chil
                 !isValidElement(child)
                     ? child
                     : isImgElement(child)
-                      ? cloneElement<ImgProps>(child, { disableZoom: true })
+                      ? cloneElement<ImgProps>(child, { noZoom: true })
                       : child.type === "img"
-                        ? createElement(Image, { ...child.props, disableZoom: true })
+                        ? createElement(Image, { ...child.props, noZoom: true })
                         : child,
             )}
         </FernLink>
     );
 };
 
 export interface ImgProps extends ComponentProps<"img"> {
-    disableZoom?: boolean;
+    noZoom?: boolean;
 }
 
 function isImgElement(element: ReactElement): element is ReactElement<ImgProps> {
     return element.type === Image;
 }
 
-export const Image: FC<ImgProps> = ({ className, src, height, width, disableZoom, ...rest }) => {
+export const Image: FC<ImgProps> = ({ className, src, width: w, height: h, noZoom, style, ...rest }) => {
     const { files } = useDocsContext();
-    // const mounted = useMounted();
-    // if (!mounted || disableZoom) {
-    //     return <img {...rest} className={cn(className, "max-w-full")} src={src} alt={alt} />;
-    // }
+
     const fernImageSrc = useMemo((): DocsV1Read.File_ | undefined => {
         if (src == null) {
             return undefined;
         }
 
+        // if src starts with `file:`, assume it's a referenced file; fallback to src if not found
         if (src.startsWith("file:")) {
             const fileId = src.slice(5);
-            return files[fileId];
+            return files[fileId] ?? { type: "url", url: src };
         }
 
         return { type: "url", url: src };
     }, [files, src]);
 
+    const width = stripUnits(w);
+    const height = stripUnits(h);
+
+    const fernImage = (
+        <FernImage
+            src={fernImageSrc}
+            width={width}
+            height={height}
+            style={{
+                width: w,
+                height: h,
+                ...style,
+            }}
+            {...rest}
+        />
+    );
+
+    if (noZoom) {
+        return fernImage;
+    }
+
     return (
         <Zoom zoomImg={{ src: fernImageSrc?.url }} classDialog="custom-backdrop">
-            <FernImage src={fernImageSrc} {...rest} />
+            {fernImage}
         </Zoom>
     );
 };
+
+// preserves pixel widths and heights, but strips units from other values
+function stripUnits(str: string | number | undefined): number | `${number}` | undefined {
+    if (str == null || typeof str === "number") {
+        return str;
+    } else if (/^\d+$/.test(str)) {
+        // if str is a number, return it as a string
+        return str as `${number}`;
+    } else if (/^\d+(\.\d+)?(px)$/.test(str)) {
+        // if str is a number followed by "px", return the number as a string
+        return str.slice(0, -2) as `${number}`;
+    }
+
+    // TODO: handle rem
+
+    return undefined;
+}

tests/fern/fern/content/overview/home/january.mdx

@@ -0,0 +1,51 @@
+---
+title: January 2024 Release Notes
+subtitle: Fern product updates and release notes for January 2024
+---
+
+<div className="flex justify-start items-center gap-3 pt-8 -mb-[65px] relative">
+  <img src="../../../images/plus.svg" width="12px" height="12px" noZoom />
+  <span>Added</span>
+</div>
+
+<div className="flex justify-start items-center gap-3 pt-8 -mb-[65px] relative">
+  <img src="../../../images/plus.svg" width="12px" height="100%" noZoom />
+  <span>Added</span>
+</div>
+
+<div className="flex justify-start items-center gap-3 pt-8 -mb-[65px] relative">
+  <img src="../../../images/plus.svg" width="12px" height="auto" noZoom />
+  <span>Added</span>
+</div>
+
+<div className="flex justify-start items-center gap-3 pt-8 -mb-[65px] relative">
+  <img src="../../../images/plus.svg" width="12px" noZoom />
+  <span>Added</span>
+</div>
+
+<div className="flex justify-start items-center gap-3 pt-8 -mb-[65px] relative">
+  <img src="../../../images/plus.svg" style={{ width: 12, height: 12 }} noZoom />
+  <span>Added</span>
+</div>
+
+<div className="flex justify-start items-center gap-3 pt-8 -mb-[65px] relative">
+  <img src="../../../images/plus.svg" width="12" height="12" noZoom />
+  <span>Added</span>
+</div>
+
+---
+
+<div className="flex justify-start items-center gap-3 pt-8 -mb-[65px] relative">
+  <img src="../../../images/plus.svg" width="1em" height="1em" noZoom />
+  <span>Added</span>
+</div>
+
+<div className="flex justify-start items-center gap-3 pt-8 -mb-[65px] relative">
+  <img src="../../../images/plus.svg" width="1rem" height="1rem" noZoom />
+  <span>Added</span>
+</div>
+
+<div className="flex justify-start items-center gap-3 pt-8 -mb-[65px] relative">
+  <img src="../../../images/plus.svg" noZoom />
+  <span>Added</span>
+</div>

tests/fern/fern/docs.yml

@@ -31,6 +31,8 @@ navigation:
             path: ./content/overview/home/introduction.mdx
           - page: Getting Started
             path: ./content/overview/home/getting-started.mdx
+          - page: Release January
+            path: ./content/overview/home/january.mdx
           - page: Components
             path: ./content/components.mdx
             hidden: true

tests/fern/fern/fern.config.json

@@ -1,4 +1,4 @@
 {
   "organization": "fern",
-  "version": "0.20.0-1-g8f601b6ab"
+  "version": "0.26.2-9-g50eeced23"
 }