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:
+2
-1
@@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Editor } from '@craftjs/core';
|
||||
import { EditorShell } from './editor/EditorShell';
|
||||
import { RenderNode } from './editor/RenderNode';
|
||||
import { componentResolver } from './components/resolver';
|
||||
import { WhpConfig } from './types';
|
||||
import { EditorConfigProvider } from './state/EditorConfigContext';
|
||||
@@ -23,7 +24,7 @@ export const App: React.FC<AppProps> = ({ whpConfig }) => {
|
||||
return (
|
||||
<EditorConfigProvider config={whpConfig}>
|
||||
<SiteDesignProvider>
|
||||
<Editor resolver={componentResolver} enabled={true}>
|
||||
<Editor resolver={componentResolver} enabled={true} onRender={RenderNode}>
|
||||
<PageProvider>
|
||||
<SitesmithProvider>
|
||||
<EditorShell />
|
||||
|
||||
Reference in New Issue
Block a user