From 6da278ae4f0d9fbda84f670eefe8c8abc77ede5f Mon Sep 17 00:00:00 2001
From: shiva raj badu <shivabadu5@gmail.com>
Date: Wed, 6 Aug 2025 20:50:52 +0545
Subject: [PATCH] feat(Nextjs): Font uploading before processing slides addded

---
 .../components/EachSlide/HtmlEditor.tsx        | 10 +++++++---
 .../components/EachSlide/NewEachSlide.tsx      |  4 ++--
 .../EachSlide/SlideContentDisplay.tsx          |  7 ++++---
 .../custom-layout/components/FontManager.tsx   | 13 +++++++++++++
 .../custom-layout/hooks/useSlideEdit.ts        | 18 ++++++++++++++++--
 .../custom-layout/hooks/useSlideProcessing.ts  |  6 +-----
 .../custom-layout/page.tsx                     |  7 ++++++-
 .../custom-layout/types/index.ts               |  7 ++++---
 8 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/HtmlEditor.tsx b/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/HtmlEditor.tsx
index 03a17887..7ee780cb 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/HtmlEditor.tsx
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/HtmlEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -21,6 +21,10 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
   const [htmlContent, setHtmlContent] = useState(slide.html || "");
   const [isPreviewMode, setIsPreviewMode] = useState(false);
 
