Show component-indicator selection badge in the canvas

.component-indicator existed in editor.css but was never rendered
anywhere. Add RenderNode.tsx as a Craft.js <Editor onRender> override
and wire it in App.tsx: for the currently-selected node (excluding
ROOT) it portals a floating badge showing the node's displayName plus
a "select parent" chevron wired to actions.selectNode(parentId). Every
other node's render passes through untouched (a Fragment, no extra
DOM), and the badge portals to document.body positioned via
getBoundingClientRect rather than wrapping nodes in extra DOM, so it
can't perturb canvas layout and never appears in toHtml export.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-12 20:15:08 -07:00
co-authored by Claude Opus 4.8
parent 458069afb6
commit 05e00c572d
4 changed files with 214 additions and 3 deletions
+28 -2
View File
@@ -1074,12 +1074,16 @@ body {
outline-offset: -1px;
}
/* Component indicator badge */
/* Component indicator badge (floats over the selected node via a portal --
position/top/left are set inline per-node, see RenderNode.tsx) */
.component-indicator {
position: absolute;
top: -22px;
left: 0;
padding: 2px 8px;
display: flex;
align-items: center;
gap: 6px;
padding: 2px 6px 2px 8px;
font-size: 10px;
font-weight: 600;
color: #ffffff;
@@ -1090,6 +1094,28 @@ body {
z-index: 10;
}
.component-indicator-parent-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
padding: 0;
border: none;
border-radius: 2px;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
font-size: 8px;
line-height: 1;
cursor: pointer;
pointer-events: auto;
transition: background var(--transition-fast);
}
.component-indicator-parent-btn:hover {
background: rgba(255, 255, 255, 0.4);
}
/* --------------------------------------------------------------------------
Scrollbar Styling
-------------------------------------------------------------------------- */