fix(BOOK-478): convert to image vault asset and remove useEffect max depth error

remix/app/components/ImageVaultDAM.tsx

@@ -23,7 +23,7 @@ import FullSizeImage from "./FullSizeImage"
 export type ImageVaultDAMProps = {
   sdk: UiLocation
   config: ImageVaultDAMConfig
-  initialData: ImageVaultAsset | null
+  imageVaultAsset: ImageVaultAsset | null
 }
 
 type DAMButtonProps = { onClick: () => void }
@@ -111,9 +111,9 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
 export default function ImageVaultDAM({
   sdk,
   config,
-  initialData,
+  imageVaultAsset,
 }: ImageVaultDAMProps) {
-  const [media, setMedia] = useState(initialData)
+  const [media, setMedia] = useState(imageVaultAsset)
 
   const field = sdk.location.CustomField?.field
   const frame = sdk.location.CustomField?.frame
@@ -175,11 +175,10 @@ export default function ImageVaultDAM({
     return <p>Initializing custom field...</p>
   }
 
-  // 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 component mounts.
   const fieldData = field.getData()
+
   if (isInsertResponse(fieldData)) {
-    field.setData(initialData)
+    field.setData(imageVaultAsset)
   }
 
   const entryData: EntryDataPublishDetails = {

remix/app/routes/field.tsx

@@ -82,12 +82,16 @@ function FieldContent({ sdk, appConfig }: FieldContentProps) {
   const config = { ...appConfig, ...fieldConfig }
 
   // 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 component mounts.
+  // We'll convert it to ImageVaultAsset when the user edits the the entry.
   const imageVaultAsset = getImageVaultAssetFromData(initialData)
 
   return (
     <Suspense fallback={<p>Loading field...</p>}>
-      <ImageVaultDAM config={config} sdk={sdk} initialData={imageVaultAsset} />
+      <ImageVaultDAM
+        config={config}
+        sdk={sdk}
+        imageVaultAsset={imageVaultAsset}
+      />
     </Suspense>
   )
 }

rte/components/ImageElement.tsx

@@ -19,7 +19,7 @@ type ImageElementProps = PropsWithChildren & {
   rte: IRteParam
 }
 export function ImageElement({ children, element, rte }: ImageElementProps) {
-  const assetIsInsertResponse = isInsertResponse(element.attrs)
+  const isAssetInsertResponse = isInsertResponse(element.attrs)
   const imageVaultAsset = getImageVaultAssetFromData(element.attrs)
   const isSelected = rte.selection.isSelected()
   const isFocused = rte.selection.isFocused()
@@ -84,10 +84,9 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
   if (!imageVaultAsset) {
     return <>{children}</>
   }
-
   // 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.
-  if (assetIsInsertResponse) {
+  if (isAssetInsertResponse) {
     handleMedia(imageVaultAsset)
   }