shadowdaoandClaude Opus 4.8
05e00c572d
.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>
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
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';
|
|
import { SiteDesignProvider } from './state/SiteDesignContext';
|
|
import { PageProvider } from './state/PageContext';
|
|
import { SitesmithProvider, useSitesmithModal } from './state/SitesmithContext';
|
|
import { SitesmithModal } from './panels/sitesmith/SitesmithModal';
|
|
|
|
interface AppProps {
|
|
whpConfig: WhpConfig | null;
|
|
}
|
|
|
|
const SitesmithModalMount: React.FC = () => {
|
|
const { isOpen, target, close } = useSitesmithModal();
|
|
if (!isOpen) return null;
|
|
return <SitesmithModal target={target} onClose={close} />;
|
|
};
|
|
|
|
export const App: React.FC<AppProps> = ({ whpConfig }) => {
|
|
return (
|
|
<EditorConfigProvider config={whpConfig}>
|
|
<SiteDesignProvider>
|
|
<Editor resolver={componentResolver} enabled={true} onRender={RenderNode}>
|
|
<PageProvider>
|
|
<SitesmithProvider>
|
|
<EditorShell />
|
|
<SitesmithModalMount />
|
|
</SitesmithProvider>
|
|
</PageProvider>
|
|
</Editor>
|
|
</SiteDesignProvider>
|
|
</EditorConfigProvider>
|
|
);
|
|
};
|