fix(image-cropper-web): swap placeholder to SVG and fix editor preview captions

Author: rahmanunver

packages/pluggableWidgets/image-cropper-web/src/ImageCropper.editorPreview.tsx

@@ -1,12 +1,12 @@
-import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import classNames from "classnames";
 import { ReactElement, createRef, useState } from "react";
 import { type Crop } from "react-image-crop";
+import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { ImageCropperPreviewProps } from "../typings/ImageCropperProps";
+import CropperPlaceholderIcon from "./assets/cropper-placeholder.svg";
 import { CropArea } from "./components/CropArea";
 import { resolveAspectRatio } from "./utils/aspectRatio";
 import { describeConfig } from "./utils/describeConfig";
-import CropperPlaceholderIcon from "./assets/cropper-placeholder.png";
 
 declare function require(name: string): string;
 
@@ -59,7 +59,13 @@ function StaticCropPreview(props: { imageUrl: string; values: ImageCropperPrevie
 }
 
 export function preview(props: ImageCropperPreviewProps): ReactElement {
+    // Narrow on the object (not a derived boolean) so TS keeps .imageUrl / .entity typed.
     const staticImage = props.image?.type === "static" ? props.image : undefined;
+    const dynamicEntity = props.image?.type === "dynamic" ? props.image.entity : undefined;
+
+    // Dynamic bindings carry only the entity name — no design-time pixels — so they still show the
+    // placeholder, but the caption must reflect that an attribute IS bound (not "nothing selected").
+    const caption = staticImage ? describeConfig(props) : dynamicEntity || "[No image selected yet]";
 
     return (
         <div
@@ -74,9 +80,7 @@ export function preview(props: ImageCropperPreviewProps): ReactElement {
                     <img className="widget-image-cropper__preview-glyph" src={CropperPlaceholderIcon} alt="" />
                 )}
             </div>
-            <p className="widget-image-cropper__preview-caption">
-                {staticImage ? describeConfig(props) : "[No image selected yet]"}
-            </p>
+            <p className="widget-image-cropper__preview-caption">{caption}</p>
         </div>
     );
 }

packages/pluggableWidgets/image-cropper-web/src/__tests__/ImageCropper.editor.spec.tsx

@@ -81,11 +81,12 @@ describe("ImageCropper design mode (preview)", () => {
         expect(getByText("[No image selected yet]")).toBeInTheDocument();
     });
 
-    test("treats a dynamic image as not previewable (glyph + empty caption)", () => {
+    test("shows the bound entity for a dynamic image (placeholder glyph, not previewable)", () => {
         const props = makePreviewProps({ image: { type: "dynamic", entity: "MyModule.Photo" } });
-        const { container, getByText } = render(preview(props));
+        const { container, getByText, queryByText } = render(preview(props));
         expect(container.querySelector(".widget-image-cropper__preview-glyph")).not.toBeNull();
-        expect(getByText("[No image selected yet]")).toBeInTheDocument();
+        expect(getByText("MyModule.Photo")).toBeInTheDocument();
+        expect(queryByText("[No image selected yet]")).toBeNull();
     });
 
     test("renders the real image and config caption for a static image", () => {

packages/pluggableWidgets/image-cropper-web/src/assets/cropper-placeholder.png

@@ -113,7 +113,6 @@ export function CropArea(props: CropAreaProps): ReactElement {
                     ref={props.imageRef}
                     src={safeSrc}
                     alt=""
-                    crossOrigin="anonymous"
                     style={{
                         width: displaySize?.width,
                         height: displaySize?.height,