fix: improve handling of config and rte plugin

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">
-      {isImageVaultDAMConfig(config) ? (
-        <Suspense fallback={<p>Loading field...</p>}>
-          <ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
-        </Suspense>
-      ) : (
-        <InvalidConfig />
-      )}
+    <div id={modalElementId}>
+      <Suspense fallback={<p>Loading field...</p>}>
+        <ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
+      </Suspense>
     </div>
   )
 }