Update

resources/js/modules/editor/partials/text-sidebar.jsx

@@ -1,19 +1,29 @@
+import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { Textarea } from '@/components/ui/textarea';
 import { useMitt } from '@/plugins/MittContext';
 import useVideoEditorStore from '@/stores/VideoEditorStore';
-import { Type } from 'lucide-react';
+import { Bold, Minus, Plus, Type } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
 export default function TextSidebar({ isOpen, onClose }) {
     const { selectedTextElement } = useVideoEditorStore();
     const emitter = useMitt();
     const [textValue, setTextValue] = useState('');
+    const [fontSize, setFontSize] = useState(24); // Default font size
+    const [isBold, setIsBold] = useState(true); // Default to bold
 
-    // Update textarea when selected element changes
+    // Font size constraints
+    const MIN_FONT_SIZE = 8;
+    const MAX_FONT_SIZE = 120;
+    const FONT_SIZE_STEP = 2;
+
+    // Update textarea, fontSize, and bold when selected element changes
     useEffect(() => {
         if (selectedTextElement) {
             setTextValue(selectedTextElement.text || '');
+            setFontSize(selectedTextElement.fontSize || 24);
+            setIsBold(selectedTextElement.fontWeight === 'bold' || selectedTextElement.fontWeight === 700 || true); // Default to bold if not set
         }
     }, [selectedTextElement]);
 
@@ -30,6 +40,42 @@ export default function TextSidebar({ isOpen, onClose }) {
         }
     };
 
+    // Handle font size changes
+    const handleFontSizeChange = (newSize) => {
+        const clampedSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, newSize));
+        setFontSize(clampedSize);
+
+        if (selectedTextElement) {
+            emitter.emit('text-update', {
+                elementId: selectedTextElement.id,
+                updates: { fontSize: clampedSize },
+            });
+        }
+    };
+
+    // Handle bold toggle
+    const handleBoldToggle = () => {
+        const newBoldState = !isBold;
+        setIsBold(newBoldState);
+
+        if (selectedTextElement) {
+            emitter.emit('text-update', {
+                elementId: selectedTextElement.id,
+                updates: { fontWeight: newBoldState ? 'bold' : 'normal' },
+            });
+        }
+    };
+
+    // Increase font size
+    const increaseFontSize = () => {
+        handleFontSizeChange(fontSize + FONT_SIZE_STEP);
+    };
+
+    // Decrease font size
+    const decreaseFontSize = () => {
+        handleFontSizeChange(fontSize - FONT_SIZE_STEP);
+    };
+
     return (
         <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
             <SheetContent side="right" className="w-80 overflow-y-auto">
@@ -43,6 +89,7 @@ export default function TextSidebar({ isOpen, onClose }) {
                 <div className="mt-6 space-y-4 px-2">
                     {selectedTextElement ? (
                         <>
+                            {/* Text Content */}
                             <div>
                                 <label className="text-sm font-medium">Edit your text here</label>
                                 <Textarea
@@ -53,6 +100,58 @@ export default function TextSidebar({ isOpen, onClose }) {
                                     rows={4}
                                 />
                             </div>
+
+                            {/* Font Size Controls */}
+                            <div>
+                                <label className="text-sm font-medium">Font Size</label>
+                                <div className="mt-2 flex items-center justify-between rounded-lg border p-2">
+                                    <Button
+                                        variant="outline"
+                                        size="icon"
+                                        onClick={decreaseFontSize}
+                                        disabled={fontSize <= MIN_FONT_SIZE}
+                                        className="h-8 w-8"
+                                    >
+                                        <Minus className="h-4 w-4" />
+                                    </Button>
+
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-lg font-semibold">{fontSize}</span>
+                                        <span className="text-sm text-gray-500">px</span>
+                                    </div>
+
+                                    <Button
+                                        variant="outline"
+                                        size="icon"
+                                        onClick={increaseFontSize}
+                                        disabled={fontSize >= MAX_FONT_SIZE}
+                                        className="h-8 w-8"
+                                    >
+                                        <Plus className="h-4 w-4" />
+                                    </Button>
+                                </div>
+
+                                {/* Font Size Range Indicator */}
+                                <div className="mt-1 text-center text-xs text-gray-500">
+                                    Size range: {MIN_FONT_SIZE}px - {MAX_FONT_SIZE}px
+                                </div>
+                            </div>
+
+                            {/* Font Style Controls */}
+                            <div>
+                                <label className="text-sm font-medium">Font Style</label>
+                                <div className="mt-2">
+                                    <Button
+                                        variant={isBold ? 'default' : 'outline'}
+                                        size="sm"
+                                        onClick={handleBoldToggle}
+                                        className="flex w-full items-center gap-2"
+                                    >
+                                        <Bold className="h-4 w-4" />
+                                        <span className={isBold ? 'font-bold' : 'font-normal'}>{isBold ? 'Bold' : 'Normal'}</span>
+                                    </Button>
+                                </div>
+                            </div>
                         </>
                     ) : (
                         <div className="text-center text-gray-500">