fix(editor): apply node inline styles in read-only composed canvas content#54
Merged
Merged
Conversation
…ntent ReadOnlyNodeTree (template chrome, outlet previews, inlined VC bodies) rendered nodes without their inlineStyles, so a page previewed inside a template's outlet lost every style="…" the publisher emits — the demo hero h1 (font-size: clamp(46px, 10.5vw, 138px)) collapsed to the base heading size when editing the Main template, while editing the page directly showed it correctly. The inline-style React conversion now lives in @core/publisher as bagToReactStyle, next to bagToCSS/bagToInlineStyle and behind the same isEmittableProperty/sanitiseCssValue gate, replacing the admin-only getCanvasNodeInlineStyle duplicate. ReadOnlyNodeTree applies each node's own styles and appends a forwarded root bag's style after them, matching renderVisualComponentRef's append order (owning node wins). 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
1 participant
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.
What changed
ReadOnlyNodeTree— the shared renderer for all composed, non-editable canvas content (wrapping template chrome, a template's outlet preview, inlined Visual Component bodies) — rendered nodes without theirinlineStyles, while both the editable canvas (NodeRenderer) and the publisher (injectNodeInlineStyles) apply them.Symptom (reported on the demo site): the homepage hero h1 carries
style="font-size: clamp(46px, 10.5vw, 138px)". Editing the page directly shows it at ~138px; previewing the same page while editing the Main template collapsed it to the base heading size — and degraded the rest of the hero too, since the demo content uses inline styles pervasively (margin-bottom,max-width,font-size, …).Fix:
bagToReactStylein@core/publisher(classCss.ts), next tobagToCSS/bagToInlineStyle, behind the sameisEmittableProperty/sanitiseCssValuegate — one sanitisation source for every emission surface.ReadOnlyNodeTreenow applies each node'sinlineStylesvia that helper. A forwarded root wrapper bag'sstyle(the VC-ref case) is appended after the node's own declarations, matching the publisher's append order inrenderVisualComponentRef(owning node wins per property).getCanvasNodeInlineStyle;NodeRendereruses the core helper.docs/features/templates.mdand theReadOnlyNodeTreeheader.Why
Template-edit mode is advertised as a pixel-identical preview of how the page publishes. Dropping the per-node inline-style layer made composed content visibly drift from both the editable canvas and the published output.
Impact
Template chrome, outlet previews, and inlined VC bodies on the canvas now render the same
style="…"the published page ships. No publisher/output changes.Verification
bun test— 5393 pass (includes newsrc/__tests__/editor/readOnlyNodeTree.test.tsx: DOM wiring, sanitisation gate, root-bag merge order,clamp()passthrough)bun run build— cleanbun run lint— clean🤖 Generated with Claude Code