+
Trigger: {hook.trigger_event}
Secured by Secret Key
diff --git a/components/Layout/Dashboard/Generate/Editor/CustomImageDialog.tsx b/components/Layout/Dashboard/Generate/Editor/CustomImageDialog.tsx
index abc2f14..f1d3748 100644
--- a/components/Layout/Dashboard/Generate/Editor/CustomImageDialog.tsx
+++ b/components/Layout/Dashboard/Generate/Editor/CustomImageDialog.tsx
@@ -2,6 +2,10 @@ import React, { useState } from 'react';
import { Button } from '@/components/ui/button'; // Assuming you use a UI library
import { Input } from '@/components/ui/input';
import { SaveImageParameters } from '@mdxeditor/editor'; // The type for submitting data
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+import { Images } from '../RightSidebarPanel';
+import { ImagePlus } from 'lucide-react';
// Define the shape of the props the MDX editor will pass to your component
interface CustomImageDialogProps {
@@ -13,7 +17,7 @@ interface CustomImageDialogProps {
// state: EditingImageDialogState | NewImageDialogState;
}
-const CustomImageDialog: React.FC
= ({ onImageUpload, onClose }) => {
+const CustomImageDialog = () => {
const [url, setUrl] = useState('');
const [altText, setAltText] = useState('');
const [file, setFile] = useState(null);
@@ -25,12 +29,7 @@ const CustomImageDialog: React.FC = ({ onImageUpload, on
// CASE 1: Image URL provided
if (url.trim()) {
- onImageUpload({
- src: url.trim(),
- altText: altText.trim(),
- // width and height are optional, but good practice if known
- });
- onClose();
+
return;
}
@@ -42,13 +41,7 @@ const CustomImageDialog: React.FC = ({ onImageUpload, on
// You would call your private API route here (e.g., /api/upload-image)
const uploadedUrl = await uploadImageToServer(file);
- // --- STEP B: Submit the final URL to the MDX Editor ---
- onImageUpload({
- src: uploadedUrl,
- altText: altText.trim() || file.name,
- // You could fetch dimensions from the server response here if needed
- });
- onClose();
+
} catch (error) {
console.error('Image upload failed:', error);
alert('Failed to upload image. Check console for details.');
@@ -80,59 +73,18 @@ const CustomImageDialog: React.FC = ({ onImageUpload, on
};
return (
-
-
Insert Image
-
- {/* File Upload Section */}
-
-
Upload File
-
{
- setFile(e.target.files?.[0] || null);
- // Clear URL when file is selected
- setUrl('');
- }}
- />
-
or enter a URL below
-
-
- {/* URL Input Section */}
-
- Image URL
-
-
- {/* Alt Text Input */}
-
- Alt Text
-
-
- {/* Actions */}
-
-
- Cancel
-
-
- {loading ? 'Uploading...' : 'Insert Image'}
+ <>
+
+
+
+
-
-
+
+
+
+
);
};
diff --git a/components/Layout/Dashboard/Generate/Editor/Editor.tsx b/components/Layout/Dashboard/Generate/Editor/Editor.tsx
index b06b19f..99b9260 100644
--- a/components/Layout/Dashboard/Generate/Editor/Editor.tsx
+++ b/components/Layout/Dashboard/Generate/Editor/Editor.tsx
@@ -61,7 +61,7 @@ export default function Editor() {
- Loading : Initializing Markdown Interface...
-
-
{/* Simulated Code/Content Lines */}
{Array.from({ length: LINE_COUNT }).map((_, index) => {
// Line width varies to mimic code structure
diff --git a/components/Layout/Dashboard/Generate/RightSidebarPanel.tsx b/components/Layout/Dashboard/Generate/RightSidebarPanel.tsx
index 0b355c5..8292470 100644
--- a/components/Layout/Dashboard/Generate/RightSidebarPanel.tsx
+++ b/components/Layout/Dashboard/Generate/RightSidebarPanel.tsx
@@ -15,7 +15,7 @@ import { ChatHistoryRenderer } from '@/components/Layout/Dashboard/Generate/Chat
import { ScrollArea } from '@/components/ui/scroll-area';
import { toast } from 'sonner';
import { Button } from '@mdxeditor/editor';
-import { Upload, X } from 'lucide-react';
+import { TrashIcon, Upload, X } from 'lucide-react';
import { motion } from 'framer-motion';
import MobileSheetWrapper from '@/components/Layout/Dashboard/Generate/MobileSheetWrapper';
import { SystemPromptSelector } from '@/components/Layout/Dashboard/Generate/AISystemConfig';
@@ -136,7 +136,7 @@ export const Source = () => {
);
};
-const Images = () => {
+export const Images = ({ width = 400}) => {
const { generatedContent, setGeneratedContent, localImages, setLocalImages } = useContent();
// MAINTAINED LOGIC: Extract images from Markdown
@@ -202,7 +202,7 @@ const Images = () => {
return (
@@ -239,11 +239,11 @@ const Images = () => {
+
{/* Insert Button (Primary Action) */}
handleInsertImage(url)}
- className="mb-1 w-full bg-indigo-600 text-xs font-semibold text-white hover:bg-indigo-700"
+ className="mb-1 w-full bg-indigo-600 cursor-pointer text-xs rounded-md p-2.5 transition-300 font-semibold text-white hover:bg-indigo-700"
>
Insert into Editor
@@ -252,9 +252,9 @@ const Images = () => {
{isLocalImage(url) && (
handleRemoveLocalImage(url)}
- className="w-full border border-black/20 bg-white text-xs font-semibold text-black hover:bg-black hover:text-white"
+ className="container-fit bg-white border border-black/20 rounded-md p-2.5 transition-300 text-xs font-semibold text-black"
>
-
)}
diff --git a/components/Layout/Dashboard/Generate/content/Renderer.tsx b/components/Layout/Dashboard/Generate/content/Renderer.tsx
index 03f2f01..38f745d 100644
--- a/components/Layout/Dashboard/Generate/content/Renderer.tsx
+++ b/components/Layout/Dashboard/Generate/content/Renderer.tsx
@@ -12,11 +12,12 @@ import { Source } from '../RightSidebarPanel';
import EditorLoader from '@/components/Layout/Dashboard/Generate/Editor/EditorLoader';
import { FileText, PenLine, Link as LinkIcon, Code } from 'lucide-react';
import { PromptSelector } from '@/components/Layout/Dashboard/Generate/PromptSelector';
+import { ContentLoadingSkeleton } from '@/components/ui/ContentLoadingSkeleton';
const Editor = dynamic(() => import('../Editor/Editor'), {
// Make sure we turn SSR off
ssr: false,
- loading: () =>
,
+ loading: () =>
,
});
export default function Renderer() {
diff --git a/components/ui/ContentLoadingSkeleton.tsx b/components/ui/ContentLoadingSkeleton.tsx
index abad60d..8f78204 100644
--- a/components/ui/ContentLoadingSkeleton.tsx
+++ b/components/ui/ContentLoadingSkeleton.tsx
@@ -4,11 +4,12 @@ import { cn } from '@/lib/utils';
import { Skeleton } from '@/components/ui/skeleton';
import { Loader } from 'lucide-react';
-export const ContentLoadingSkeleton = () => {
+export const ContentLoadingSkeleton = ({isGenerating = true}) => {
return (
{/* 1. Header and Loader */}
-
+ ) : (
+
+
+
+ Loading editor...
+
+
+ )}
{/* 2. Main Title/Heading Skeleton */}
@@ -47,6 +58,11 @@ export const ContentLoadingSkeleton = () => {
+ {!isGenerating && (
+
+
+ )}
);