fix(canvas): render base.text tag:none as bare text to match published DOM#63
Merged
Merged
Conversation
…d DOM A `base.text` node with `tag: none` publishes as bare text (no element) but the canvas wrapped it in a `<span>`. Descendant selectors such as `.ist-404__num span` then matched the phantom span in the editor while leaving the published page untouched — e.g. the 404 template's two `tag: none` "4"s rendered orange in the builder but black on the published page. The canvas now renders `tag: none` as bare text + `<br>` breaks, exactly like the publisher (`src/modules/base/text/index.ts`), so the canvas DOM equals the published DOM. This is the same canvas-equals-published principle that drove removing the per-node wrapper `<div>`. Trade-off: a `tag: none` node owns no element, so it has no in-canvas selection ring / hover / inline-edit; it is selected via the Layers panel and edited via the Properties "Text" field. The inline-edit branch still hosts a `<span>` for an active session, which is unreachable from the canvas for `tag: none` (no element to double-click). Verified live in the editor: the 404 template's "4"s now render black and the "0" orange, matching the front end; `.ist-404__num` DOM is `4<span>0</span>4`. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Satisfies react-doctor/no-render-in-render: a named component returning a fragment replaces the inline render helper. Still adds no host element, so the tag:none canvas DOM remains bare text matching the published page. Co-Authored-By: Claude Opus 4.8 (1M context) <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
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
In the visual editor canvas, a
base.textnode withtag: nonewas wrapped in a<span>. The publisher renderstag: noneas bare text with no element (src/modules/base/text/index.ts→{ html: text }). That divergence let descendant selectors match the phantom span in the builder while leaving the published page untouched.Concretely, on the 404 template the number is one
.ist-404__numcontainer with threebase.textchildren — twotag: none4s and atag: span0— plus an ambient rule.ist-404__num span { color: var(--ist-accent) }. In the canvas all three were spans, so the rule painted the4s orange; on the published page the4s are bare text, so they stayed black. The builder lied about the result.Fix
The canvas now renders
tag: noneas bare text +<br>breaks (a fragment, no host element), exactly like the publisher — so the canvas DOM equals the published DOM. This is the same canvas-equals-published principle that drove removing the per-node wrapper<div>.TextEditor.tsx:tag: nonedisplay path renders aBareTextfragment instead of a<span>wrapper. The inline-edit branch still hosts a<span>for an active session (unreachable from the canvas fortag: none— there is no element to double-click).Trade-off (intentional, agreed with author)
A
tag: nonenode owns no element, so it has no in-canvas selection ring / hover / inline-edit — it is selected via the Layers panel and edited via the Properties → Text field. This is the honest reflection of "no element": that text has no box on the published page either. A future, separate PR could add Range-based selection to restore direct manipulation without a phantom element.User/developer impact
tag: nonetext.tag: none.Verification
bun run build✓bun run lint✓bun test✓ — 5437 pass, 0 fail (added 3 canvas-render tests inbase-modules.test.ts)4s render black and the0orange, matching the front end..ist-404__numDOM is4<span data-node-id=…>0</span>4(childNodes["#text:4","SPAN","#text:4"]), no console errors.🤖 Generated with Claude Code