Update

resources/js/modules/editor/editor.jsx

@@ -1,12 +1,15 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 
+import { useMitt } from '@/plugins/MittContext';
 import useLocalSettingsStore from '@/stores/localSettingsStore';
 import useMediaStore from '@/stores/MediaStore';
+import useVideoEditorStore from '@/stores/VideoEditorStore';
 import EditNavSidebar from './partials/edit-nav-sidebar';
 import EditSidebar from './partials/edit-sidebar';
 import EditorCanvas from './partials/editor-canvas';
 import EditorControls from './partials/editor-controls';
 import EditorHeader from './partials/editor-header';
+import TextSidebar from './partials/text-sidebar';
 import { calculateOptimalMaxWidth, calculateResponsiveWidth } from './utils/layout-constants';
 
 // Hook to detect if viewport is below minimum width
@@ -101,11 +104,13 @@ const useResponsiveDimensions = () => {
 
 const Editor = () => {
     const { init } = useMediaStore();
-
     const { getSetting } = useLocalSettingsStore();
+    const { setSelectedTextElement } = useVideoEditorStore();
+    const emitter = useMitt();
 
     const [isEditNavSidebarOpen, setIsEditNavSidebarOpen] = useState(false);
     const [isEditSidebarOpen, setIsEditSidebarOpen] = useState(false);
+    const [isTextSidebarOpen, setIsTextSidebarOpen] = useState(false);
     const [isMuted, setIsMuted] = useState(true); // Video starts muted by default
     const { maxWidth, responsiveWidth } = useResponsiveDimensions();
     const isBelowMinWidth = useViewportDetection(320);
@@ -114,6 +119,23 @@ const Editor = () => {
         init();
     }, []);
 
+    // Listen for text element selection
+    useEffect(() => {
+        const handleTextElementSelected = (textElement) => {
+            setSelectedTextElement(textElement);
+            setIsTextSidebarOpen(true);
+            // Close other sidebars when text sidebar opens
+            setIsEditSidebarOpen(false);
+            setIsEditNavSidebarOpen(false);
+        };
+
+        emitter.on('text-element-selected', handleTextElementSelected);
+
+        return () => {
+            emitter.off('text-element-selected', handleTextElementSelected);
+        };
+    }, [emitter, setSelectedTextElement]);
+
     const handleEditNavClick = () => {
         setIsEditNavSidebarOpen(!isEditNavSidebarOpen);
     };
@@ -130,6 +152,11 @@ const Editor = () => {
         setIsEditSidebarOpen(false);
     };
 
+    const handleTextSidebarClose = () => {
+        setIsTextSidebarOpen(false);
+        setSelectedTextElement(null);
+    };
+
     // Toggle mute functionality
     const handleToggleMute = () => {
         setIsMuted(!isMuted);
@@ -139,6 +166,7 @@ const Editor = () => {
         <div className="relative mx-auto flex min-h-screen flex-col space-y-2 py-4" style={{ width: `${responsiveWidth}px` }}>
             <EditSidebar isOpen={isEditSidebarOpen} onClose={handleEditClose} />
             <EditNavSidebar isOpen={isEditNavSidebarOpen} onClose={handleEditNavClose} />
+            <TextSidebar isOpen={isTextSidebarOpen} onClose={handleTextSidebarClose} />
 
             <EditorHeader
                 className="mx-auto"