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

components/JsonToHtml/jsontohtml.module.css

@@ -1,10 +1,15 @@
-.image {
+.imageContainer {
-  max-width: 100%;
+  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 (
+              <div className={styles.imageContainer}>
                 <Image
-                key={node.uid}
                   alt={alt}
-                height={image.node.dimension.height}
+                  className={styles.image}
                   src={image.node.url}
-                width={image.node.dimension.width}
+                  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}>
+            <div className={styles.imageContainer}>
               <Image
                 alt={alt}
                 className={styles.image}
-              height={365}
                 src={image.url}
-              width={width}
+                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