feat(Nextjs): Custom layout Html Editing in sheet
This commit is contained in:
shiva raj badu
parent
56d9cf54b9
commit
d83e854024
9 changed files with 69 additions and 973 deletions
Binary file not shown.
|
|
@ -1,7 +1,6 @@
|
|||
'use client'
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Save, X, Code } from "lucide-react";
|
||||
import { ProcessedSlide } from "../../types";
|
||||
import Editor from 'react-simple-code-editor';
|
||||
|
|
@ -10,6 +9,7 @@ import 'prismjs/components/prism-clike';
|
|||
import 'prismjs/components/prism-javascript';
|
||||
import 'prismjs/components/prism-markup';
|
||||
import 'prismjs/components/prism-jsx';
|
||||
import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet";
|
||||
|
||||
interface HtmlEditorProps {
|
||||
slide: ProcessedSlide;
|
||||
|
|
@ -42,58 +42,56 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<Card className="border-2 border-purple-200 bg-purple-50">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Code className="w-5 h-5 text-purple-600" />
|
||||
<span className="text-purple-800">HTML Editor</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleCancel}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<X size={14} />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
className="flex items-center gap-1 bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
<Save size={14} />
|
||||
Save HTML
|
||||
</Button>
|
||||
</div>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 ">
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: htmlContent,
|
||||
}}
|
||||
/>
|
||||
<p className="text-base text-gray-800">Edit the HTML code to customize the slide layout.</p>
|
||||
{/* Render code editor */}
|
||||
<div className="container__content_area">
|
||||
<Sheet open={isHtmlEditMode} onOpenChange={(open) => { if (!open) handleCancel(); }}>
|
||||
<SheetContent side="right" className="w-full sm:max-w-[860px] p-0">
|
||||
<SheetHeader className="px-6 py-4 border-b">
|
||||
<SheetTitle className="flex items-center justify-between w-full">
|
||||
<span className="flex items-center gap-2 text-purple-800">
|
||||
<Code className="w-5 h-5 text-purple-600" />
|
||||
HTML Editor
|
||||
</span>
|
||||
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
<Editor
|
||||
value={htmlContent}
|
||||
onValueChange={htmlContent => setHtmlContent(htmlContent)}
|
||||
highlight={htmlContent => highlight(htmlContent, languages.jsx!,'jsx')}
|
||||
padding={10}
|
||||
id="html-editor"
|
||||
name="html-editor"
|
||||
|
||||
className="container__editor"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="space-y-4 px-2 overflow-y-auto h-[85%]">
|
||||
<div className="container__content_area">
|
||||
<Editor
|
||||
value={htmlContent}
|
||||
onValueChange={html => setHtmlContent(html)}
|
||||
highlight={code => highlight(code, languages.jsx!, 'jsx')}
|
||||
padding={10}
|
||||
id="html-editor"
|
||||
name="html-editor"
|
||||
className="container__editor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SheetFooter className="px-6 py-4 border-b">
|
||||
<SheetTitle className="flex items-center justify-between w-full">
|
||||
<div></div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleCancel}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<X size={14} />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
className="flex items-center gap-1 bg-purple-600 hover:bg-purple-700"
|
||||
size="sm"
|
||||
>
|
||||
<Save size={14} />
|
||||
Save HTML
|
||||
</Button>
|
||||
</div>
|
||||
</SheetTitle>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
};
|
||||
|
|
@ -56,6 +56,21 @@ const LayoutSelection: React.FC<LayoutSelectionProps> = ({
|
|||
});
|
||||
}
|
||||
}, [layoutGroups, selectedLayoutGroup, onSelectLayoutGroup]);
|
||||
useEffect(() => {
|
||||
if (loading) {
|
||||
return;
|
||||
}
|
||||
const existingScript = document.querySelector(
|
||||
'script[src*="tailwindcss.com"]'
|
||||
);
|
||||
if (!existingScript) {
|
||||
const script = document.createElement("script");
|
||||
script.src = "https://cdn.tailwindcss.com";
|
||||
script.async = true;
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ const SlideContent = ({ slide, index, presentationId }: SlideContentProps) => {
|
|||
}, [renderSlideContent, slide, isStreaming]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isStreaming || loading) {
|
||||
if (loading) {
|
||||
return;
|
||||
}
|
||||
if (slide.layout_group.includes("custom")) {
|
||||
|
|
|
|||
|
|
@ -1,399 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
// import { useGroupLayoutLoader } from '../hooks/useGroupLayoutLoader'
|
||||
import LoadingStates from "../components/LoadingStates";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeft, Edit, Home, Trash2 } from "lucide-react";
|
||||
import { useLayout } from "@/app/(presentation-generator)/context/LayoutContext";
|
||||
|
||||
import html2canvas from "html2canvas";
|
||||
import { EditControls } from "../../custom-template/components/EachSlide/EditControls";
|
||||
import { useDrawingCanvas } from "../../custom-template/hooks/useDrawingCanvas";
|
||||
const GroupLayoutPreview = () => {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const slug = params.slug as string;
|
||||
// const isCustom = slug.includes("custom-");
|
||||
const isCustom = true;
|
||||
// Custom hooks
|
||||
const {
|
||||
canvasRef,
|
||||
slideDisplayRef,
|
||||
strokeWidth,
|
||||
strokeColor,
|
||||
eraserMode,
|
||||
isDrawing,
|
||||
canvasDimensions,
|
||||
setCanvasDimensions,
|
||||
didYourDraw,
|
||||
handleMouseDown,
|
||||
handleMouseMove,
|
||||
handleMouseUp,
|
||||
handleTouchStart,
|
||||
handleTouchMove,
|
||||
handleTouchEnd,
|
||||
handleClearCanvas,
|
||||
handleEraserModeChange,
|
||||
handleStrokeColorChange,
|
||||
handleStrokeWidthChange,
|
||||
} = useDrawingCanvas();
|
||||
|
||||
const slideContentRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const { getFullDataByGroup, loading,refetch } = useLayout();
|
||||
const layoutGroup = getFullDataByGroup(slug);
|
||||
const [isEditMode, setIsEditMode] = useState(false);
|
||||
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
|
||||
const [prompt, setPrompt] = useState("");
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const existingScript = document.querySelector(
|
||||
'script[src*="tailwindcss.com"]'
|
||||
);
|
||||
if (!existingScript) {
|
||||
const script = document.createElement("script");
|
||||
script.src = "https://cdn.tailwindcss.com";
|
||||
script.async = true;
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
// Size canvas to content when entering edit mode
|
||||
useEffect(() => {
|
||||
if (isEditMode && slideContentRef.current) {
|
||||
const rect = slideContentRef.current.getBoundingClientRect();
|
||||
setCanvasDimensions({
|
||||
width: Math.max(rect.width, 800),
|
||||
height: Math.max(rect.height, 600),
|
||||
});
|
||||
}
|
||||
}, [isEditMode, setCanvasDimensions]);
|
||||
|
||||
// Handle loading state
|
||||
if (loading) {
|
||||
return <LoadingStates type="loading" />;
|
||||
}
|
||||
|
||||
// Handle empty state
|
||||
if (!layoutGroup || layoutGroup.length === 0) {
|
||||
return <LoadingStates type="empty" />;
|
||||
}
|
||||
const deleteLayouts = async () => {
|
||||
const presentationId = slug.replace('custom-','');
|
||||
refetch();
|
||||
router.back();
|
||||
const response = await fetch(`/api/v1/ppt/layout-management/delete-layouts/${presentationId}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
if (response.ok) {
|
||||
router.push("/template-preview");
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async (
|
||||
slideDisplayRef: React.RefObject<HTMLDivElement |null>,
|
||||
didYourDraw: boolean
|
||||
) => {
|
||||
if (
|
||||
!slideContentRef.current ||
|
||||
!slideDisplayRef.current
|
||||
)
|
||||
return;
|
||||
|
||||
if (!prompt.trim()) {
|
||||
alert("Please enter a prompt before saving.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsUpdating(true);
|
||||
|
||||
try {
|
||||
// Take screenshot of the slide display area (slide only)
|
||||
const slideOnly = await html2canvas(slideDisplayRef.current, {
|
||||
backgroundColor: "#ffffff",
|
||||
scale: 1,
|
||||
logging: false,
|
||||
useCORS: true,
|
||||
ignoreElements: (element) => {
|
||||
return element.tagName === "CANVAS";
|
||||
},
|
||||
});
|
||||
let slideWithCanvas;
|
||||
if (didYourDraw) {
|
||||
// Take screenshot of the entire slide display area including canvas
|
||||
slideWithCanvas = await html2canvas(slideDisplayRef.current, {
|
||||
backgroundColor: "#ffffff",
|
||||
scale: 1,
|
||||
logging: false,
|
||||
useCORS: true,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
const currentUiImageBlob = dataURLToBlob(
|
||||
slideOnly.toDataURL("image/png")
|
||||
);
|
||||
let sketchImageBlob;
|
||||
if (didYourDraw && slideWithCanvas) {
|
||||
sketchImageBlob = dataURLToBlob(slideWithCanvas.toDataURL("image/png"));
|
||||
}
|
||||
|
||||
// download the images
|
||||
|
||||
const currentUiImageUrl = URL.createObjectURL(currentUiImageBlob);
|
||||
if (currentUiImageUrl) {
|
||||
const a = document.createElement("a");
|
||||
a.href = currentUiImageUrl;
|
||||
a.download = `slide-current.png`;
|
||||
a.click();
|
||||
}
|
||||
if (sketchImageBlob) {
|
||||
const sketchImageUrl = URL.createObjectURL(sketchImageBlob);
|
||||
if (sketchImageUrl) {
|
||||
const b = document.createElement("a");
|
||||
b.href = sketchImageUrl;
|
||||
b.download = `slide-sketch.png`;
|
||||
b.click();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// const formData = new FormData();
|
||||
// formData.append(
|
||||
// "current_ui_image",
|
||||
// currentUiImageBlob,
|
||||
// `slide--current.png`
|
||||
// );
|
||||
// if (didYourDraw && slideWithCanvas && sketchImageBlob) {
|
||||
// formData.append(
|
||||
// "sketch_image",
|
||||
// sketchImageBlob,
|
||||
// `slide-sketch.png`
|
||||
// );
|
||||
// }
|
||||
// formData.append("html", '');
|
||||
// formData.append("prompt", prompt);
|
||||
|
||||
// const response = await fetch("/api/v1/ppt/html-edit/", {
|
||||
// method: "POST",
|
||||
// body: formData,
|
||||
// });
|
||||
|
||||
// if (!response.ok) {
|
||||
// throw new Error(`API call failed: ${response.statusText}`);
|
||||
// }
|
||||
|
||||
// const data = await response.json();
|
||||
|
||||
|
||||
// Exit edit mode
|
||||
setIsEditMode(false);
|
||||
setPrompt("");
|
||||
} catch (error) {
|
||||
console.error("Error updating slide:", error);
|
||||
alert(
|
||||
`Error updating slide: ${
|
||||
error instanceof Error ? error.message : "Unknown error"
|
||||
}`
|
||||
);
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
};
|
||||
const dataURLToBlob = (dataURL: string): Blob => {
|
||||
const parts = dataURL.split(",");
|
||||
const contentType = parts[0].match(/:(.*?);/)?.[1] || "image/png";
|
||||
const raw = window.atob(parts[1]);
|
||||
const rawLength = raw.length;
|
||||
const uInt8Array = new Uint8Array(rawLength);
|
||||
|
||||
for (let i = 0; i < rawLength; ++i) {
|
||||
uInt8Array[i] = raw.charCodeAt(i);
|
||||
}
|
||||
|
||||
return new Blob([uInt8Array], { type: contentType });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm border-b sticky top-0 z-30">
|
||||
<div className="max-w-7xl mx-auto px-6 py-6">
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => router.back()}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => router.push("/template-preview")}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Home className="w-4 h-4" />
|
||||
All Groups
|
||||
</Button>
|
||||
{isCustom && <button className=" border border-red-200 flex justify-center items-center gap-2 text-red-700 px-4 py-1 rounded-md" onClick={() => {
|
||||
deleteLayouts();
|
||||
}}><Trash2 className="w-4 h-4" />Delete</button>}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl font-bold text-gray-900 capitalize">
|
||||
{layoutGroup[0].groupName} Layouts
|
||||
</h1>
|
||||
<p className="text-gray-600 mt-2">
|
||||
{layoutGroup.length} layout{layoutGroup.length !== 1 ? "s" : ""} •{" "}
|
||||
{layoutGroup[0].groupName}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||
{/* Edit Controls (no HTML editor) */}
|
||||
{isCustom && (
|
||||
<EditControls
|
||||
isEditMode={isEditMode}
|
||||
prompt={prompt}
|
||||
isUpdating={isUpdating}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeColor={strokeColor}
|
||||
eraserMode={eraserMode}
|
||||
onPromptChange={setPrompt}
|
||||
onSave={() => {
|
||||
setIsUpdating(true);
|
||||
setTimeout(() => {
|
||||
setIsUpdating(false);
|
||||
setIsEditMode(false);
|
||||
setSelectedIndex(null);
|
||||
}, 300);
|
||||
}}
|
||||
onCancel={() => {
|
||||
setIsEditMode(false);
|
||||
setSelectedIndex(null);
|
||||
handleClearCanvas();
|
||||
}}
|
||||
onStrokeWidthChange={handleStrokeWidthChange}
|
||||
onStrokeColorChange={handleStrokeColorChange}
|
||||
onEraserModeChange={handleEraserModeChange}
|
||||
onClearCanvas={handleClearCanvas}
|
||||
/>
|
||||
)}
|
||||
<div className="space-y-8">
|
||||
{layoutGroup.map((layout: any, index: number) => {
|
||||
const {
|
||||
component: LayoutComponent,
|
||||
sampleData,
|
||||
name,
|
||||
fileName,
|
||||
} = layout;
|
||||
|
||||
const isSelected = isCustom && isEditMode && selectedIndex === index;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={`${layoutGroup[0].groupName}-${index}`}
|
||||
className="overflow-hidden shadow-md hover:shadow-lg transition-shadow"
|
||||
>
|
||||
{/* Layout Header */}
|
||||
<div className="bg-white px-6 py-4 border-b">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-900">
|
||||
{name}
|
||||
</h3>
|
||||
<div className="flex items-center gap-4 mt-1">
|
||||
<span className="text-sm text-gray-500 font-mono">
|
||||
{fileName}
|
||||
</span>
|
||||
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
{layoutGroup[0].groupName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
{isCustom && (
|
||||
<button
|
||||
className="border flex items-center gap-2 border-blue-400 bg-blue-50 px-4 py-1 rounded-md text-blue-700"
|
||||
onClick={() => {
|
||||
setIsEditMode(true);
|
||||
setSelectedIndex(index);
|
||||
}}
|
||||
>
|
||||
<Edit className="w-4 h-4" />Edit
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Layout Content */}
|
||||
<div ref={isSelected ? slideDisplayRef : undefined} className="relative mx-auto w-full">
|
||||
<div
|
||||
ref={isSelected ? slideContentRef : undefined}
|
||||
className="bg-gray-50 aspect-video max-w-[1280px] w-full"
|
||||
>
|
||||
<LayoutComponent data={sampleData} />
|
||||
{isSelected && (
|
||||
<canvas
|
||||
ref={canvasRef!}
|
||||
width={canvasDimensions.width}
|
||||
height={canvasDimensions.height}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
zIndex: 30,
|
||||
cursor: eraserMode ? "grab" : "crosshair",
|
||||
pointerEvents: "auto",
|
||||
touchAction: "none",
|
||||
}}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseLeave={handleMouseUp}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchMove={handleTouchMove}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-white border-t mt-16">
|
||||
<div className="max-w-7xl mx-auto px-6 py-8">
|
||||
<div className="text-center text-gray-600">
|
||||
<p>
|
||||
{layoutGroup[0].groupName} • {layoutGroup.length} components
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupLayoutPreview;
|
||||
|
|
@ -1,361 +0,0 @@
|
|||
"use client";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import * as Babel from "@babel/standalone";
|
||||
import * as z from "zod";
|
||||
|
||||
import {
|
||||
LayoutInfo,
|
||||
LayoutGroup,
|
||||
GroupedLayoutsResponse,
|
||||
GroupSetting,
|
||||
} from "../types";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface UseGroupLayoutLoaderReturn {
|
||||
layoutGroup: LayoutGroup | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
retry: () => void;
|
||||
}
|
||||
|
||||
// Global cache to store layout groups and avoid re-fetching
|
||||
const layoutGroupCache = new Map<string, LayoutGroup>();
|
||||
const loadingGroupsCache = new Set<string>();
|
||||
|
||||
// Extract Babel compilation logic into a utility function
|
||||
const compileCustomLayout = (layoutCode: string, React: any, z: any) => {
|
||||
const cleanCode = layoutCode
|
||||
.replace(/import\s+React\s+from\s+'react';?/g, "")
|
||||
.replace(/import\s*{\s*z\s*}\s*from\s+'zod';?/g, "");
|
||||
|
||||
const compiled = Babel.transform(cleanCode, {
|
||||
presets: [
|
||||
["react", { runtime: "classic" }],
|
||||
["typescript", { isTSX: true, allExtensions: true }],
|
||||
],
|
||||
sourceType: "script",
|
||||
}).code;
|
||||
|
||||
const factory = new Function(
|
||||
"React",
|
||||
"z",
|
||||
`
|
||||
${compiled}
|
||||
|
||||
/* everything declared in the string is in scope here */
|
||||
return {
|
||||
__esModule: true,
|
||||
default: dynamicSlideLayout,
|
||||
layoutName,
|
||||
layoutId,
|
||||
layoutDescription,
|
||||
Schema
|
||||
};
|
||||
`
|
||||
);
|
||||
|
||||
return factory(React, z);
|
||||
};
|
||||
|
||||
export const useGroupLayoutLoader = (
|
||||
groupSlug: string
|
||||
): UseGroupLayoutLoaderReturn => {
|
||||
const [layoutGroup, setLayoutGroup] = useState<LayoutGroup | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const hasMountedRef = useRef(false);
|
||||
|
||||
const loadCustomLayouts = async () => {
|
||||
try {
|
||||
// Check if this is a custom group (starts with 'custom-')
|
||||
if (!groupSlug.startsWith("custom-")) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const presentationId = groupSlug.replace("custom-", "");
|
||||
|
||||
const customLayoutResponse = await fetch(
|
||||
`/api/v1/ppt/layout-management/get-layouts/${presentationId}`
|
||||
);
|
||||
|
||||
if (!customLayoutResponse.ok) {
|
||||
throw new Error(
|
||||
`Failed to fetch custom layouts: ${customLayoutResponse.statusText}`
|
||||
);
|
||||
}
|
||||
|
||||
const customLayoutsData = await customLayoutResponse.json();
|
||||
const allLayouts = customLayoutsData.layouts;
|
||||
|
||||
const groupLayouts: LayoutInfo[] = [];
|
||||
const settings: GroupSetting = {
|
||||
description: `Custom presentation layouts`,
|
||||
ordered: false,
|
||||
default: false,
|
||||
};
|
||||
|
||||
for (const layoutData of allLayouts) {
|
||||
try {
|
||||
// Compile custom layout code
|
||||
const module = compileCustomLayout(layoutData.layout_code, React, z);
|
||||
|
||||
if (!module.default) {
|
||||
toast.error(`Custom Layout has no default export`, {
|
||||
description:
|
||||
"Please ensure the layout file exports a default component",
|
||||
});
|
||||
console.warn(`❌ Custom Layout has no default export`);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!module.Schema) {
|
||||
toast.error(`Custom Layout has no Schema export`, {
|
||||
description: "Please ensure the layout file exports a Schema",
|
||||
});
|
||||
console.warn(`❌ Custom Layout has no Schema export`);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Use empty object to let schema apply its default values
|
||||
const sampleData = module.Schema.parse({});
|
||||
|
||||
const originalLayoutId =
|
||||
module.layoutId ||
|
||||
layoutData.layout_name.toLowerCase().replace(/layout$/, "");
|
||||
const layoutName =
|
||||
module.layoutName ||
|
||||
layoutData.layout_name.replace(/([A-Z])/g, " $1").trim();
|
||||
|
||||
const layoutInfo: LayoutInfo = {
|
||||
name: layoutName,
|
||||
component: module.default,
|
||||
schema: module.Schema,
|
||||
sampleData,
|
||||
fileName: layoutData.layout_name,
|
||||
groupName: groupSlug,
|
||||
layoutId: originalLayoutId,
|
||||
};
|
||||
|
||||
groupLayouts.push(layoutInfo);
|
||||
} catch (compilationError) {
|
||||
console.error(
|
||||
`Failed to compile custom layout ${layoutData.layout_name}:`,
|
||||
compilationError
|
||||
);
|
||||
toast.error(`Failed to compile ${layoutData.layout_name}`, {
|
||||
description: "There was an error compiling the custom layout code",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (groupLayouts.length === 0) {
|
||||
throw new Error(
|
||||
`No valid custom layouts found in "${groupSlug}" group.`
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
groupName: groupSlug,
|
||||
layouts: groupLayouts,
|
||||
settings,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error loading custom layouts:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const loadGroupLayouts = async () => {
|
||||
// Check cache first
|
||||
if (layoutGroupCache.has(groupSlug)) {
|
||||
setLayoutGroup(layoutGroupCache.get(groupSlug)!);
|
||||
setLoading(false);
|
||||
setError(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// Prevent multiple simultaneous requests for the same group
|
||||
if (loadingGroupsCache.has(groupSlug)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
loadingGroupsCache.add(groupSlug);
|
||||
|
||||
// Check if this is a custom group
|
||||
if (groupSlug.startsWith("custom-")) {
|
||||
const customGroup = await loadCustomLayouts();
|
||||
if (customGroup) {
|
||||
// Cache the result
|
||||
layoutGroupCache.set(groupSlug, customGroup);
|
||||
setLayoutGroup(customGroup);
|
||||
setError(null);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Load standard layouts
|
||||
const response = await fetch("/api/layouts");
|
||||
if (!response.ok) {
|
||||
toast.error("Error loading layouts", {
|
||||
description: response.statusText,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const groupedLayoutsData: GroupedLayoutsResponse[] =
|
||||
await response.json();
|
||||
|
||||
// Find the specific group by slug
|
||||
const targetGroupData = groupedLayoutsData.find(
|
||||
(group) => group.groupName.toLowerCase() === groupSlug.toLowerCase()
|
||||
);
|
||||
|
||||
if (!targetGroupData) {
|
||||
setError(`Group "${groupSlug}" not found`);
|
||||
return;
|
||||
}
|
||||
|
||||
const groupLayouts: LayoutInfo[] = [];
|
||||
|
||||
// Use settings from settings.json or provide defaults
|
||||
const groupSettings: GroupSetting = targetGroupData.settings
|
||||
? targetGroupData.settings
|
||||
: {
|
||||
description: `${targetGroupData.groupName} presentation layouts`,
|
||||
ordered: false,
|
||||
default: false,
|
||||
};
|
||||
|
||||
for (const fileName of targetGroupData.files) {
|
||||
try {
|
||||
const layoutName = fileName.replace(".tsx", "").replace(".ts", "");
|
||||
const module = await import(
|
||||
`@/presentation-layouts/${targetGroupData.groupName}/${layoutName}`
|
||||
);
|
||||
|
||||
if (!module.default) {
|
||||
toast.error(`${layoutName} has no default export`, {
|
||||
description:
|
||||
"Please ensure the layout file exports a default component",
|
||||
});
|
||||
|
||||
console.warn(`${layoutName} has no default export`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!module.Schema) {
|
||||
toast.error(`${layoutName} is missing required Schema export`, {
|
||||
description: "Please ensure the layout file exports a Schema",
|
||||
});
|
||||
console.error(`${layoutName} is missing required Schema export`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Use empty object to let schema apply its default values
|
||||
const sampleData = module.Schema.parse({});
|
||||
const layoutId =
|
||||
module.layoutId || layoutName.toLowerCase().replace(/layout$/, "");
|
||||
|
||||
const layoutInfo: LayoutInfo = {
|
||||
name: layoutName,
|
||||
component: module.default,
|
||||
schema: module.Schema,
|
||||
sampleData,
|
||||
fileName,
|
||||
groupName: targetGroupData.groupName,
|
||||
layoutId,
|
||||
};
|
||||
|
||||
groupLayouts.push(layoutInfo);
|
||||
} catch (importError) {
|
||||
console.error(
|
||||
`Failed to import ${fileName} from ${targetGroupData.groupName}:`,
|
||||
importError
|
||||
);
|
||||
|
||||
// Try alternative import path
|
||||
try {
|
||||
const layoutName = fileName.replace(".tsx", "").replace(".ts", "");
|
||||
const module = await import(
|
||||
`@/presentation-layouts/${targetGroupData.groupName}/${layoutName}`
|
||||
);
|
||||
|
||||
if (module.default && module.Schema) {
|
||||
const sampleData = module.Schema.parse({});
|
||||
// if layoutId is not provided, use the layoutName
|
||||
const layoutId =
|
||||
module.layoutId ||
|
||||
layoutName.toLowerCase().replace(/layout$/, "");
|
||||
const layoutInfo: LayoutInfo = {
|
||||
name: layoutName,
|
||||
component: module.default,
|
||||
schema: module.Schema,
|
||||
sampleData,
|
||||
fileName,
|
||||
groupName: targetGroupData.groupName,
|
||||
layoutId,
|
||||
};
|
||||
groupLayouts.push(layoutInfo);
|
||||
} else {
|
||||
console.error(
|
||||
`${layoutName} is missing required exports (default component or Schema)`
|
||||
);
|
||||
}
|
||||
} catch (altError) {
|
||||
console.error(
|
||||
`Alternative import also failed for ${fileName} from ${targetGroupData.groupName}:`,
|
||||
altError
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (groupLayouts.length === 0) {
|
||||
toast.error("No valid layouts found", {
|
||||
description: `No valid layouts found in "${groupSlug}" group.`,
|
||||
});
|
||||
setError(`No valid layouts found in "${groupSlug}" group.`);
|
||||
} else {
|
||||
const group: LayoutGroup = {
|
||||
groupName: targetGroupData.groupName,
|
||||
layouts: groupLayouts,
|
||||
settings: groupSettings,
|
||||
};
|
||||
|
||||
// Cache the result
|
||||
layoutGroupCache.set(groupSlug, group);
|
||||
setLayoutGroup(group);
|
||||
setError(null);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading group layouts:", error);
|
||||
setError(
|
||||
error instanceof Error ? error.message : "Failed to load group layouts"
|
||||
);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
loadingGroupsCache.delete(groupSlug);
|
||||
}
|
||||
};
|
||||
|
||||
const retry = () => {
|
||||
hasMountedRef.current = false;
|
||||
loadGroupLayouts();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (groupSlug && !hasMountedRef.current) {
|
||||
hasMountedRef.current = true;
|
||||
loadGroupLayouts();
|
||||
}
|
||||
}, [groupSlug]);
|
||||
|
||||
return {
|
||||
layoutGroup,
|
||||
loading,
|
||||
error,
|
||||
retry,
|
||||
};
|
||||
};
|
||||
|
|
@ -1,157 +0,0 @@
|
|||
'use client'
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
import { LayoutInfo, LayoutGroup, GroupedLayoutsResponse, GroupSetting } from '../types'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
interface UseLayoutLoaderReturn {
|
||||
layoutGroups: LayoutGroup[]
|
||||
layouts: LayoutInfo[]
|
||||
loading: boolean
|
||||
error: string | null
|
||||
retry: () => void
|
||||
}
|
||||
|
||||
export const useLayoutLoader = (): UseLayoutLoaderReturn => {
|
||||
const [layoutGroups, setLayoutGroups] = useState<LayoutGroup[]>([])
|
||||
const [layouts, setLayouts] = useState<LayoutInfo[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const loadAllLayouts = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
const response = await fetch('/api/templates')
|
||||
if (!response.ok) {
|
||||
toast.error('Error loading templates', {
|
||||
description: response.statusText,
|
||||
})
|
||||
return
|
||||
}
|
||||
const groupedLayoutsData: GroupedLayoutsResponse[] = await response.json()
|
||||
const loadedGroups: LayoutGroup[] = []
|
||||
const allLayouts: LayoutInfo[] = []
|
||||
|
||||
for (const groupData of groupedLayoutsData) {
|
||||
const groupLayouts: LayoutInfo[] = []
|
||||
|
||||
const groupSettings: GroupSetting = groupData.settings ? groupData.settings : {
|
||||
description: `${groupData.groupName} presentation templates`,
|
||||
ordered: false,
|
||||
default: false
|
||||
}
|
||||
|
||||
for (const fileName of groupData.files) {
|
||||
try {
|
||||
const layoutName = fileName.replace('.tsx', '').replace('.ts', '')
|
||||
const module = await import(`@/presentation-layouts/${groupData.groupName}/${layoutName}`)
|
||||
|
||||
if (!module.default) {
|
||||
toast.error(`${layoutName} has no default export`, {
|
||||
description: 'Please ensure the template file exports a default component',
|
||||
})
|
||||
console.warn(`${layoutName} has no default export`)
|
||||
throw new Error(`${layoutName} has no default export`)
|
||||
}
|
||||
|
||||
if (!module.Schema) {
|
||||
toast.error(`${layoutName} is missing required Schema export`, {
|
||||
description: 'Please ensure the template file exports a Schema',
|
||||
})
|
||||
console.error(`${layoutName} is missing required Schema export`)
|
||||
throw new Error(`${layoutName} is missing required Schema export`)
|
||||
}
|
||||
|
||||
const sampleData = module.Schema.parse({})
|
||||
const layoutId = module.layoutId || layoutName.toLowerCase().replace(/layout$/, '')
|
||||
|
||||
const layoutInfo: LayoutInfo = {
|
||||
name: layoutName,
|
||||
component: module.default,
|
||||
schema: module.Schema,
|
||||
sampleData,
|
||||
fileName,
|
||||
groupName: groupData.groupName,
|
||||
layoutId
|
||||
}
|
||||
|
||||
groupLayouts.push(layoutInfo)
|
||||
allLayouts.push(layoutInfo)
|
||||
|
||||
} catch (importError) {
|
||||
console.error(`Failed to import ${fileName} from ${groupData.groupName}:`, importError)
|
||||
|
||||
try {
|
||||
const layoutName = fileName.replace('.tsx', '').replace('.ts', '')
|
||||
const module = await import(`@/presentation-layouts/${groupData.groupName}/${layoutName}`)
|
||||
|
||||
if (module.default && module.Schema) {
|
||||
const sampleData = module.Schema.parse({})
|
||||
const layoutId = module.layoutId || layoutName.toLowerCase().replace(/layout$/, '')
|
||||
|
||||
const layoutInfo: LayoutInfo = {
|
||||
name: layoutName,
|
||||
component: module.default,
|
||||
schema: module.Schema,
|
||||
sampleData,
|
||||
fileName,
|
||||
groupName: groupData.groupName,
|
||||
layoutId
|
||||
}
|
||||
groupLayouts.push(layoutInfo)
|
||||
allLayouts.push(layoutInfo)
|
||||
} else {
|
||||
console.error(`${layoutName} is missing required exports (default component or Schema)`)
|
||||
}
|
||||
} catch (altError) {
|
||||
console.error(`Alternative import also failed for ${fileName} from ${groupData.groupName}:`, altError)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (groupLayouts.length > 0) {
|
||||
loadedGroups.push({
|
||||
groupName: groupData.groupName,
|
||||
layouts: groupLayouts,
|
||||
settings: groupSettings
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (allLayouts.length === 0) {
|
||||
toast.error('No valid templates found', {
|
||||
description: 'Make sure your template files export both a default component and a Schema.',
|
||||
})
|
||||
setError('No valid templates found. Make sure your template files export both a default component and a Schema.')
|
||||
} else {
|
||||
setLayoutGroups(loadedGroups)
|
||||
setLayouts(allLayouts)
|
||||
setError(null)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading templates:', error)
|
||||
setError(error instanceof Error ? error.message : 'Failed to load templates')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const retry = () => {
|
||||
loadAllLayouts()
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadAllLayouts()
|
||||
}, [])
|
||||
|
||||
return {
|
||||
layoutGroups,
|
||||
layouts,
|
||||
loading,
|
||||
error,
|
||||
retry
|
||||
}
|
||||
}
|
||||
|
|
@ -108,7 +108,7 @@ const LayoutPreview = () => {
|
|||
))}
|
||||
<Card
|
||||
className="cursor-pointer hover:shadow-md transition-all border-blue-500 duration-200 group"
|
||||
onClick={() => router.push(`/custom-layout`)}
|
||||
onClick={() => router.push(`/custom-template`)}
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
|
|
|
|||
|
|
@ -443,7 +443,7 @@ thead {
|
|||
|
||||
.container__content_area {
|
||||
tab-size: 4ch;
|
||||
max-height: 400px;
|
||||
/* max-height: 600px; */
|
||||
overflow: auto;
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue