Update

resources/js/modules/editor/partials/canvas/video-preview.jsx

@@ -1,3 +1,4 @@
+import { useMitt } from '@/plugins/MittContext';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Image, Layer, Line, Stage, Text, Transformer } from 'react-konva';
 
@@ -36,6 +37,8 @@ const VideoPreview = ({
     // Refs
     layerRef,
 }) => {
+    const emitter = useMitt();
+
     // Selection state
     const [selectedElementId, setSelectedElementId] = useState(null);
     const transformerRef = useRef(null);
@@ -116,16 +119,28 @@ const VideoPreview = ({
     };
 
     // Handle element selection
-    const handleElementSelect = useCallback((elementId) => {
-        setSelectedElementId(elementId);
-        // Clear guide lines when selecting
-        setGuideLines({
-            vertical: null,
-            horizontal: null,
-            showVertical: false,
-            showHorizontal: false,
-        });
-    }, []);
+    const handleElementSelect = useCallback(
+        (elementId) => {
+            setSelectedElementId(elementId);
+
+            // Find the selected element
+            const element = timelineElements.find((el) => el.id === elementId);
+
+            // If it's a text element, emit text-element-selected event
+            if (element && element.type === 'text') {
+                emitter.emit('text-element-selected', element);
+            }
+
+            // Clear guide lines when selecting
+            setGuideLines({
+                vertical: null,
+                horizontal: null,
+                showVertical: false,
+                showHorizontal: false,
+            });
+        },
+        [emitter, timelineElements],
+    );
 
     // Handle clicking on empty space to deselect
     const handleStageClick = useCallback((e) => {
@@ -434,6 +449,10 @@ const VideoPreview = ({
                                     stroke={element.stroke}
                                     strokeWidth={element.strokeWidth}
                                     rotation={element.rotation || 0}
+                                    // Center the text horizontally
+                                    align="center"
+                                    // Let text have natural width and height for multiline support
+                                    wrap="word"
                                     draggable
                                     dragBoundFunc={createDragBoundFunc(element.id)}
                                     onClick={() => handleElementSelect(element.id)}