91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { DndProvider } from 'react-dnd';
|
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
import { Toolbar } from './Toolbar';
|
|
import { ComponentPalette } from './ComponentPalette';
|
|
import { PropertyPanel } from './PropertyPanel';
|
|
import { Canvas } from './Canvas';
|
|
import { DragItem } from '../hooks/useDragDrop';
|
|
import { usePageStorage } from '../hooks/usePageStorage';
|
|
import './Editor.css';
|
|
|
|
interface EditorProps {
|
|
pageId?: string;
|
|
}
|
|
|
|
export const Editor: React.FC<EditorProps> = ({ pageId }) => {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [selectedComponent, setSelectedComponent] = useState<any>(null);
|
|
const [canvasComponents, setCanvasComponents] = useState<any[]>([]);
|
|
|
|
const { savePage, loadPage, isLoading: storageLoading } = usePageStorage();
|
|
|
|
const handleSave = async () => {
|
|
if (!pageId) return;
|
|
try {
|
|
await savePage(pageId, { components: canvasComponents });
|
|
// Show success notification
|
|
} catch (error) {
|
|
// Show error notification
|
|
}
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
if (pageId) {
|
|
loadPage(pageId).then((config) => {
|
|
if (config?.components) {
|
|
setCanvasComponents(config.components);
|
|
}
|
|
});
|
|
}
|
|
}, [pageId, loadPage]);
|
|
|
|
const handlePreview = () => {
|
|
// TODO: Implement preview logic
|
|
};
|
|
|
|
const handleExit = () => {
|
|
window.location.href = '/';
|
|
};
|
|
|
|
const handleComponentSelect = (componentType: string) => {
|
|
// Component selection (not drag-drop)
|
|
};
|
|
|
|
const handleComponentDrop = (item: DragItem) => {
|
|
const newComponent = {
|
|
id: `comp-${Date.now()}`,
|
|
type: item.type,
|
|
properties: {},
|
|
};
|
|
setCanvasComponents((prev) => [...prev, newComponent]);
|
|
};
|
|
|
|
return (
|
|
<DndProvider backend={HTML5Backend}>
|
|
<div data-testid="editor-container" className="editor-container">
|
|
<Toolbar
|
|
onSave={handleSave}
|
|
onPreview={handlePreview}
|
|
onExit={handleExit}
|
|
isLoading={isLoading || storageLoading}
|
|
/>
|
|
<div className="editor-content">
|
|
<div data-testid="left-sidebar" className="sidebar left">
|
|
<ComponentPalette onComponentSelect={handleComponentSelect} />
|
|
</div>
|
|
<div data-testid="canvas-container" className="canvas-container">
|
|
<Canvas
|
|
components={canvasComponents}
|
|
onComponentDrop={handleComponentDrop}
|
|
/>
|
|
</div>
|
|
<div data-testid="right-sidebar" className="sidebar right">
|
|
<PropertyPanel selectedComponent={selectedComponent} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DndProvider>
|
|
);
|
|
};
|
|
|