From 94c1cb0a17f2cfca5bff3b3144fc110449daf74b Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 27 Sep 2024 20:33:41 +0530
Subject: [PATCH] fix: convert image size to string

---
 .../extensions/custom-image/components/image-block.tsx | 10 ++++++++--
 .../extensions/custom-image/components/image-node.tsx  |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/core/extensions/custom-image/components/image-block.tsx b/packages/editor/src/core/extensions/custom-image/components/image-block.tsx
index 565c37c5407..34e936c723e 100644
--- a/packages/editor/src/core/extensions/custom-image/components/image-block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/image-block.tsx
@@ -11,7 +11,10 @@ export const CustomImageBlock: React.FC<CustomImageNodeViewProps> = (props) => {
   const { node, updateAttributes, selected, getPos, editor } = props;
   const { src, width, height } = node.attrs;
 
-  const [size, setSize] = useState({ width: width || "35%", height: height || "auto" });
+  const [size, setSize] = useState({
+    width: width?.toString() || "35%",
+    height: height?.toString() || "auto",
+  });
   const [isLoading, setIsLoading] = useState(true);
   const [initialResizeComplete, setInitialResizeComplete] = useState(false);
   const isShimmerVisible = isLoading || !initialResizeComplete;
@@ -56,7 +59,10 @@ export const CustomImageBlock: React.FC<CustomImageNodeViewProps> = (props) => {
   }, [width, height, updateAttributes]);
 
   useLayoutEffect(() => {
-    setSize({ width, height });
+    setSize({
+      width: width?.toString(),
+      height: height?.toString(),
+    });
   }, [width, height]);
 
   const handleResizeStart = useCallback(
diff --git a/packages/editor/src/core/extensions/custom-image/components/image-node.tsx b/packages/editor/src/core/extensions/custom-image/components/image-node.tsx
index 4786d8f997a..94d58f712b2 100644
--- a/packages/editor/src/core/extensions/custom-image/components/image-node.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/image-node.tsx
@@ -15,8 +15,8 @@ export type CustomImageNodeViewProps = {
   node: ProsemirrorNode & {
     attrs: {
       src: string;
-      width: string;
-      height: string;
+      width: number | string;
+      height: number | string;
     };
   };
   updateAttributes: (attrs: Record<string, any>) => void;