From e6251648ced8439334f183d3ef0b847cb89f02be Mon Sep 17 00:00:00 2001 From: Jan Borsky Date: Fri, 24 Jul 2026 09:16:18 +0200 Subject: [PATCH] fix(image): stop clobbering node inline styles in the editor canvas In ImageEditor's resolved-asset branch the explicit style prop came after the {...nodeWrapperProps} spread, so it always overrode nodeWrapperProps.style - the channel that carries node.inlineStyles into the canvas. Even style={undefined} wins over a spread value, so any image with a resolved library asset rendered at intrinsic size in the editor while the published page honoured the inline styles. Merge the BlurHash backdrop with nodeWrapperProps.style instead (backdrop keys win, they only touch background-*), and fall back to nodeWrapperProps.style when there is no backdrop. The raw-src fallback branch was already correct, which is why inline styles briefly applied until the asset cache resolved. Co-Authored-By: Claude Fable 5 --- src/modules/base/image/ImageEditor.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/modules/base/image/ImageEditor.tsx b/src/modules/base/image/ImageEditor.tsx index 895a8e0ee..77b5d038a 100644 --- a/src/modules/base/image/ImageEditor.tsx +++ b/src/modules/base/image/ImageEditor.tsx @@ -87,13 +87,18 @@ export const ImageEditor: React.FC> = ({ ) } + // Merge the BlurHash backdrop with the node's inline styles carried by + // nodeWrapperProps.style — an explicit `style` prop after the spread would + // otherwise clobber them (even `style={undefined}` wins over the spread), + // making the canvas ignore inline styles the published render honours. const style = responsive.blurUrl ? ({ + ...nodeWrapperProps?.style, backgroundImage: `url(${responsive.blurUrl})`, backgroundSize: 'cover', backgroundPosition: 'center', } as React.CSSProperties) - : undefined + : nodeWrapperProps?.style return (