fix(BOOK-478): Fixed issue with running handleMedia inside a useEffect which is causing an infinite loop

remix/app/components/ImageVaultDAM.tsx

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

remix/app/routes/field.tsx

@@ -82,16 +82,12 @@ 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 user edits the the entry.
+  // We'll convert it to ImageVaultAsset when the component mounts.
   const imageVaultAsset = getImageVaultAssetFromData(initialData)
 
   return (
     <Suspense fallback={<p>Loading field...</p>}>
-      <ImageVaultDAM
+      <ImageVaultDAM config={config} sdk={sdk} initialData={imageVaultAsset} />
-        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 isAssetInsertResponse = isInsertResponse(element.attrs)
+  const assetIsInsertResponse = isInsertResponse(element.attrs)
   const imageVaultAsset = getImageVaultAssetFromData(element.attrs)
   const isSelected = rte.selection.isSelected()
   const isFocused = rte.selection.isFocused()
@@ -84,9 +84,10 @@ 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 (isAssetInsertResponse) {
+  if (assetIsInsertResponse) {
     handleMedia(imageVaultAsset)
   }