+  useEffect(() => {
+    setHtmlContent(slide.html || "");
+  }, [slide.html]);
+
   if (!isHtmlEditMode) return null;
 
   const handleSave = () => {
@@ -83,8 +87,8 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
               Edit HTML Content:
             </label>
             <Textarea
-              value={htmlContent}
-              onChange={(e) => setHtmlContent(e.target.value)}
+              defaultValue={htmlContent}
+              onBlur={(e) => setHtmlContent(e.target.value)}
               className="font-mono text-sm h-96 resize-none"
               placeholder="Enter HTML content here..."
             />
diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/NewEachSlide.tsx b/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/NewEachSlide.tsx
index 4b493a36..59f7653f 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/NewEachSlide.tsx
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/NewEachSlide.tsx
@@ -73,7 +73,7 @@ const EachSlide: React.FC<EachSlideProps> = ({
 
   // Handle save with drawing data
   const handleSaveWithDrawing = () => {
-    handleSave(slideDisplayRef, didYourDraw);
+    handleSave(slideDisplayRef!, didYourDraw);
   };
 
   // Handle delete slide
@@ -132,7 +132,6 @@ const EachSlide: React.FC<EachSlideProps> = ({
           onEraserModeChange={handleEraserModeChange}
           onClearCanvas={handleClearCanvas}
         />
-
         {/* Slide Content Display */}
         <SlideContentDisplay
           slide={slide}
@@ -152,6 +151,7 @@ const EachSlide: React.FC<EachSlideProps> = ({
           onMouseUp={handleMouseUp}
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
+          retrySlide={handleRetrySlide}
           onTouchEnd={handleTouchEnd}
         />
       </CardContent>
diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/SlideContentDisplay.tsx b/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/SlideContentDisplay.tsx
index 58430104..12e04fdb 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/SlideContentDisplay.tsx
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/SlideContentDisplay.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { Button } from "@/components/ui/button";
-import { Loader2 } from "lucide-react";
+
 import SlideContent from "../SlideContent";
 import { SlideContentDisplayProps } from "../../types";
 
@@ -12,9 +11,9 @@ export const SlideContentDisplay: React.FC<SlideContentDisplayProps> = ({
   slideDisplayRef,
   canvasRef,
   canvasDimensions,
+  eraserMode,
   strokeWidth,
   strokeColor,
-  eraserMode,
   isDrawing,
   didYourDraw,
   onMouseDown,
@@ -23,6 +22,7 @@ export const SlideContentDisplay: React.FC<SlideContentDisplayProps> = ({
   onTouchStart,
   onTouchMove,
   onTouchEnd,
+  retrySlide,
 }) => {
   // Don't show slide content when in HTML edit mode
   if (isHtmlEditMode) {
@@ -103,6 +103,7 @@ export const SlideContentDisplay: React.FC<SlideContentDisplayProps> = ({
             slide.error
           )}
         </div>
+        <button onClick={() => retrySlide(slide.slide_number)}>Retry</button>
       </div>
     );
   }
diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/components/FontManager.tsx b/servers/nextjs/app/(presentation-generator)/custom-layout/components/FontManager.tsx
index f9b590e4..7ee5df52 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/components/FontManager.tsx
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/components/FontManager.tsx
@@ -30,6 +30,7 @@ interface FontManagerProps {
   uploadFont: (fontName: string, file: File) => Promise<string | null>;
   removeFont: (fontUrl: string) => void;
   getAllUnsupportedFonts: () => string[];
+  processSlideToHtml: () => void;
 }
 
 const FontManager: React.FC<FontManagerProps> = ({
@@ -38,6 +39,7 @@ const FontManager: React.FC<FontManagerProps> = ({
   uploadFont,
   removeFont,
   getAllUnsupportedFonts,
+  processSlideToHtml,
 }) => {
   const [uploadingFonts, setUploadingFonts] = useState<Set<string>>(new Set());
   const fileInputRefs = useRef<{ [key: string]: HTMLInputElement | null }>({});
@@ -214,6 +216,17 @@ const FontManager: React.FC<FontManagerProps> = ({
             </div>
           </div>
         )}
+        <div className="flex justify-center mt-4">
+
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={processSlideToHtml}
+          className="text-xs px-8 py-2 font-semibold bg-blue-600 text-white hover:text-white hover:bg-blue-700 border-blue-600"
+          >
+            Extract layouts
+        </Button>
+          </div>
       </CardContent>
     </Card>
   );
diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideEdit.ts b/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideEdit.ts
index 4d3ceb4a..54c38b97 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideEdit.ts
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideEdit.ts
@@ -12,7 +12,7 @@ export const useSlideEdit = (
   const [isUpdating, setIsUpdating] = useState(false);
   const [prompt, setPrompt] = useState("");
   const [slideHtml, setSlideHtml] = useState("");
-  const slideContentRef = useRef<HTMLDivElement>(null);
+  const slideContentRef = useRef<HTMLDivElement | null>(null);
 
   // Load Tailwind CSS dynamically for slide content
   useEffect(() => {
@@ -90,7 +90,7 @@ export const useSlideEdit = (
   };
 
   const handleSave = async (
-    slideDisplayRef: React.RefObject<HTMLDivElement>,
+    slideDisplayRef: React.RefObject<HTMLDivElement |null>,
     didYourDraw: boolean
   ) => {
     if (
@@ -173,6 +173,20 @@ export const useSlideEdit = (
         processing: false,
         error: undefined,
       };
+      // download screenshot
+      const screenshot = slideOnly.toDataURL("image/png");
+      const link = document.createElement("a");
+      link.href = screenshot;
+      link.download = `slide-${slide.slide_number}-current.png`;
+      link.click();
+      // second screenshot
+      if (sketchImageBlob && slideWithCanvas) {
+        const screenshot2 = slideWithCanvas.toDataURL("image/png");
+        const link2 = document.createElement("a");
+        link2.href = screenshot2;
+        link2.download = `slide-${slide.slide_number}-sketch.png`;
+        link2.click();
+      }
 
       if (onSlideUpdate) {
         onSlideUpdate(updatedSlideData);
diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideProcessing.ts b/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideProcessing.ts
index e3f00255..e40a5e59 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideProcessing.ts
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideProcessing.ts
@@ -161,11 +161,7 @@ export const useSlideProcessing = (
         `Successfully extracted ${pptxData.slides.length} slides! Converting to HTML...`
       );
 
-      // Start processing first slide
-      setTimeout(() => {
-        console.log("Starting to process first slide");
-        processSlideToHtml(initialSlides[0], 0);
-      }, 500);
+      
     } catch (error) {
       console.error("Error processing file:", error);
       const errorMessage =
diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/page.tsx b/servers/nextjs/app/(presentation-generator)/custom-layout/page.tsx
index d9a18e72..14ba84f7 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/page.tsx
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/page.tsx
@@ -25,7 +25,7 @@ const CustomLayoutPage = () => {
   const { selectedFile, handleFileSelect, removeFile } = useFileUpload();
   const { slides, setSlides, completedSlides } = useCustomLayout();
   const { fontsData, UploadedFonts, uploadFont, removeFont, getAllUnsupportedFonts, setFontsData } = useFontManagement();
-  const { isProcessingPptx, processFile, retrySlide } = useSlideProcessing(
+  const { isProcessingPptx, processFile, retrySlide,processSlideToHtml } = useSlideProcessing(
     selectedFile,
     slides,
     setSlides,
@@ -38,6 +38,10 @@ const CustomLayoutPage = () => {
     refetch
   );
 
+  const handleProcessSlideToHtml = (slide: any) => {
+    processSlideToHtml(slide,0)
+  }
+
   // Handle slide updates
   const handleSlideUpdate = (index: number, updatedSlideData: any) => {
     setSlides((prevSlides) =>
@@ -97,6 +101,7 @@ const CustomLayoutPage = () => {
             uploadFont={uploadFont}
             removeFont={removeFont}
             getAllUnsupportedFonts={getAllUnsupportedFonts}
+            processSlideToHtml={()=>handleProcessSlideToHtml(slides[0])}
           />
         )}
 
diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/types/index.ts b/servers/nextjs/app/(presentation-generator)/custom-layout/types/index.ts
index 9e53eb9b..e82bcca1 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/types/index.ts
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/types/index.ts
@@ -83,9 +83,9 @@ export interface SlideContentDisplayProps {
   slide: ProcessedSlide;
   isEditMode: boolean;
   isHtmlEditMode: boolean;
-  slideContentRef: React.RefObject<HTMLDivElement>;
-  slideDisplayRef: React.RefObject<HTMLDivElement>;
-  canvasRef: React.RefObject<HTMLCanvasElement>;
+  slideContentRef: React.RefObject<HTMLDivElement | null>;
+  slideDisplayRef: React.RefObject<HTMLDivElement | null>;
+  canvasRef: React.RefObject<HTMLCanvasElement | null>;
   canvasDimensions: { width: number; height: number };
   strokeWidth: number;
   strokeColor: string;
@@ -98,6 +98,7 @@ export interface SlideContentDisplayProps {
   onTouchStart: (e: React.TouchEvent<HTMLCanvasElement>) => void;
   onTouchMove: (e: React.TouchEvent<HTMLCanvasElement>) => void;
   onTouchEnd: (e: React.TouchEvent<HTMLCanvasElement>) => void;
+  retrySlide: (slideNumber: number) => void;
 }
 
 export interface HtmlEditorProps {