63 lines
2.3 KiB
TypeScript
63 lines
2.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 { CanvasTokenStyle } from './editor/CanvasTokenStyle';
|
|
import { SaveGuardProvider, useSaveGuard } from './state/SaveGuardContext';
|
|
import { NoticeProvider } from './state/NoticeContext';
|
|
import { ProjectExtrasProvider } from './state/ProjectExtrasContext';
|
|
import { CanvasOverlays } from './editor/CanvasOverlays';
|
|
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} />;
|
|
};
|
|
|
|
// Craft fires onNodesChange only when the serialized node tree changes (not on
|
|
// selection, hover or DOM registration), which is exactly "the canvas was edited".
|
|
export const SaveAwareEditor: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const { markDirty } = useSaveGuard();
|
|
return (
|
|
<Editor resolver={componentResolver} enabled={true} onRender={RenderNode} onNodesChange={markDirty}>
|
|
{children}
|
|
</Editor>
|
|
);
|
|
};
|
|
|
|
export const App: React.FC<AppProps> = ({ whpConfig }) => {
|
|
return (
|
|
<EditorConfigProvider config={whpConfig}>
|
|
<SaveGuardProvider>
|
|
<NoticeProvider>
|
|
<ProjectExtrasProvider>
|
|
<SiteDesignProvider>
|
|
<CanvasTokenStyle />
|
|
<SaveAwareEditor>
|
|
<PageProvider>
|
|
<SitesmithProvider>
|
|
<EditorShell />
|
|
<CanvasOverlays />
|
|
<SitesmithModalMount />
|
|
</SitesmithProvider>
|
|
</PageProvider>
|
|
</SaveAwareEditor>
|
|
</SiteDesignProvider>
|
|
</ProjectExtrasProvider>
|
|
</NoticeProvider>
|
|
</SaveGuardProvider>
|
|
</EditorConfigProvider>
|
|
);
|
|
};
|