From 2dc85f70cce9755e820bfe878ccb93da3d5be9cf Mon Sep 17 00:00:00 2001
From: ct <charlesteh90@gmail.com>
Date: Mon, 16 Jun 2025 23:45:49 +0800
Subject: [PATCH] Update

---
 .../partials/canvas/sample-timeline-data.jsx  |   2 +
 .../editor/partials/canvas/video-preview.jsx  |   2 +
 .../modules/editor/partials/text-sidebar.jsx  | 103 +++++++++++++++++-
 3 files changed, 105 insertions(+), 2 deletions(-)

diff --git a/resources/js/modules/editor/partials/canvas/sample-timeline-data.jsx b/resources/js/modules/editor/partials/canvas/sample-timeline-data.jsx
index 81a75f8..5eeec54 100644
--- a/resources/js/modules/editor/partials/canvas/sample-timeline-data.jsx
+++ b/resources/js/modules/editor/partials/canvas/sample-timeline-data.jsx
@@ -60,6 +60,7 @@ const sampleTimelineElements = [
         x: 50,
         y: 600,
         fontSize: 24,
+        fontWeight: 'bold', // ADD THIS LINE
         fill: 'white',
         stroke: 'black',
         strokeWidth: 1,
@@ -75,6 +76,7 @@ const sampleTimelineElements = [
         x: 50,
         y: 650,
         fontSize: 20,
+        fontWeight: 'bold', // ADD THIS LINE
         fill: 'yellow',
         stroke: 'red',
         strokeWidth: 2,
diff --git a/resources/js/modules/editor/partials/canvas/video-preview.jsx b/resources/js/modules/editor/partials/canvas/video-preview.jsx
index e35a3d8..56f1f6a 100644
--- a/resources/js/modules/editor/partials/canvas/video-preview.jsx
+++ b/resources/js/modules/editor/partials/canvas/video-preview.jsx
@@ -445,6 +445,8 @@ const VideoPreview = ({
                                     x={element.x}
                                     y={element.y}
                                     fontSize={element.fontSize}
+                                    fontStyle={element.fontWeight === 'bold' || element.fontWeight === 700 ? 'bold' : 'normal'} // ADD THIS LINE
+                                    fontFamily="Arial"
                                     fill={element.fill}
                                     stroke={element.stroke}
                                     strokeWidth={element.strokeWidth}
diff --git a/resources/js/modules/editor/partials/text-sidebar.jsx b/resources/js/modules/editor/partials/text-sidebar.jsx
index bcaba10..443b55c 100644
--- a/resources/js/modules/editor/partials/text-sidebar.jsx
+++ b/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">