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

Approved-by: Michael Zetterberg

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
-            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
+            contentEditable={false}
+            style={{
+              width: "280px",
+              height: "auto",
+              ...(isHighlight ? { border: "1px solid #6c5ce7" } : {}),
             }}
           >
-            <div
-              ref={imgRef}
-              contentEditable={false}
+            <img
+              src={assetUrl}
+              onError={(event) => {
+                event.currentTarget.src = "https://placehold.co/600x400"
+              }}
               style={{
                 width: "100%",
-                height: "100%",
-                ...(isHighlight ? { border: "1px solid #6c5ce7" } : {}),
+                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",
               }}
             >
-              <img
-                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>
+              <Icon icon="Embed" />
             </div>
-          </Resizable>
-
+          </div>
           {children}
         </span>
       </Tooltip>