feat(Raw:Img): ENG-9527 Added new inputs for raw:img to handle the metadata (#4097)

## Description

Previously, images imported from sources like Figma were treated as
basic img tags and lacked the advanced editing capabilities of Builder's
Image component (e.g., aspect ratio, overlays, etc.). This created an
inconsistent user experience. This change ensures that all images,
regardless of their source, can be fully customized within the editor.

Author: yash-builder

.changeset/cuddly-pillows-battle.md

@@ -0,0 +1,14 @@
+---
+"@builder.io/react": patch
+"@builder.io/sdk": patch
+"@builder.io/sdk-angular": patch
+"@builder.io/sdk-react-nextjs": patch
+"@builder.io/sdk-qwik": patch
+"@builder.io/sdk-react": patch
+"@builder.io/sdk-react-native": patch
+"@builder.io/sdk-solid": patch
+"@builder.io/sdk-svelte": patch
+"@builder.io/sdk-vue": patch
+---
+
+FEAT: Updated 'Raw:Img' componentInfo with extra inputs field

packages/react/src/blocks/raw/Img.tsx

@@ -9,6 +9,11 @@ export interface ImgProps {
   attributes?: any;
   image?: string;
   builderBlock?: BuilderElement;
+  aspectRatio?: number;
+  backgroundSize?: string;
+  backgroundPosition?: string;
+  altText?: string;
+  title?: string;
 }
 
 // TODO: srcset, alt text input, object size/position input, etc
@@ -31,32 +36,101 @@ class ImgComponent extends React.Component<ImgProps> {
   render() {
     const attributes = this.props.attributes || {};
     const srcset = this.getSrcSet();
+
+    const { style: userStyle, ...restAttributes } = attributes;
+
+    const defaultStyle: React.CSSProperties = {
+      objectFit: this.props.backgroundSize as React.CSSProperties['objectFit'],
+      objectPosition: this.props.backgroundPosition as React.CSSProperties['objectPosition'],
+      aspectRatio: this.props.aspectRatio as unknown as React.CSSProperties['aspectRatio'],
+    };
+
+    const mergedStyle = {
+      ...defaultStyle,
+      ...(userStyle as React.CSSProperties),
+    };
+
     return (
       <img
         loading="lazy"
-        {...this.props.attributes}
+        {...restAttributes}
         src={this.props.image || attributes.src}
         srcSet={srcset}
+        alt={this.props.altText}
+        title={this.props.title}
+        style={mergedStyle}
+        className="builder-raw-img"
       />
     );
   }
 }
 
 export const Img = withBuilder(ImgComponent, {
-  // friendlyName?
   name: 'Raw:Img',
   hideFromInsertMenu: true,
+
   image:
     'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
   inputs: [
     {
-      name: 'image',
+      name: "image",
       bubble: true,
-      type: 'file',
+      type: "file",
       allowedFileTypes: IMAGE_FILE_TYPES,
       required: true,
     },
+    {
+      name: 'backgroundSize',
+      type: 'text',
+      defaultValue: 'cover',
+      enum: [
+        {
+          label: 'contain',
+          value: 'contain',
+          helperText: 'The image should never get cropped',
+        },
+        {
+          label: 'cover',
+          value: 'cover',
+          helperText: "The image should fill it's box, cropping when needed",
+        },
+      ],
+    },
+    {
+      name: 'backgroundPosition',
+      type: 'text',
+      defaultValue: 'center',
+      enum: [
+        'center',
+        'top',
+        'left',
+        'right',
+        'bottom',
+        'top left',
+        'top right',
+        'bottom left',
+        'bottom right',
+      ],
+    },
+    {
+      name: 'altText',
+      type: 'string',
+      helperText: 'Text to display when the user has images off',
+    },
+    {
+      name: 'title',
+      type: 'string',
+      helperText: 'Text to display when hovering over the asset',
+    },
+    {
+      name: 'aspectRatio',
+      type: 'number',
+      helperText:
+        "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+      advanced: true,
+      defaultValue: 0.7041,
+    },
   ],
+
   noWrap: true,
-  static: true,
-});
+});

packages/sdks-tests/src/e2e-tests/blocks.spec.ts

@@ -258,6 +258,66 @@ test.describe('Blocks', () => {
     });
   });
 
+  test.describe('Raw:Img', () => {
+    test('Image title attribute', async ({ page, sdk, packageName }) => {
+      test.skip(checkIsRN(sdk));
+      test.skip(
+        isSSRFramework(packageName),
+        'SSR frameworks get the images from the server so page.route intercept does not work'
+      );
+      const mockImgPath = path.join(mockFolderPath, 'placeholder-img.png');
+      const mockImgBuffer = fs.readFileSync(mockImgPath);
+
+      await page.route('**/*', route => {
+        const request = route.request();
+        if (request.url().includes('cdn.builder.io/api/v1/image')) {
+          return route.fulfill({
+            status: 200,
+            contentType: 'image/png',
+            body: mockImgBuffer,
+          });
+        } else {
+          return route.continue();
+        }
+      });
+
+      await page.goto('/raw-img');
+
+      const img = page.getByTitle('title test');
+      await expect(img).toHaveAttribute('title', 'title test');
+    });
+
+    test('aspect ratio is respected', async ({ page, sdk, packageName }) => {
+      test.skip(checkIsRN(sdk));
+      test.skip(
+        isSSRFramework(packageName),
+        'SSR frameworks fetch images server-side, so Playwright route interception fails'
+      );
+
+      // mock any CDN image so we don't hit the network
+      const mockImgPath = path.join(mockFolderPath, 'placeholder-img.png');
+      const mockImgBuffer = fs.readFileSync(mockImgPath);
+      await page.route('**/*', route => {
+        const req = route.request();
+        if (req.url().includes('cdn.builder.io/api/v1/image')) {
+          return route.fulfill({ status: 200, contentType: 'image/png', body: mockImgBuffer });
+        }
+        return route.continue();
+      });
+
+      await page.goto('/raw-img');
+
+      const rawImgs = page.locator('.builder-raw-img');
+      const expected = ['1.11 / 1', '0.19 / 1', '0.2 / 1', 'auto'];
+      await expect(rawImgs).toHaveCount(expected.length);
+
+      for (let i = 0; i < expected.length; i++) {
+        const img = rawImgs.nth(i);
+        await expect(img).toHaveCSS('aspect-ratio', expected[i]);
+      }
+    });
+  });
+
   test.describe('Video', () => {
     test('video render and styles', async ({ page, sdk }) => {
       test.skip(checkIsRN(sdk));

packages/sdks-tests/src/specs/index.ts

@@ -28,6 +28,7 @@ import {
   CONTENT_2 as imageHighPriority,
   CONTENT_3 as imageNoWebp,
 } from './image.js';
+import { CONTENT as rawImg} from './raw-img.js';
 import { INPUT_DEFAULT_VALUE } from './input-default-value.js';
 import { JS_CODE_CONTENT } from './js-code.js';
 import { JS_CONTENT_IS_BROWSER } from './js-content-is-browser.js';
@@ -142,6 +143,7 @@ export const PAGES: Record<string, Page> = {
   '/content-bindings': { content: contentBindings },
   '/content-input-bindings': { content: contentInputBindings, isGen1VisualEditingTest: true },
   '/image': { content: image },
+  '/raw-img': { content: rawImg },
   '/image-high-priority': { content: imageHighPriority },
   '/image-no-webp': { content: imageNoWebp },
   '/data-bindings': { content: dataBindings },