feat(SW-2541): Changed asset types to only add the data needed

rte/components/ImageElement.tsx

@@ -1,5 +1,5 @@
 import { Icon, Tooltip, cbModal } from "@contentstack/venus-components"
-import React, { PropsWithChildren, useCallback } from "react"
+import React, { PropsWithChildren, useCallback, useEffect } from "react"
 
 import EmbedBtn from "./EmbedBtn"
 import ImageEditModal from "./ImageEditModal"
@@ -8,28 +8,46 @@ import type {
   IRteElementType,
   IRteParam,
 } from "@contentstack/app-sdk/dist/src/RTE/types"
-import type { InsertResponse } from "~/types/imagevault"
+import type { ImageVaultAsset, InsertResponse } from "~/types/imagevault"
+import {
+  getImageVaultAssetFromData,
+  isInsertResponse,
+} from "~/utils/imagevault"
 
 type ImageElementProps = PropsWithChildren & {
-  element: IRteElementType & { attrs: InsertResponse }
+  element: IRteElementType & { attrs: ImageVaultAsset | InsertResponse }
   rte: IRteParam
 }
 export function ImageElement({ children, element, rte }: ImageElementProps) {
-  const assetUrl = element.attrs.MediaConversions[0].Url
-  const isSelected = rte?.selection?.isSelected()
-  const isFocused = rte?.selection?.isFocused()
+  const imageVaultAsset = getImageVaultAssetFromData(element.attrs)
+  const isSelected = rte.selection.isSelected()
+  const isFocused = rte.selection.isFocused()
+  const path = rte.getPath(element)
   const isHighlight = isFocused && isSelected
 
+  const handleMedia = useCallback(
+    (asset: ImageVaultAsset) => {
+      rte._adv.Transforms.setNodes<IRteElementType>(
+        rte._adv.editor,
+        {
+          attrs: { ...asset },
+        },
+        { at: path }
+      )
+    },
+    [rte, path]
+  )
+
   const handleEdit = useCallback(() => {
     cbModal({
       // @ts-expect-error: Component is badly typed
-      component: (compProps) =>
-        ImageEditModal({
-          element,
-          rte,
-          path: rte.getPath(element),
-          ...compProps,
-        }),
+      component: (compProps) => (
+        <ImageEditModal
+          element={element}
+          setData={handleMedia}
+          {...compProps}
+        />
+      ),
       modalProps: {
         size: "max",
         style: {
@@ -42,7 +60,15 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
         },
       },
     })
-  }, [element, rte])
+  }, [element, handleMedia])
+
+  // The existing data might still be in InsertResponse format if the user has not edited it yet.
+  // We'll convert it to ImageVaultAsset when the user edits the RTE.
+  useEffect(() => {
+    if (isInsertResponse(element.attrs) && imageVaultAsset) {
+      handleMedia(imageVaultAsset)
+    }
+  }, [element.attrs, imageVaultAsset, handleMedia])
 
   const ToolTipButtons = () => {
     return (
@@ -54,7 +80,7 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
         <EmbedBtn
           title="remove"
           content={"Remove"}
-          onClick={() => rte?.removeNode(element)}
+          onClick={() => rte.removeNode(element)}
         >
           <Icon icon="Trash" />
         </EmbedBtn>
@@ -62,78 +88,46 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
     )
   }
 
-  let alignmentStyles = {}
-  const marginAlignment: Record<string, { [key: string]: string }> = {
-    center: { margin: "auto" },
-    left: { marginRight: "auto" },
-    right: { marginLeft: "auto" },
-  }
-
-  if (typeof element.attrs.position === "string") {
-    alignmentStyles = marginAlignment[element.attrs.position]
+  if (!imageVaultAsset) {
+    return <>{children}</>
   }
 
   return (
-    <div
-      style={{
-        ...alignmentStyles,
-        ...element.attrs.style,
-      }}
+    <Tooltip
+      zIndex={909}
+      className="p-0"
+      style={{ marginBottom: "10px" }}
+      position="top"
+      variantType="light"
+      offset={[0, -15]}
+      content={<ToolTipButtons />}
     >
-      <Tooltip
-        zIndex={909}
-        className="p-0"
-        style={{ marginBottom: "10px" }}
-        position="top"
-        variantType="light"
-        offset={[0, -15]}
-        content={<ToolTipButtons />}
-      >
-        <span
-          data-type="asset"
+      <span data-type="asset" contentEditable={false}>
+        <div
           contentEditable={false}
-          style={element.attrs?.style}
+          style={{
+            width: "280px",
+            height: "auto",
+            ...(isHighlight ? { border: "1px solid #6c5ce7" } : {}),
+          }}
         >
-          <div
-            contentEditable={false}
-            style={{
-              width: "280px",
-              height: "auto",
-              ...(isHighlight ? { border: "1px solid #6c5ce7" } : {}),
+          <img
+            src={imageVaultAsset.url}
+            onError={(event) => {
+              event.currentTarget.src = "https://placehold.co/600x400"
             }}
-          >
-            <img
-              src={assetUrl}
-              onError={(event) => {
-                event.currentTarget.src = "https://placehold.co/600x400"
-              }}
-              style={{
-                width: "100%",
-                height: "auto",
-                aspectRatio: element.attrs.MediaConversions[0].AspectRatio,
-                borderRadius: "8px",
-              }}
-              alt={element.attrs.altText}
-              title={element.attrs?.Name}
-            />
-            <div
-              style={{
-                position: "absolute",
-                bottom: 0,
-                right: 0,
-                background: "#fff",
-                color: "#000",
-                height: "25px",
-                padding: "3px",
-                borderRadius: "4px",
-              }}
-            >
-              <Icon icon="Embed" />
-            </div>
-          </div>
-          {children}
-        </span>
-      </Tooltip>
-    </div>
+            style={{
+              width: "100%",
+              height: "auto",
+              aspectRatio: imageVaultAsset.dimensions.aspectRatio,
+              borderRadius: "8px",
+            }}
+            alt={imageVaultAsset.meta.alt}
+            title={`Id: ${imageVaultAsset.imageVaultId} - ${imageVaultAsset.fileName}`}
+          />
+        </div>
+        {children}
+      </span>
+    </Tooltip>
   )
 }