fix: improve handling of config and rte plugin

remix/app/hooks/useApp.ts

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react"
 export class SDKLoadingError extends Error {}
 
 export default function useApp() {
+  const modalElementId = "field"
   const [, setError] = useState()
   const [sdk, setSdk] = useState<UiLocation>()
   const [config, setConfig] = useState<Record<string, string>>()
@@ -19,7 +20,7 @@ export default function useApp() {
         const config = await initSdk.getConfig()
         setConfig(config)
 
-        const iframeWrapperRef = document.getElementById("field")
+        const iframeWrapperRef = document.getElementById(modalElementId)
         window.iframeRef = iframeWrapperRef
         window.postRobot = initSdk.postRobot
       } catch (e) {
@@ -42,5 +43,6 @@ export default function useApp() {
   return {
     sdk,
     config,
+    modalElementId,
   }
 }

remix/app/routes/field.tsx

@@ -11,7 +11,7 @@ import type { InsertResponse } from "~/types/imagevault"
 const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"))
 
 export default function Field() {
-  const { sdk, config } = useApp()
+  const { sdk, config: appConfig, modalElementId } = useApp()
   const ivStatus = useScript(
     "/scripts/imagevault-insert-media/insertmediawindow.min.js"
   )
@@ -46,7 +46,7 @@ export default function Field() {
     return <Disclaimer />
   }
 
-  const loaded = !!(fieldData && ivStatus === "ready" && sdk && config)
+  const loaded = !!(fieldData && ivStatus === "ready" && sdk && appConfig)
 
   const initialData =
     fieldData && Object.keys(fieldData).length > 0 ? fieldData : null
@@ -55,15 +55,21 @@ export default function Field() {
     return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>
   }
 
+  if (!isImageVaultDAMConfig(appConfig)) {
+    return <InvalidConfig />
+  }
+
+  const fieldConfig = sdk.location.CustomField?.fieldConfig
+  const config = {
+    ...appConfig,
+    ...fieldConfig,
+  }
+
   return (
-    <div id="field">
+    <div id={modalElementId}>
-      {isImageVaultDAMConfig(config) ? (
+      <Suspense fallback={<p>Loading field...</p>}>
-        <Suspense fallback={<p>Loading field...</p>}>
+        <ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
-          <ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
+      </Suspense>
-        </Suspense>
-      ) : (
-        <InvalidConfig />
-      )}
     </div>
   )
 }

rte/main.tsx

@@ -14,7 +14,7 @@ import type {
 } from "~/types/contentstack"
 
 function findThisPlugin(ext: ContentstackPluginDefinition) {
-  return ext.type === "rte_plugin" && ext.title === "ImageVault"
+  return ext.type === "rte_plugin" && /imagevault/i.test(ext.title)
 }
 
 async function loadScript(url: string) {