fix: MEDIUM issues #31-#36 — inline text editor, image/paste persist, input validation on all routes, useEffect deps, online count fix

frontend/src/crdt/useYjsBinding.ts

@@ -61,6 +61,12 @@ const DEFAULT_WS_URL = `wss://${window.location.host}`;
 export function useYjsBinding(opts: UseYjsBindingOptions): UseYjsBindingResult {
   const { docName, wsUrl = DEFAULT_WS_URL, userId, userName, userColor, enabled = true, token } = opts;
 
+  // Refs for stable values that don't need to trigger effect re-runs
+  const wsUrlRef = useRef(wsUrl);
+  wsUrlRef.current = wsUrl;
+  const enabledRef = useRef(enabled);
+  enabledRef.current = enabled;
+
   const yjsDocRef = useRef<YjsDocument | null>(null);
   const providerRef = useRef<WebSocketProvider | null>(null);
   const awarenessRef = useRef<AwarenessManager | null>(null);
@@ -77,7 +83,9 @@ export function useYjsBinding(opts: UseYjsBindingOptions): UseYjsBindingResult {
 
   // Initialize Yjs document, provider, and awareness
   useEffect(() => {
-    if (!enabled || !docName) return;
+    const currentWsUrl = wsUrlRef.current;
+    const currentEnabled = enabledRef.current;
+    if (!currentEnabled || !docName) return;
 
     const doc = new YjsDocument();
     yjsDocRef.current = doc;
@@ -86,7 +94,7 @@ export function useYjsBinding(opts: UseYjsBindingOptions): UseYjsBindingResult {
     awarenessRef.current = awareness;
 
     const provider = new WebSocketProvider({
-      url: wsUrl,
+      url: currentWsUrl,
       docName,
       yjsDoc: doc,
       awareness,
@@ -147,7 +155,7 @@ export function useYjsBinding(opts: UseYjsBindingOptions): UseYjsBindingResult {
       providerRef.current = null;
       awarenessRef.current = null;
     };
-  }, [docName, wsUrl, userId, userName, userColor, enabled, token]);
+  }, [docName, userId, token]);
 
   // Mutators
   const setElement = useCallback((el: CADElement) => {