diff --git a/remix/app/hooks/useApp.ts b/remix/app/hooks/useApp.ts index 88f2e34..9e8358c 100644 --- a/remix/app/hooks/useApp.ts +++ b/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() const [config, setConfig] = useState>() @@ -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, } } diff --git a/remix/app/routes/field.tsx b/remix/app/routes/field.tsx index 4e749da..a12849a 100644 --- a/remix/app/routes/field.tsx +++ b/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 } - 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

Loading dependecies...

} + if (!isImageVaultDAMConfig(appConfig)) { + return + } + + const fieldConfig = sdk.location.CustomField?.fieldConfig + const config = { + ...appConfig, + ...fieldConfig, + } + return ( -
- {isImageVaultDAMConfig(config) ? ( - Loading field...

}> - -
- ) : ( - - )} +
+ Loading field...

}> + +
) } diff --git a/rte/main.tsx b/rte/main.tsx index 6992bec..acb5f53 100644 --- a/rte/main.tsx +++ b/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) {