feat(SW-200): Fixed image sizes for RTE

components/JsonToHtml/jsontohtml.module.css

@@ -1,10 +1,15 @@
-.image {
-  max-width: 100%;
+.imageContainer {
+  position: relative;
   width: 100%;
   height: 365px;
-  object-fit: cover;
   border-radius: var(--Corner-radius-Medium);
   margin: var(--Spacing-x1) var(--Spacing-x0);
+  overflow: hidden;
+}
+
+.image {
+  width: 100%;
+  object-fit: cover;
 }
 
 .ul,

components/JsonToHtml/renderOptions.tsx

@@ -325,14 +325,16 @@ export const renderOptions: RenderOptions = {
             const props = extractPossibleAttributes(node.attrs)
             props.className = styles.image
             return (
-              <Image
-                key={node.uid}
-                alt={alt}
-                height={image.node.dimension.height}
-                src={image.node.url}
-                width={image.node.dimension.width}
-                {...props}
-              />
+              <div className={styles.imageContainer}>
+                <Image
+                  alt={alt}
+                  className={styles.image}
+                  src={image.node.url}
+                  fill
+                  sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
+                  {...props}
+                />
+              </div>
             )
           }
         }
@@ -393,22 +395,20 @@ export const renderOptions: RenderOptions = {
           image = insertResponseToImageVaultAsset(attrs)
         }
         const alt = image.meta.alt ?? image.title
-
-        const width = attrs.width
-          ? parseInt(attrs.width.replaceAll("px", ""))
-          : image.dimensions.width
         const props = extractPossibleAttributes(attrs)
         return (
           <section key={node.uid}>
-            <Image
-              alt={alt}
-              className={styles.image}
-              height={365}
-              src={image.url}
-              width={width}
-              focalPoint={image.focalPoint}
-              {...props}
-            />
+            <div className={styles.imageContainer}>
+              <Image
+                alt={alt}
+                className={styles.image}
+                src={image.url}
+                fill
+                sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
+                focalPoint={image.focalPoint}
+                {...props}
+              />
+            </div>
             <Caption>{image.meta.caption}</Caption>
           </section>
         )

components/JsonToHtml/utils.tsx

@@ -113,6 +113,7 @@ export function nodeToHtml(
   if ("type" in node === false) {
     return textNodeToHtml(node, fullRenderOptions)
   } else {
+    console.log({ NODE: node, EMBEDS: embeds })
     if (fullRenderOptions[node.type] !== undefined) {
       if (node.type === RTETypeEnum.doc) {
         return null