Update

resources/js/modules/editor/partials/canvas/video-preview/video-preview-element-selection.js

@@ -0,0 +1,38 @@
+// video-preview-element-selection.js
+import { useCallback, useState } from 'react';
+
+export const useElementSelection = (emitter, timelineElements) => {
+    // Selection state
+    const [selectedElementId, setSelectedElementId] = useState(null);
+
+    // Handle element selection
+    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);
+            }
+        },
+        [emitter, timelineElements],
+    );
+
+    // Handle clicking on empty space to deselect
+    const handleStageClick = useCallback((e) => {
+        // If clicking on stage (not on an element), deselect
+        if (e.target === e.target.getStage()) {
+            setSelectedElementId(null);
+        }
+    }, []);
+
+    return {
+        selectedElementId,
+        setSelectedElementId,
+        handleElementSelect,
+        handleStageClick,
+    };
+};