Fixes for image sizes

package.json

@@ -127,6 +127,7 @@
         "concurrently": "^6.5.1",
         "css-loader": "^6.7.1",
         "eslint": "^8.39.0",
+        "eslint-config-prettier": "^8.10.0",
         "gulp": "^4.0.2",
         "gulp-babel": "^8.0.0",
         "gulp-concat": "^2.6.1",

src/components/Media/Media.tsx

@@ -2,16 +2,25 @@ import type { UploadcareImage } from '@prezly/uploadcare';
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
 
+import { convertSizesToWidths } from './lib';
+
 import './Media.scss';
 
 interface Props {
     className?: string;
     image: UploadcareImage;
     style?: CSSProperties;
     title?: string;
+    sizes?: string;
 }
 
-export function Media({ className, image, style, title }: Props) {
+export function Media({
+    className,
+    image,
+    style,
+    title,
+    sizes = '(max-width: 992px) 800px, (max-width: 576px) 400px, 1200px',
+}: Props) {
     const computedClassName = classNames('prezly-slate-media', className, {
         'prezly-slate-media--image': !image.isGif(),
         'prezly-slate-media--video': image.isGif(),
@@ -49,10 +58,13 @@ export function Media({ className, image, style, title }: Props) {
             alt={title}
             className={computedClassName}
             src={image.format().cdnUrl}
-            srcSet={[image.srcSet(1200), image.srcSet(800), image.srcSet(400)]
+            srcSet={convertSizesToWidths(sizes)
+                .map((width) => image.srcSet(width))
                 .filter(Boolean)
                 .join(', ')}
-            sizes={`(max-width: 992px) 800px, (max-width: 576px) 400px, 1200px`}
+            sizes={sizes}
+            width={image.originalWidth}
+            height={image.originalHeight}
             style={style}
             title={title}
         />

src/components/Media/lib/convertSizesToWidths.test.ts

@@ -0,0 +1,22 @@
+import { convertSizesToWidths } from './convertSizesToWidths';
+
+describe('convertSizesToWidths', () => {
+    it('Returns empty array when `sizes` does not contain valid size defintions', () => {
+        expect(convertSizesToWidths('')).toEqual([]);
+        expect(convertSizesToWidths('test string 123')).toEqual([]);
+        expect(convertSizesToWidths('test, 123')).toEqual([]);
+    });
+
+    it('Returns array of width numbers when `sizes` is a valid size definition', () => {
+        expect(
+            convertSizesToWidths('(max-width: 992px) 800px, (max-width: 576px) 400px, 1200px'),
+        ).toEqual([800, 400, 1200]);
+        expect(
+            convertSizesToWidths('(max-width: 992px) 800w, (max-width: 576px) 400w, 100vw'),
+        ).toEqual([800, 400]);
+    });
+
+    it('Returns array of width numbers when `sizes` has just one size definition', () => {
+        expect(convertSizesToWidths('1200px')).toEqual([1200]);
+    });
+});

src/components/Media/lib/convertSizesToWidths.ts

@@ -0,0 +1,7 @@
+const SIZE_DEFINITION_REGEX = /(?:\((?:min|max)-width: \d+px\) ?)?(\d+)(?:px|w)/g;
+
+export function convertSizesToWidths(sizesString: string): number[] {
+    const matches = Array.from(sizesString.matchAll(SIZE_DEFINITION_REGEX));
+
+    return matches.map((match) => parseInt(match[1], 10));
+}

src/components/Media/lib/index.ts

@@ -0,0 +1 @@
+export { convertSizesToWidths } from './convertSizesToWidths';

src/elements/Image/Image.tsx

@@ -13,6 +13,7 @@ import './Image.scss';
 
 interface Props extends HTMLAttributes<HTMLElement> {
     node: ImageNode;
+    sizes?: string;
     onDownload?: (image: UploadcareImage) => void;
     onPreviewOpen?: (image: UploadcareImage) => void;
 }
@@ -37,7 +38,15 @@ const NEW_TAB_ATTRIBUTES: Partial<AnchorHTMLAttributes<HTMLAnchorElement>> = {
     rel: 'noopener noreferrer',
 };
 
-export function Image({ children, className, node, onDownload, onPreviewOpen, ...props }: Props) {
+export function Image({
+    children,
+    className,
+    node,
+    sizes,
+    onDownload,
+    onPreviewOpen,
+    ...props
+}: Props) {
     const { file, href, align, layout } = node;
 
     const isNewTab = node.new_tab ?? true;
@@ -75,7 +84,12 @@ export function Image({ children, className, node, onDownload, onPreviewOpen, ..
                     {...(isNewTab ? NEW_TAB_ATTRIBUTES : {})}
                     style={containerStyle}
                 >
-                    <Media className="prezly-slate-image__media" image={image} title={title} />
+                    <Media
+                        className="prezly-slate-image__media"
+                        image={image}
+                        title={title}
+                        sizes={sizes}
+                    />
                 </a>
             )}
 
@@ -87,7 +101,12 @@ export function Image({ children, className, node, onDownload, onPreviewOpen, ..
                     onClick={handleRolloverClick}
                     style={containerStyle}
                 >
-                    <Media className="prezly-slate-image__media" image={image} title={title} />
+                    <Media
+                        className="prezly-slate-image__media"
+                        image={image}
+                        title={title}
+                        sizes={sizes}
+                    />
                 </Rollover>
             )}