fix: Removed Resizable componenet as that breaks Imagevault implementation inside RTE

Approved-by: Michael Zetterberg

remix/vite.config.ts

@@ -11,5 +11,13 @@ export default defineConfig({
     libInjectCss(),
     devtoolsJson(),
   ],
+  server: {
+    headers: {
+      "Access-Control-Allow-Origin":
+        "https://eu-rte-extension.contentstack.com",
+      "Access-Control-Allow-Methods": "GET, HEAD",
+      "Access-Control-Allow-Headers": "*",
+    },
+  },
   build: { emptyOutDir: true },
 })

rte/components/ImageElement.tsx

@@ -1,7 +1,6 @@
 import { Icon, Tooltip, cbModal } from "@contentstack/venus-components"
-import React, { PropsWithChildren, useCallback, useRef } from "react"
+import React, { PropsWithChildren, useCallback } from "react"
 
-import { Resizable } from "re-resizable"
 import EmbedBtn from "./EmbedBtn"
 import ImageEditModal from "./ImageEditModal"
 
@@ -21,8 +20,6 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
   const isFocused = rte?.selection?.isFocused()
   const isHighlight = isFocused && isSelected
 
-  const imgRef = useRef<HTMLDivElement | null>(null)
-
   const handleEdit = useCallback(() => {
     cbModal({
       // @ts-expect-error: Component is badly typed
@@ -65,28 +62,6 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
     )
   }
 
-  const onResizeStop = () => {
-    const { attrs: elementAttrs } = element
-    const { offsetWidth: width, offsetHeight: height } = imgRef?.current ?? {}
-
-    const newAttrs: { [key: string]: unknown } = {
-      ...elementAttrs,
-      style: {
-        ...(elementAttrs?.style ?? {}),
-        "max-width": `${width}px`,
-      },
-      ...(width && height
-        ? { width: `${width.toString()}px`, height: `${height.toString()}px` }
-        : {}),
-    }
-
-    rte?._adv?.Transforms?.setNodes<IRteElementType>(
-      rte._adv.editor,
-      { attrs: newAttrs },
-      { at: rte.getPath(element) }
-    )
-  }
-
   let alignmentStyles = {}
   const marginAlignment: Record<string, { [key: string]: string }> = {
     center: { margin: "auto" },
@@ -118,27 +93,12 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
           data-type="asset"
           contentEditable={false}
           style={element.attrs?.style}
-        >
-          <Resizable
-            lockAspectRatio
-            size={{
-              width: element.attrs.width ?? "180px",
-              height: element.attrs.heigth ?? "auto",
-            }}
-            onResizeStop={onResizeStop}
-            handleStyles={{
-              right: { right: 0, width: "15px" },
-              left: { left: 0, width: "15px" },
-              bottom: { bottom: "0" },
-              bottomRight: { width: "15px" },
-            }}
         >
           <div
-              ref={imgRef}
             contentEditable={false}
             style={{
-                width: "100%",
-                height: "100%",
+              width: "280px",
+              height: "auto",
               ...(isHighlight ? { border: "1px solid #6c5ce7" } : {}),
             }}
           >
@@ -171,8 +131,6 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
               <Icon icon="Embed" />
             </div>
           </div>
-          </Resizable>
-
           {children}
         </span>
       </Tooltip>

rte/main.tsx

@@ -121,12 +121,14 @@ function loadIV(plugin: ContentstackPluginDefinition) {
   }
 }
 
-async function init() {
+export default ContentstackSDK.init().then(async (sdk) => {
   try {
-    const sdk = await ContentstackSDK.init()
+    const extensionObj = await sdk["location"]
+    const RTE = await extensionObj["RTEPlugin"]
 
-    const extensionObj = sdk?.location
-    const RTE = extensionObj?.RTEPlugin
+    if (!RTE) {
+      return
+    }
 
     let embeddedData: ExtractedContentstackEmbeddedData | null = null
     const jwtLike = window.name.split("__").find((str) => str.startsWith("ey"))
@@ -137,8 +139,6 @@ async function init() {
       }
     }
 
-    if (!RTE) return
-
     const ImageVault = RTE("ImageVault", (rte) => {
       if (rte) {
         if (!ivloaded) {
@@ -171,7 +171,7 @@ async function init() {
             )
           }
         },
-        display: ["toolbar"],
+        displayOn: ["toolbar"],
         elementType: ["void"],
       }
     })
@@ -180,7 +180,7 @@ async function init() {
       if (rte) {
         const savedSelection = rte?.selection?.get() ?? undefined
 
-        const appConfig = rte.getConfig()
+        const appConfig = await rte.getConfig()
 
         // This is the configuration for this instance of the plugin.
         // You edit this in the content types settings RTE plugin section.
@@ -231,6 +231,4 @@ async function init() {
   } catch (e) {
     console.error({ e })
   }
-}
-
-export default init()
+})