fix(image): editor canvas ignores node inline styles on images#253
Merged
DavidBabinec merged 1 commit intoJul 24, 2026
Merged
Conversation
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 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #252
Problem
In the design canvas,
base.imagenodes ignore theirinlineStylesonce the media asset resolves — e.g. a header logo withheight: 1.75rem; width: autorenders at intrinsic size and fills the frame. The published page is correct; this is an editor-only WYSIWYG break.Cause
In
ImageEditor.tsx(resolved-asset branch) the explicitstyle={style}prop comes after the{...nodeWrapperProps}spread, so it always overridesnodeWrapperProps.style— the channel that carriesnode.inlineStylesinto the canvas. This happens both whenstyleis the BlurHash backdrop object and when it isundefined(an explicitstyle={undefined}still wins over a spread value in React). The raw-src fallback branch has no explicitstyleprop, which is why inline styles briefly apply until the asset cache resolves, then vanish.Fix
Merge instead of clobber: spread
nodeWrapperProps?.styleinto the backdrop object (backdrop keys win — they only touchbackground-*), and passnodeWrapperProps?.stylethrough when there is no backdrop.Verification
tsc --noEmitclean,eslintclean on the changed file.inlineStylesheight: 1.75rem; width: auto; display: blockrendered at ~2000px wide in the canvas before the change; published output was already correct.🤖 Generated with Claude Code