feat: moved to shared-components and implemented focal point picker in RTE

rte/components/ImageEditModal.tsx

@@ -16,7 +16,9 @@ import type {
   IRteParam,
   IRteElementType,
 } from "@contentstack/app-sdk/dist/src/RTE/types"
-import type { InsertResponse } from "~/types/imagevault"
+import FocalPointPicker from "~/shared-components/FocalPointPicker"
+
+import type { FocalPoint, InsertResponse } from "~/types/imagevault"
 
 enum DropdownValues {
   center = "center",
@@ -76,6 +78,7 @@ export default function ImageEditModal({
   })
   const [altText, setAltText] = useState("")
   const [caption, setCaption] = useState("")
+  const [focalPoint, setFocalPoint] = useState<FocalPoint>({ x: 50, y: 50 })
 
   const assetUrl = element.attrs.MediaConversions[0].Url
 
@@ -94,6 +97,12 @@ export default function ImageEditModal({
     }
   }, [element.attrs.Metadata])
 
+  useEffect(() => {
+    if (element.attrs.FocalPoint) {
+      setFocalPoint(element.attrs.FocalPoint)
+    }
+  }, [element.attrs.FocalPoint])
+
   function handleSave() {
     let newStyle
 
@@ -134,6 +143,7 @@ export default function ImageEditModal({
           Metadata: newMetadata,
           position: alignment.value,
           style: { ...element.attrs.style, ...newStyle },
+          FocalPoint: focalPoint,
         },
       },
       { at: path }
@@ -142,27 +152,29 @@ export default function ImageEditModal({
     closeModal()
   }
 
+  function changeFocalPoint(focalPoint: FocalPoint) {
+    setFocalPoint(focalPoint)
+  }
+
   return (
     <>
       <ModalHeader title="Update image" closeModal={closeModal} />
       <ModalBody
         style={{
-          display: "flex",
+          display: "grid",
+          gridTemplateColumns: "1fr minmax(max-content, 250px)",
           gap: "1rem",
-          justifyContent: "space-between",
           alignItems: "center",
-          width: "100%",
+          width: "auto",
+          maxHeight: "none",
         }}
       >
-        <div style={{ flex: 1, overflowY: "auto" }}>
-          <img
-            src={assetUrl}
-            alt={altText}
-            height="100%"
-            style={{ maxHeight: "345px" }}
-          />
-        </div>
-        <div style={{ flex: 1 }}>
+        <FocalPointPicker
+          imageSrc={assetUrl}
+          focalPoint={focalPoint}
+          onChange={changeFocalPoint}
+        />
+        <div>
           <Field>
             <Select
               selectLabel="Alignment"
@@ -196,6 +208,15 @@ export default function ImageEditModal({
               }
             />
           </Field>
+
+          <Field>
+            <FieldLabel htmlFor="focalPoint">Focal Point</FieldLabel>
+            <TextInput
+              value={`X: ${focalPoint.x}, Y: ${focalPoint.y}`}
+              name="focalPoint"
+              disabled
+            />
+          </Field>
         </div>
       </ModalBody>
       <ModalFooter>

rte/components/ImageElement.tsx

@@ -35,6 +35,13 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
         }),
       modalProps: {
         size: "max",
+        style: {
+          content: {
+            maxHeight: "90dvh",
+            width: "auto",
+          },
+          overlay: {},
+        },
       },
     })
   }, [element, rte])