scandic/contentstack-imagevault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat/SW-3031 imagevault updates

Browse Source 
* chore(SW-3031): Updated dependencies
* feat(SW-3031): Added Imagevault Id to title and updated delete functionality

Approved-by: Michael Zetterberg
This commit is contained in:
Erik Tiekstra
2025-06-18 13:14:02 +00:00
parent b1aaa6fd56
commit 7e64becb40
20 changed files with 5450 additions and 3072 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
remix/app/components/ConfigForm.tsx
View File

@@ -27,23 +27,20 @@ export default function ConfigForm({
<FieldLabel version="v2" htmlFor="baseUrl">
Base url for contentstack
</FieldLabel>
<Help text="Including the region. Used as publishing source on ImageVault" />
<Help
type="basic"
text="Including the region. Used as publishing source on ImageVault"
/>
<TextInput
id="baseUrl"
name="baseUrl"
type="url"
value={finalValues.baseUrl}
onChange={(evt: ChangeEvent<HTMLInputElement>) => {
setFinalValues((prev) => ({
...prev,
baseUrl: evt.target.value,
}))
setFinalValues((prev) => ({ ...prev, baseUrl: evt.target.value }))
setInstallationData({
configuration: {
...finalValues,
baseUrl: evt.target.value,
},
configuration: { ...finalValues, baseUrl: evt.target.value },
serverConfiguration: {},
})
}}
@@ -61,7 +58,10 @@ export default function ConfigForm({
<FieldLabel version="v2" htmlFor="formatId">
Format Id for images
</FieldLabel>
<Help text="Images are fetched with a certain format. This should be an id from ImageVault" />
<Help
type="basic"
text="Images are fetched with a certain format. This should be an id from ImageVault"
/>
<TextInput
id="formatId"
name="formatId"
@@ -73,16 +73,10 @@ export default function ConfigForm({
version="v2"
width="large"
onChange={(evt: ChangeEvent<HTMLInputElement>) => {
setFinalValues((prev) => ({
...prev,
formatId: evt.target.value,
}))
setFinalValues((prev) => ({ ...prev, formatId: evt.target.value }))
setInstallationData({
configuration: {
...finalValues,
formatId: evt.target.value,
},
configuration: { ...finalValues, formatId: evt.target.value },
serverConfiguration: {},
})
}}

5
remix/app/components/ImageEditModal.tsx
View File

@@ -129,6 +129,11 @@ export default function ImageEditModal({
disabled
/>
</FieldComponent>
<FieldComponent>
<FieldLabel htmlFor="imageVaultId">Imagevault Id</FieldLabel>
<TextInput value={fieldData.Id} name="imageVaultId" disabled />
</FieldComponent>
</div>
</ModalBody>
<ModalFooter>

38
remix/app/components/ImageVaultDAM.tsx
View File

@@ -8,7 +8,6 @@ import {
cbModal,
} from "@contentstack/venus-components"
import { isInsertResponse, openImageVault } from "~/utils/imagevault"
import FullSizeImage from "./FullSizeImage"
import ImageEditModal from "./ImageEditModal"
import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
@@ -19,6 +18,7 @@ import type {
EntryDataPublishDetails,
ImageVaultDAMConfig,
} from "~/utils/imagevault"
import FullSizeImage from "./FullSizeImage"
export type ImageVaultDAMProps = {
sdk: UiLocation
@@ -26,9 +26,7 @@ export type ImageVaultDAMProps = {
initialData: InsertResponse | null
}
type DAMButtonProps = {
onClick: () => void
}
type DAMButtonProps = { onClick: () => void }
function DAMButton({ onClick }: DAMButtonProps) {
return (
@@ -60,7 +58,7 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
media.MediaConversions[0]
const assetUrl = Url
const title = media.Name
const title = `Id: ${media.Id} - ${media.Name}`
const width = FormatWidth || Width
const height = FormatHeight || Height
const alt =
@@ -130,7 +128,7 @@ export default function ImageVaultDAM({
if (frame?.updateHeight) {
// We need to recalculate the height of the iframe when an image is added.
// Cannot use flushSync inside useEffect.
setTimeout(() => frame.updateHeight(document.body.scrollHeight), 0)
setTimeout(() => frame.updateHeight(), 0)
}
}, [frame])
@@ -139,14 +137,10 @@ export default function ImageVaultDAM({
if (field) {
flushSync(() => {
const data = result
? {
...result,
FocalPoint: result.FocalPoint || { x: 50, y: 50 },
}
? { ...result, FocalPoint: result.FocalPoint || { x: 50, y: 50 } }
: null
setMedia(data)
// Data inside the field is supposed to be an empty object if nothing is selected
field.setData(data || {})
field.setData(data)
document.body.style.overflow = "hidden"
})
}
@@ -175,11 +169,7 @@ export default function ImageVaultDAM({
modalProps: {
size: "max",
style: {
content: {
maxHeight: "90dvh",
maxWidth: "90dvw",
width: "auto",
},
content: { maxHeight: "90dvh", maxWidth: "90dvw", width: "auto" },
overlay: {},
},
},
@@ -205,22 +195,16 @@ export default function ImageVaultDAM({
return (
<div>
<div>
<FieldLabel htmlFor="imagevaultpicker" version="v2">
ImageVault Asset
</FieldLabel>
</div>
<FieldLabel htmlFor="imagevaultpicker" version="v2">
ImageVault Asset
</FieldLabel>
{media ? (
<Media media={media} onDelete={handleMedia} onEdit={handleEdit} />
) : (
<DAMButton
onClick={() => {
openImageVault({
config,
entryData,
onSuccess: handleMedia,
})
openImageVault({ config, entryData, onSuccess: handleMedia })
}}
/>
)}

9
remix/app/hooks/useApp.ts
View File

@@ -1,10 +1,10 @@
import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
import { useEffect, useState } from "react"
import { useEffect, useRef, useState } from "react"
export class SDKLoadingError extends Error {}
export default function useApp() {
const modalElementId = "field"
const ref = useRef<HTMLDivElement>(null)
const [, setError] = useState()
const [sdk, setSdk] = useState<UiLocation>()
const [config, setConfig] = useState<Record<string, string>>()
@@ -20,8 +20,7 @@ export default function useApp() {
const config = await initSdk.getConfig()
setConfig(config)
const iframeWrapperRef = document.getElementById(modalElementId)
window.iframeRef = iframeWrapperRef
window.iframeRef = ref.current
window.postRobot = initSdk.postRobot
} catch (e) {
let err: Error
@@ -43,6 +42,6 @@ export default function useApp() {
return {
sdk,
config,
modalElementId,
ref,
}
}

55
remix/app/routes/field.tsx
View File

@@ -1,3 +1,5 @@
import "@contentstack/venus-components/build/main.css"
import { Suspense, lazy, useEffect, useState } from "react"
import { useScript } from "usehooks-ts"
import useApp from "~/hooks/useApp"
@@ -5,19 +7,26 @@ import useApp from "~/hooks/useApp"
import Disclaimer from "~/components/Disclaimer"
import InvalidConfig from "~/components/InvalidConfig"
import { isImageVaultDAMConfig } from "~/utils/imagevault"
import { GenericObjectType } from "@contentstack/app-sdk/dist/src/types/common.types"
import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
import type { InsertResponse } from "~/types/imagevault"
import { isImageVaultDAMConfig } from "~/utils/imagevault"
const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"))
export default function Field() {
const { sdk, config: appConfig, modalElementId } = useApp()
interface FieldContentProps {
sdk?: UiLocation
appConfig?: GenericObjectType
}
function FieldContent({ sdk, appConfig }: FieldContentProps) {
const ivStatus = useScript(
"/scripts/imagevault-insert-media/insertmediawindow.min.js"
)
const [showDisclaimer, setShowDisclaimer] = useState(false)
const [fieldData, setFieldData] = useState<InsertResponse>()
const [fieldData, setFieldData] = useState<InsertResponse | null>()
const [dataIsLoaded, setDataIsLoaded] = useState(false)
const entry = sdk?.location.CustomField?.entry
const field = sdk?.location.CustomField?.field
@@ -31,14 +40,19 @@ export default function Field() {
if (field && entry) {
const data = field.getData()
const title = entry.getField("title").getData().toString()
if (data && title) {
setFieldData(data as InsertResponse)
} else {
throw new Error("Missing data or title for entry")
if (!title) {
throw new Error("Missing title for entry")
}
if (data) {
setFieldData(data as InsertResponse)
}
setDataIsLoaded(true)
}
} catch (e) {
setShowDisclaimer(true)
console.log("Unable to get field data from SDK: ", e)
}
}, [entry, field])
@@ -46,13 +60,13 @@ export default function Field() {
return <Disclaimer />
}
const loaded = !!(fieldData && ivStatus === "ready" && sdk && appConfig)
const loaded = !!(dataIsLoaded && ivStatus === "ready" && sdk && appConfig)
const initialData =
fieldData && Object.keys(fieldData).length > 0 ? fieldData : null
if (!loaded) {
return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>
return <p style={{ fontFamily: "Inter" }}> Loading dependencies...</p>
}
if (!isImageVaultDAMConfig(appConfig)) {
@@ -60,16 +74,21 @@ export default function Field() {
}
const fieldConfig = sdk.location.CustomField?.fieldConfig
const config = {
...appConfig,
...fieldConfig,
}
const config = { ...appConfig, ...fieldConfig }
return (
<div id={modalElementId}>
<Suspense fallback={<p>Loading field...</p>}>
<ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
</Suspense>
<Suspense fallback={<p>Loading field...</p>}>
<ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
</Suspense>
)
}
export default function Field() {
const { sdk, config, ref } = useApp()
return (
<div ref={ref}>
<FieldContent sdk={sdk} appConfig={config} />
</div>
)
}