Instantiate YjsDocument and assign to yjsDocRef

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import './App.css';
 import './styles/theme.css';
 import { ThemeProvider, useTheme } from './contexts/ThemeContext';
@@ -7,12 +7,26 @@ import SidePanel from './components/SidePanel';
 import CommandLine from './components/CommandLine';
 import StatusBar from './components/StatusBar';
 import CanvasArea from './components/CanvasArea';
+import { YjsDocument } from './crdt/YjsDocument';
 
 function AppContent() {
   const { theme, toggleTheme } = useTheme();
   const [activeRibbonTab, setActiveRibbonTab] = useState('draw');
   const canvasRef = useRef(null);
-  const yjsDocRef = useRef(null);
+  const yjsDocRef = useRef<YjsDocument | null>(null);
+
+  useEffect(() => {
+    // Instantiate YjsDocument and assign to ref
+    yjsDocRef.current = new YjsDocument();
+    
+    // Cleanup function to destroy the document when component unmounts
+    return () => {
+      if (yjsDocRef.current) {
+        yjsDocRef.current.destroy();
+        yjsDocRef.current = null;
+      }
+    };
+  }, []);
 
   const handleRibbonTabChange = (tab: string) => {
     setActiveRibbonTab(tab);