fix: enable image zoom using higher quality (original) image (#770)

fern-api · May 2, 2024 · 9e310db · 9e310db
1 parent c084dd9
commit 9e310db
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 90 deletions.
diff --git a/packages/ui/app/package.json b/packages/ui/app/package.json
@@ -77,7 +77,7 @@
     "mdast-util-mdx-jsx": "^3.1.0",
     "mdast-util-to-hast": "^13.1.0",
     "moment": "^2.30.1",
-    "next": "^14.1.4",
+    "next": "^14.2.3",
     "next-mdx-remote": "^4.4.1",
     "next-themes": "^0.3.0",
     "nprogress": "^0.2.0",

diff --git a/packages/ui/app/src/components/FernImage.tsx b/packages/ui/app/src/components/FernImage.tsx
@@ -34,6 +34,7 @@ export function FernImage({ src, ...props }: FernImage.Props): ReactElement | nu
                     placeholder={props.placeholder ?? (blurDataUrl != null ? "blur" : "empty")}
                     blurDataURL={props.blurDataURL ?? blurDataUrl}
                     unoptimized={props.unoptimized ?? url.includes(".svg")}
+                    overrideSrc={url}
                 />
             );
         },

diff --git a/packages/ui/app/src/mdx/base-components.tsx b/packages/ui/app/src/mdx/base-components.tsx
@@ -1,6 +1,5 @@
 import { DocsV1Read } from "@fern-api/fdr-sdk";
 import cn from "clsx";
-import { toNumber } from "lodash-es";
 import {
     AnchorHTMLAttributes,
     Children,
@@ -152,15 +151,10 @@ export const Image: FC<ImgProps> = ({ className, src, height, width, disableZoom
 
         return { type: "url", url: src };
     }, [files, src]);
+
     return (
-        <Zoom>
-            {/* <img {...rest} className={cn(className, "max-w-full")} src={src} alt={alt} /> */}
-            <FernImage
-                src={fernImageSrc}
-                {...rest}
-                height={height != null ? toNumber(height) : undefined}
-                width={height != null ? toNumber(width) : undefined}
-            />
+        <Zoom zoomImg={{ src: fernImageSrc?.url }}>
+            <FernImage src={fernImageSrc} {...rest} />
         </Zoom>
     );
 };
diff --git a/packages/ui/docs-bundle/package.json b/packages/ui/docs-bundle/package.json
@@ -52,7 +52,7 @@
     "cssnano": "^6.0.3",
     "jose": "^5.2.3",
     "jsonpath": "^1.1.1",
-    "next": "^14.1.1",
+    "next": "^14.2.3",
     "node-fetch": "2.7.0",
     "postcss-import": "^16.0.1",
     "react": "^18.2.0",

diff --git a/packages/ui/fontawesome-cdn/package.json b/packages/ui/fontawesome-cdn/package.json
@@ -50,7 +50,7 @@
     "depcheck": "^1.4.3",
     "eslint": "^8.56.0",
     "vitest": "^1.5.0",
-    "next": "^14.1.1",
+    "next": "^14.2.3",
     "organize-imports-cli": "^0.10.0",
     "prettier": "^3.2.4",
     "stylelint": "^16.1.0",

diff --git a/packages/ui/local-preview-bundle/package.json b/packages/ui/local-preview-bundle/package.json
@@ -39,7 +39,7 @@
     "cssnano": "^6.0.3",
     "jsonpath": "^1.1.1",
     "lodash-es": "^4.17.21",
-    "next": "^14.1.1",
+    "next": "^14.2.3",
     "node-fetch": "2.7.0",
     "postcss-import": "^16.0.1",
     "react": "^18.2.0",