Fix: AI - HTML thumbnail is not scaled and translated correctly [ED-1…

…2735] (elementor#24267)
matipojo · Nov 14, 2023 · 5bd0275 · 5bd0275
1 parent 4e7d6c8
commit 5bd0275
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/modules/ai/assets/js/editor/pages/form-layout/components/attachments/thumbnail-url.js b/modules/ai/assets/js/editor/pages/form-layout/components/attachments/thumbnail-url.js
@@ -1,4 +1,4 @@
-import { Thumbnail } from './thumbnail';
+import { Thumbnail, THUMBNAIL_SIZE } from './thumbnail';
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import { Box, IconButton } from '@elementor/ui';
@@ -18,6 +18,8 @@ export const ThumbnailUrl = ( props ) => {
 				position: 'relative',
 				borderRadius: 1,
 				overflow: 'hidden',
+				minWidth: THUMBNAIL_SIZE,
+
 				'&:hover::before': {
 					content: '""',
 					position: 'absolute',
@@ -34,7 +36,7 @@ export const ThumbnailUrl = ( props ) => {
 			<IconButton
 				className="remove-attachment"
 				size="small"
-				aria-label={ __( 'Remove' ) }
+				aria-label={ __( 'Remove', 'elementor' ) }
 				disabled={ props.disabled }
 				onClick={ ( event ) => {
 					event.stopPropagation();

diff --git a/modules/ai/assets/js/editor/pages/form-layout/components/attachments/thumbnail.js b/modules/ai/assets/js/editor/pages/form-layout/components/attachments/thumbnail.js
@@ -2,17 +2,25 @@ import { useEffect, useRef } from 'react';
 import { Box } from '@elementor/ui';
 import PropTypes from 'prop-types';
 
-const THUMBNAIL_SIZE = 64;
+export const THUMBNAIL_SIZE = 64;
 
 export const Thumbnail = ( props ) => {
 	const previewRef = useRef( null );
 
 	useEffect( () => {
 		if ( previewRef.current ) {
 			const previewRoot = previewRef.current.firstElementChild;
+
 			const width = previewRoot?.offsetWidth || THUMBNAIL_SIZE;
 			const height = previewRoot?.offsetHeight || THUMBNAIL_SIZE;
 
+			// Keep the aspect ratio
+			previewRoot.style.width = `${ width }px`;
+			previewRoot.style.height = `${ height }px`;
+
+			previewRef.current.style.width = `${ THUMBNAIL_SIZE }px`;
+			previewRef.current.style.height = `${ THUMBNAIL_SIZE }px`;
+
 			const scaleFactor = Math.min( height, width );
 			const scale = THUMBNAIL_SIZE / scaleFactor;
 
@@ -32,12 +40,6 @@ export const Thumbnail = ( props ) => {
 
 	return (
 		<Box sx={ {
-			width: THUMBNAIL_SIZE,
-			height: THUMBNAIL_SIZE,
-			minWidth: THUMBNAIL_SIZE,
-			minHeight: THUMBNAIL_SIZE,
-			maxWidth: THUMBNAIL_SIZE,
-			maxHeight: THUMBNAIL_SIZE,
 			border: '1px solid',
 			borderColor: 'grey.300',
 			position: 'relative',
@@ -57,8 +59,6 @@ export const Thumbnail = ( props ) => {
 				sx={ {
 					pointerEvents: 'none',
 					transformOrigin: 'center',
-					width: THUMBNAIL_SIZE,
-					height: THUMBNAIL_SIZE,
 				} }
 				dangerouslySetInnerHTML={ {
 					__html: props.html,