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])

rte/main.tsx

@@ -213,7 +213,10 @@ async function init() {
               {
                 // @ts-expect-error: incorrect typings
                 type: "ImageVault",
-                attrs: result,
+                attrs: {
+                  ...result,
+                  FocalPoint: result.FocalPoint || { x: 50, y: 50 },
+                },
                 uid: crypto.randomUUID(),
                 children: [{ text: "" }],
               },

rte/tsconfig.json

@@ -4,6 +4,8 @@
     "env.d.ts",
     "../types/**/*.ts",
     "../utils/**/*.ts",
+    "../shared-components/**/*.ts",
+    "../shared-components/**/*.tsx",
     "**/*.ts",
     "**/*.tsx"
   ],
@@ -13,7 +15,8 @@
     "paths": {
       "~/*": ["./*"],
       "~/types/*": ["../types/*"],
-      "~/utils/*": ["../utils/*"]
+      "~/utils/*": ["../utils/*"],
+      "~/shared-components/*": ["../shared-components/*"],
     }
   }
 }

rte/vite.config.ts

@@ -1,9 +1,10 @@
 import { resolve } from "path"
 import { defineConfig } from "vite"
 import tsconfigPaths from "vite-tsconfig-paths"
+import { libInjectCss } from "vite-plugin-lib-inject-css"
 
 export default defineConfig({
-  plugins: [tsconfigPaths()],
+  plugins: [tsconfigPaths(), libInjectCss()],
   define: {
     IS_DEV: process.env.IS_DEV === "true" ? true : false,
   },