[CARE-2063] Fix width: 100% presentation for smaller images

See https://linear.app/prezly/issue/CARE-2063/image-resized-in-published-story-different-to-editor-option#comment-ee5bbe02
prezly · Jul 24, 2023 · 3f154ce · 3f154ce
1 parent eb006e4
commit 3f154ce
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 6 deletions.
diff --git a/src/elements/Image/Image.slate.stories.tsx b/src/elements/Image/Image.slate.stories.tsx
@@ -123,6 +123,39 @@ export const Width100: Story = () => (
     />
 );
 
+/**
+ * @see https://linear.app/prezly/issue/CARE-2063/image-resized-in-published-story-different-to-editor-option#comment-ee5bbe02
+ */
+export const Width100SmallImage: Story = () => (
+    <Renderer
+        nodes={[
+            {
+                type: 'image-block',
+                href: '',
+                new_tab: true,
+                align: 'left',
+                layout: 'contained',
+                width: '100%',
+                file: {
+                    version: 2,
+                    uuid: 'd0bdf122-a96a-425b-93e8-e3f1a052d413',
+                    filename: 'dog-300x300.jpeg',
+                    mime_type: 'image/jpeg',
+                    size: 30264,
+                    original_width: 150,
+                    original_height: 150,
+                    effects: [],
+                },
+                children: [
+                    {
+                        text: 'Contained 100% width',
+                    },
+                ],
+            },
+        ]}
+    />
+);
+
 export const Width45: Story = () => (
     <Renderer
         nodes={[

diff --git a/src/elements/Image/Image.tsx b/src/elements/Image/Image.tsx
@@ -20,9 +20,14 @@ function getContainerStyle(node: ImageNode): CSSProperties {
         return {};
     }
 
-    const width = `${node.file.original_width}px`;
+    const maxWidth = `${node.file.original_width}px`;
+    const unit = node.width.slice(-1) === '%' ? '%' : 'px';
 
-    return { width };
+    if (unit === '%' && parseFloat(node.width).toFixed(2) === Number(100).toFixed(2)) {
+        return { maxWidth };
+    }
+
+    return { width: node.width, maxWidth };
 }
 
 const NEW_TAB_ATTRIBUTES: Partial<AnchorHTMLAttributes<HTMLAnchorElement>> = {
@@ -32,14 +37,21 @@ const NEW_TAB_ATTRIBUTES: Partial<AnchorHTMLAttributes<HTMLAnchorElement>> = {
 
 export function Image({ children, className, node, onDownload, onPreviewOpen, ...props }: Props) {
     const { file, href, align, layout } = node;
+
     const isNewTab = node.new_tab ?? true;
+    const title = stringifyNode(node).trim();
+    const containerStyle = getContainerStyle(node);
+
     const [isPreviewOpen, setIsPreviewOpen] = useState<boolean>(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const image = useMemo(() => UploadcareImage.createFromPrezlyStoragePayload(file), [file.uuid]);
-    const containerStyle = getContainerStyle(node);
-    const handleRolloverClick = () => setIsPreviewOpen(true);
-    const handleImagePreviewClose = () => setIsPreviewOpen(false);
-    const title = stringifyNode(node).trim();
+
+    function handleRolloverClick() {
+        setIsPreviewOpen(true);
+    }
+    function handleImagePreviewClose() {
+        setIsPreviewOpen(false);
+    }
 
     return (
         <figure