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

rte/components/ImageEditModal.tsx

@@ -1,154 +1,65 @@
 import {
   Button,
   ButtonGroup,
-  Field,
+  Field as FieldComponent,
   FieldLabel,
   ModalBody,
   ModalFooter,
   ModalHeader,
-  Select,
   TextInput,
 } from "@contentstack/venus-components"
 import React, { ChangeEvent, useEffect, useState } from "react"
-import { Path } from "slate"
 
-import type {
-  IRteElementType,
-  IRteParam,
-} from "@contentstack/app-sdk/dist/src/RTE/types"
+import type { IRteElementType } from "@contentstack/app-sdk/dist/src/RTE/types"
 import FocalPointPicker from "~/shared-components/FocalPointPicker"
 
-import type { FocalPoint, InsertResponse } from "~/types/imagevault"
-
-enum DropdownValues {
-  center = "center",
-  left = "left",
-  right = "right",
-  none = "none",
-}
-
-type DropDownItem = {
-  label: string
-  value: DropdownValues
-  type: string
-}
-
-const dropdownList: DropDownItem[] = [
-  {
-    label: "None",
-    value: DropdownValues.none,
-    type: "select",
-  },
-  {
-    label: "Center",
-    value: DropdownValues.center,
-    type: "select",
-  },
-  {
-    label: "Left",
-    value: DropdownValues.left,
-    type: "select",
-  },
-  {
-    label: "Right",
-    value: DropdownValues.right,
-    type: "select",
-  },
-]
+import type { FocalPoint, ImageVaultAsset } from "~/types/imagevault"
 
 type ImageEditModalProps = {
   element: IRteElementType & {
-    attrs: InsertResponse
+    attrs: ImageVaultAsset
   }
-  rte: IRteParam
+  setData: (data: ImageVaultAsset) => void
   closeModal: () => void
-  path: Path
 }
 
 export default function ImageEditModal({
   element,
+  setData,
   closeModal,
-  path,
-  rte,
 }: ImageEditModalProps) {
-  const [alignment, setAlignment] = useState<DropDownItem>({
-    label: "None",
-    value: DropdownValues.none,
-    type: "select",
-  })
+  const imageVaultAsset: ImageVaultAsset = element.attrs
   const [altText, setAltText] = useState("")
   const [caption, setCaption] = useState("")
   const [focalPoint, setFocalPoint] = useState<FocalPoint>({ x: 50, y: 50 })
 
-  const assetUrl = element.attrs.MediaConversions[0].Url
+  const assetUrl = imageVaultAsset.url
 
   useEffect(() => {
-    if (element.attrs.Metadata && element.attrs.Metadata.length) {
-      const altText = element.attrs.Metadata.find((meta) =>
-        meta.Name.includes("AltText_")
-      )?.Value
-
-      const caption = element.attrs.Metadata.find((meta) =>
-        meta.Name.includes("Title_")
-      )?.Value
-
-      setAltText(altText ?? "")
-      setCaption(caption ?? "")
+    if (imageVaultAsset.meta.alt) {
+      setAltText(imageVaultAsset.meta.alt)
     }
-  }, [element.attrs.Metadata])
+    if (imageVaultAsset.meta.caption) {
+      setCaption(imageVaultAsset.meta.caption)
+    }
+  }, [imageVaultAsset.meta])
 
   useEffect(() => {
-    if (element.attrs.FocalPoint) {
-      setFocalPoint(element.attrs.FocalPoint)
+    if (imageVaultAsset.focalPoint) {
+      setFocalPoint(imageVaultAsset.focalPoint)
     }
-  }, [element.attrs.FocalPoint])
+  }, [imageVaultAsset.focalPoint])
 
   function handleSave() {
-    let newStyle
-
-    switch (alignment.value) {
-      case DropdownValues.center:
-      case DropdownValues.left:
-      case DropdownValues.right:
-        newStyle = {
-          textAlign: alignment.value,
-          maxWidth: element.attrs.width
-            ? `${element.attrs.width}px`
-            : undefined,
-        }
-        break
-      case DropdownValues.none:
-      default:
-        newStyle = {}
-        break
-    }
-
-    const metaData = element.attrs.Metadata ?? []
-
-    const newMetadata = metaData.map((meta) => {
-      if (meta.Name.includes("AltText_")) {
-        return { ...meta, Value: altText }
-      }
-      if (meta.Name.includes("Title_")) {
-        return { ...meta, Value: caption }
-      }
-      return meta
-    })
-
-    rte._adv.Transforms?.setNodes<IRteElementType>(
-      rte._adv.editor,
-      {
-        attrs: {
-          ...element.attrs,
-          Metadata: newMetadata,
-          position: alignment.value,
-          style: { ...element.attrs.style, ...newStyle },
-          FocalPoint: focalPoint,
-        },
+    const newData = {
+      ...imageVaultAsset,
+      meta: {
+        alt: altText,
+        caption,
       },
-      { at: path }
-    )
-
+      focalPoint,
+    }
+    setData(newData)
     closeModal()
   }
 
@@ -177,18 +88,7 @@ export default function ImageEditModal({
           onChange={changeFocalPoint}
         />
         <div>
-          <Field>
-            {/* @ts-expect-error: Type incompatibility with Venus components */}
-            <Select
-              selectLabel="Alignment"
-              value={alignment}
-              onChange={(e: DropDownItem) => {
-                setAlignment(e)
-              }}
-              options={dropdownList}
-            />
-          </Field>
-          <Field>
+          <FieldComponent>
             <FieldLabel htmlFor="alt">Alt text</FieldLabel>
             <TextInput
               value={altText}
@@ -198,9 +98,9 @@ export default function ImageEditModal({
                 setAltText(e.target.value)
               }
             />
-          </Field>
+          </FieldComponent>
 
-          <Field>
+          <FieldComponent>
             <FieldLabel htmlFor="caption">Caption</FieldLabel>
             <TextInput
               value={caption}
@@ -210,16 +110,25 @@ export default function ImageEditModal({
                 setCaption(e.target.value)
               }
             />
-          </Field>
+          </FieldComponent>
 
-          <Field>
+          <FieldComponent>
             <FieldLabel htmlFor="focalPoint">Focal Point</FieldLabel>
             <TextInput
               value={`X: ${focalPoint.x}, Y: ${focalPoint.y}`}
               name="focalPoint"
               disabled
             />
-          </Field>
+          </FieldComponent>
+
+          <FieldComponent>
+            <FieldLabel htmlFor="imageVaultId">Imagevault Id</FieldLabel>
+            <TextInput
+              value={imageVaultAsset.imageVaultId}
+              name="imageVaultId"
+              disabled
+            />
+          </FieldComponent>
         </div>
       </ModalBody>
       <ModalFooter>