From e4fb151a71b4dd43967ede64f9b3425cf6ffe131 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 18 Apr 2023 19:49:56 -0400
Subject: [PATCH] fix: NaN invalid CSS width issue

---
 shared/editor/components/ImageZoom/Controlled.tsx | 4 ++--
 shared/editor/components/ImageZoom/utils.ts       | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/shared/editor/components/ImageZoom/Controlled.tsx b/shared/editor/components/ImageZoom/Controlled.tsx
index ddd08cfdf..61d2cff56 100644
--- a/shared/editor/components/ImageZoom/Controlled.tsx
+++ b/shared/editor/components/ImageZoom/Controlled.tsx
@@ -574,8 +574,8 @@ class ControlledBase extends Component<
       tmp.innerHTML = imgEl.outerHTML;
 
       const svg = tmp.firstChild as SVGSVGElement;
-      svg.style.width = `${styleModalImg.width ?? 0}px`;
-      svg.style.height = `${styleModalImg.height ?? 0}px`;
+      svg.style.width = `${styleModalImg.width || 0}px`;
+      svg.style.height = `${styleModalImg.height || 0}px`;
       svg.addEventListener("click", this.handleUnzoom);
 
       refModalImg.current?.firstChild?.remove?.();
diff --git a/shared/editor/components/ImageZoom/utils.ts b/shared/editor/components/ImageZoom/utils.ts
index c350aaaa9..30d8ff07d 100644
--- a/shared/editor/components/ImageZoom/utils.ts
+++ b/shared/editor/components/ImageZoom/utils.ts
@@ -75,8 +75,11 @@ export const getScale: GetScale = ({
   offset,
   targetHeight,
   targetWidth,
-}) =>
-  !hasScalableSrc && targetHeight && targetWidth
+}) => {
+  if (!containerHeight || !containerWidth) {
+    return 1;
+  }
+  return !hasScalableSrc && targetHeight && targetWidth
     ? getScaleToWindowMax({
         containerHeight,
         containerWidth,
@@ -89,6 +92,7 @@ export const getScale: GetScale = ({
         offset,
         width: containerWidth,
       });
+};
 
 const URL_REGEX = /url(?:\(['"]?)(.*?)(?:['"]?\))/;