feat: Improve ImageBlockComponent with responsive resizing and layout

apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx

@@ -29,6 +29,7 @@ function ImageBlockComponent(props: any) {
   const [imageSize, setImageSize] = React.useState({
     width: props.node.attrs.size ? props.node.attrs.size.width : 300,
   })
+  
   const fileId = blockObject
     ? `${blockObject.content.file_id}.${blockObject.content.file_format}`
     : null
@@ -54,13 +55,14 @@ function ImageBlockComponent(props: any) {
   useEffect(() => {}, [course, org])
 
   return (
-    <NodeViewWrapper className="block-image">
+    <NodeViewWrapper className="block-image w-full">
      <FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Image}>
         <FileUploadBlockInput onChange={handleImageChange} accept={SUPPORTED_FILES} />
         <FileUploadBlockButton onClick={handleSubmit} disabled={!image}/>
       </FileUploadBlock>
       
-      {blockObject && (
+      {blockObject && isEditable && (
+        <div className="w-full flex justify-center">
           <Resizable
             defaultSize={{ width: imageSize.width, height: '100%' }}
             handleStyles={{
@@ -77,22 +79,24 @@ function ImageBlockComponent(props: any) {
               },
             }}
             style={{
-            margin: 'auto',
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
               height: '100%',
+              maxWidth: '100%',
             }}
-          maxWidth={1000}
+            maxWidth="100%"
             minWidth={200}
+            enable={{ right: true }}
             onResizeStop={(e, direction, ref, d) => {
+              const newWidth = Math.min(imageSize.width + d.width, ref.parentElement?.clientWidth || 1000);
               props.updateAttributes({
                 size: {
-                width: imageSize.width + d.width,
+                  width: newWidth,
                 },
               })
               setImageSize({
-              width: imageSize.width + d.width,
+                width: newWidth,
               })
             }}
           >
@@ -106,10 +110,31 @@ function ImageBlockComponent(props: any) {
                 'imageBlock'
               )}`}
               alt=""
-            className="rounded-lg shadow "
+              className="rounded-lg shadow max-w-full h-auto"
+              style={{ width: '100%' }}
             />
           </Resizable>
+        </div>
       )}
+
+      {blockObject && !isEditable && (
+        <div className="w-full flex justify-center">
+          <img
+            src={`${getActivityBlockMediaDirectory(
+              org?.org_uuid,
+              course?.courseStructure.course_uuid,
+              props.extension.options.activity.activity_uuid,
+              blockObject.block_uuid,
+              blockObject ? fileId : ' ',
+              'imageBlock'
+            )}`}
+            alt=""
+            className="rounded-lg shadow max-w-full h-auto"
+            style={{ width: imageSize.width, maxWidth: '100%' }}
+          />
+        </div>
+      )}
+
       {isLoading && (
         <div>
           <AlertTriangle color="#e1e0e0" size={50} />