contentstack-imagevault/rte/components/ImageEditModal.tsx

import {
  Button,
  ButtonGroup,
  Field as FieldComponent,
  FieldLabel,
  ModalBody,
  ModalFooter,
  ModalHeader,
  TextInput,
} from "@contentstack/venus-components"
import React, { ChangeEvent, useEffect, useState } from "react"

import type { IRteElementType } from "@contentstack/app-sdk/dist/src/RTE/types"
import FocalPointPicker from "~/shared-components/FocalPointPicker"

import type { FocalPoint, ImageVaultAsset } from "~/types/imagevault"

type ImageEditModalProps = {
  element: IRteElementType & {
    attrs: ImageVaultAsset
  }
  setData: (data: ImageVaultAsset) => void
  closeModal: () => void
}

export default function ImageEditModal({
  element,
  setData,
  closeModal,
}: ImageEditModalProps) {
  const imageVaultAsset: ImageVaultAsset = element.attrs
  const [altText, setAltText] = useState("")
  const [caption, setCaption] = useState("")
  const [focalPoint, setFocalPoint] = useState<FocalPoint>({ x: 50, y: 50 })

  const assetUrl = imageVaultAsset.url

  useEffect(() => {
    if (imageVaultAsset.meta.alt) {
      setAltText(imageVaultAsset.meta.alt)
    }
    if (imageVaultAsset.meta.caption) {
      setCaption(imageVaultAsset.meta.caption)
    }
  }, [imageVaultAsset.meta])

  useEffect(() => {
    if (imageVaultAsset.focalPoint) {
      setFocalPoint(imageVaultAsset.focalPoint)
    }
  }, [imageVaultAsset.focalPoint])

  function handleSave() {
    const newData = {
      ...imageVaultAsset,
      meta: {
        alt: altText,
        caption,
      },
      focalPoint,
    }
    setData(newData)
    closeModal()
  }

  function changeFocalPoint(focalPoint: FocalPoint) {
    setFocalPoint(focalPoint)
  }

  return (
    <>
      <ModalHeader title="Update image" closeModal={closeModal} />
      <ModalBody
        style={{
          display: "grid",
          gridTemplateColumns: "1fr minmax(max-content, 250px)",
          gap: "1rem",
          alignItems: "center",
          width: "auto",
          maxHeight: "calc(90dvh - 124px)", // 124px is the height of the header and footer
          maxWidth: "90dvw",
          overflow: "auto",
        }}
      >
        <FocalPointPicker
          imageSrc={assetUrl}
          focalPoint={focalPoint}
          onChange={changeFocalPoint}
        />
        <div>
          <FieldComponent>
            <FieldLabel htmlFor="alt">Alt text</FieldLabel>
            <TextInput
              value={altText}
              placeholder="Alt text for image"
              name="alt"
              onChange={(e: ChangeEvent<HTMLInputElement>) =>
                setAltText(e.target.value)
              }
            />
          </FieldComponent>

          <FieldComponent>
            <FieldLabel htmlFor="caption">Caption</FieldLabel>
            <TextInput
              value={caption}
              placeholder="Caption for image..."
              name="caption"
              onChange={(e: ChangeEvent<HTMLInputElement>) =>
                setCaption(e.target.value)
              }
            />
          </FieldComponent>

          <FieldComponent>
            <FieldLabel htmlFor="focalPoint">Focal Point</FieldLabel>
            <TextInput
              value={`X: ${focalPoint.x}, Y: ${focalPoint.y}`}
              name="focalPoint"
              disabled
            />
          </FieldComponent>

          <FieldComponent>
            <FieldLabel htmlFor="imageVaultId">Imagevault Id</FieldLabel>
            <TextInput
              value={imageVaultAsset.imageVaultId}
              name="imageVaultId"
              disabled
            />
          </FieldComponent>
        </div>
      </ModalBody>
      <ModalFooter>
        <ButtonGroup>
          <Button onClick={closeModal} buttonType="light">
            Cancel
          </Button>
          <Button onClick={handleSave} icon="SaveWhite">
            Save
          </Button>
        </ButtonGroup>
      </ModalFooter>
    </>
  )
}