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" },
@@ -119,60 +94,43 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
           contentEditable={false}
           style={element.attrs?.style}
         >
-          <Resizable
+          <div
-            lockAspectRatio
+            contentEditable={false}
-            size={{
+            style={{
-              width: element.attrs.width ?? "180px",
+              width: "280px",
-              height: element.attrs.heigth ?? "auto",
+              height: "auto",
-            }}
+              ...(isHighlight ? { border: "1px solid #6c5ce7" } : {}),
-            onResizeStop={onResizeStop}
-            handleStyles={{
-              right: { right: 0, width: "15px" },
-              left: { left: 0, width: "15px" },
-              bottom: { bottom: "0" },
-              bottomRight: { width: "15px" },
             }}
           >
-            <div
+            <img
-              ref={imgRef}
+              src={assetUrl}
-              contentEditable={false}
+              onError={(event) => {
+                event.currentTarget.src = "https://placehold.co/600x400"
+              }}
               style={{
                 width: "100%",
-                height: "100%",
+                height: "auto",
-                ...(isHighlight ? { border: "1px solid #6c5ce7" } : {}),
+                aspectRatio: element.attrs.MediaConversions[0].AspectRatio,
+                borderRadius: "8px",
+              }}
+              alt={element.attrs.altText}
+              title={element.attrs?.Name}
+            />
+            <div
+              style={{
+                position: "absolute",
+                bottom: 0,
+                right: 0,
+                background: "#fff",
+                color: "#000",
+                height: "25px",
+                padding: "3px",
+                borderRadius: "4px",
               }}
             >
-              <img
+              <Icon icon="Embed" />
-                src={assetUrl}
-                onError={(event) => {
-                  event.currentTarget.src = "https://placehold.co/600x400"
-                }}
-                style={{
-                  width: "100%",
-                  height: "auto",
-                  aspectRatio: element.attrs.MediaConversions[0].AspectRatio,
-                  borderRadius: "8px",
-                }}
-                alt={element.attrs.altText}
-                title={element.attrs?.Name}
-              />
-              <div
-                style={{
-                  position: "absolute",
-                  bottom: 0,
-                  right: 0,
-                  background: "#fff",
-                  color: "#000",
-                  height: "25px",
-                  padding: "3px",
-                  borderRadius: "4px",
-                }}
-              >
-                <Icon icon="Embed" />
-              </div>
             </div>
-          </Resizable>
+          </div>
-
           {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
+    if (!RTE) {
-    const RTE = extensionObj?.RTEPlugin
+      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()