text customization edited, now there is a live preview of before applying the changes and added button of apply the change

src/components/EachComponent/Customization/TextCustomization.jsx

@@ -8,7 +8,7 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa
 import { Slider } from '@/components/ui/slider';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useContext, useEffect, useState } from 'react'
-import { AlignLeft, AlignCenter, AlignRight, Bold, Italic, Underline, Strikethrough } from "lucide-react";
+import { AlignLeft, AlignCenter, AlignRight, Bold, Italic, Underline, Strikethrough } from 'lucide-react';
 import CollapsibleComponent from './CollapsibleComponent';
 
 const fonts = [
@@ -37,6 +37,7 @@ const TextCustomization = () => {
     const [underline, setUnderline] = useState(false);
     const [linethrough, setLinethrough] = useState(false);
     const [textAlign, setTextAlign] = useState('left');
+    const [previewText, setPreviewText] = useState('');
 
     useEffect(() => {
         if (activeObject?.type === "i-text") {
@@ -50,6 +51,7 @@ const TextCustomization = () => {
             setUnderline(activeObject?.underline || false);
             setLinethrough(activeObject?.linethrough || false);
             setTextAlign(activeObject?.textAlign || 'left');
+            setPreviewText(activeObject?.text || '');
         }
     }, [activeObject])
 
@@ -60,58 +62,78 @@ const TextCustomization = () => {
         }
     }
 
+    const updatePreview = (properties) => {
+        setPreviewText(text);
+    }
+
+    const applyChanges = () => {
+        updateActiveObject({
+            text,
+            fontFamily,
+            fontSize,
+            fontStyle,
+            fontWeight,
+            lineHeight,
+            charSpacing,
+            underline,
+            linethrough,
+            textAlign
+        });
+    }
+
     const handleTextChange = (newText) => {
-        setText(newText)
-        updateActiveObject({ text: newText })
+        setText(newText);
+        updatePreview({ text: newText });
+        setPreviewText(newText);
     }
 
     const handleFontFamilyChange = (newFontFamily) => {
-        setFontFamily(newFontFamily)
-        updateActiveObject({ fontFamily: newFontFamily })
+        setFontFamily(newFontFamily);
+        updatePreview({ fontFamily: newFontFamily });
     }
 
     const handleFontSizeChange = (newFontSize) => {
         setFontSize(newFontSize)
-        updateActiveObject({ fontSize: newFontSize })
+        updatePreview({ fontSize: newFontSize })
     }
 
     const handleTextAlignChange = (newTextAlign) => {
         setTextAlign(newTextAlign)
-        updateActiveObject({ textAlign: newTextAlign })
+        updatePreview({ textAlign: newTextAlign })
     }
 
     const handleFontStyleChange = () => {
         const newFontStyle = fontStyle === 'normal' ? 'italic' : 'normal'
         setFontStyle(newFontStyle)
-        updateActiveObject({ fontStyle: newFontStyle })
+        updatePreview({ fontStyle: newFontStyle })
     }
 
     const handleFontWeightChange = () => {
         const newFontWeight = fontWeight === 'normal' ? 'bold' : 'normal'
         setFontWeight(newFontWeight)
-        updateActiveObject({ fontWeight: newFontWeight })
+        updatePreview({ fontWeight: newFontWeight })
     }
 
     const handleLineHeightChange = (newLineHeight) => {
         setLineHeight(newLineHeight)
-        updateActiveObject({ lineHeight: newLineHeight })
+        updatePreview({ lineHeight: newLineHeight })
     }
 
     const handleCharSpacingChange = (newCharSpacing) => {
         setCharSpacing(newCharSpacing)
-        updateActiveObject({ charSpacing: newCharSpacing })
+        updatePreview({ charSpacing: newCharSpacing })
     }
 
     const handleUnderlineChange = () => {
         const newUnderline = !underline
         setUnderline(newUnderline)
-        updateActiveObject({ underline: newUnderline })
+        updatePreview({ underline: newUnderline })
     }
 
     const handleLinethroughChange = () => {
         const newLinethrough = !linethrough
         setLinethrough(newLinethrough)
-        updateActiveObject({ linethrough: newLinethrough })
+        updatePreview({ linethrough: newLinethrough })
     }
 
     const content = () => {
@@ -135,6 +157,7 @@ const TextCustomization = () => {
                             <TabsTrigger value="text">Text</TabsTrigger>
                             <TabsTrigger value="style">Style</TabsTrigger>
                         </TabsList>
+
                         <TabsContent value="text" className="space-y-1">
                             <div className="space-y-1">
                                 <Label htmlFor="text-content">Text Content</Label>
@@ -150,7 +173,7 @@ const TextCustomization = () => {
                                     <SelectTrigger>
                                         <SelectValue placeholder="Select a font" />
                                     </SelectTrigger>
-                                    <SelectContent>
+                                    <SelectContent className="h-[250px]">
                                         <SelectGroup>
                                             {fonts.map((font) => (
                                                 <SelectItem style={{ fontFamily: font }} key={font} value={font}>
@@ -273,8 +296,33 @@ const TextCustomization = () => {
             <CollapsibleComponent text={"Text Control"}>
                 {content()}
             </CollapsibleComponent>
+            <div className="mt-4 space-y-4">
+                {
+                    previewText &&
+                    <div className="p-4 border rounded-md overflow-hidden">
+                        <p className="font-bold mb-2">Preview:</p>
+                        <p style={{
+                            fontFamily,
+                            fontSize: `${fontSize}px`,
+                            fontStyle,
+                            fontWeight,
+                            lineHeight,
+                            letterSpacing: `${charSpacing}px`,
+                            textDecoration: `${underline ? 'underline' : ''} ${linethrough ? 'line-through' : ''}`,
+                            textAlign
+                        }} className='truncate'>
+                            {previewText}
+                        </p>
+                    </div>
+                }
+
+                <Button onClick={applyChanges} className="w-full">
+                    Apply Changes
+                </Button>
+            </div>
         </Card>
     )
 }
 
 export default TextCustomization
+