From 37bcde648fda7464dd8623d2f4a21695cbacc551 Mon Sep 17 00:00:00 2001
From: NECMI <necmi.m.hasan@outlook.de>
Date: Sun, 11 Feb 2024 22:47:13 +0100
Subject: [PATCH] UPDATE image-element.tsx: fixed #2574

Added wrapper for `readOnly`, so the image will not be resizable in preview mode (`readOnly`).
---
 .../default/plate-ui/image-element.tsx        | 82 +++++++++++--------
 1 file changed, 49 insertions(+), 33 deletions(-)

diff --git a/apps/www/src/registry/default/plate-ui/image-element.tsx b/apps/www/src/registry/default/plate-ui/image-element.tsx
index 236c203c18..7456bed278 100644
--- a/apps/www/src/registry/default/plate-ui/image-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/image-element.tsx
@@ -26,40 +26,56 @@ export const ImageElement = withHOC(
             className={cn('py-2.5', className)}
             {...props}
           >
-            <figure className="group relative m-0" contentEditable={false}>
-              <Resizable
-                align={align}
-                options={{
-                  align,
-                  readOnly,
-                }}
-              >
-                <ResizeHandle
-                  options={{ direction: 'left' }}
-                  className={mediaResizeHandleVariants({ direction: 'left' })}
-                />
-                <Image
-                  className={cn(
-                    'block w-full max-w-full cursor-pointer object-cover px-0',
-                    'rounded-sm',
-                    focused && selected && 'ring-2 ring-ring ring-offset-2'
-                  )}
-                  alt=""
-                  {...nodeProps}
-                />
-                <ResizeHandle
-                  options={{ direction: 'right' }}
-                  className={mediaResizeHandleVariants({ direction: 'right' })}
-                />
-              </Resizable>
+            {!readOnly && (
+              <figure className="group relative m-0" contentEditable={false}>
+                <Resizable
+                  align={align}
+                  options={{
+                    align,
+                    readOnly,
+                  }}
+                >
+                  <ResizeHandle
+                    options={{ direction: 'left' }}
+                    className={mediaResizeHandleVariants({ direction: 'left' })}
+                  />
+                  <Image
+                    className={cn(
+                      'block w-full max-w-full cursor-pointer object-cover px-0',
+                      'rounded-sm',
+                      focused && selected && 'ring-2 ring-ring ring-offset-2',
+                    )}
+                    alt=""
+                    {...nodeProps}
+                  />
+                  <ResizeHandle
+                    options={{ direction: 'right' }}
+                    className={mediaResizeHandleVariants({
+                      direction: 'right',
+                    })}
+                  />
+                </Resizable>
 
-              <Caption align={align} style={{ width }}>
-                <CaptionTextarea
-                  placeholder="Write a caption..."
-                  readOnly={readOnly}
-                />
-              </Caption>
-            </figure>
+                <Caption align={align} style={{ width }}>
+                  <CaptionTextarea
+                    placeholder="Write a caption..."
+                    readOnly={readOnly}
+                  />
+                </Caption>
+              </figure>
+            )}
+
+            {readOnly && (
+              <Image
+                className={cn(
+                  'block w-full max-w-full object-cover px-0',
+                  'rounded-sm',
+                  focused && selected && 'ring-2 ring-ring ring-offset-2',
+                )}
+                alt=""
+                {...nodeProps}
+              />
+            )}
 
             {children}
           </PlateElement>