fix resize observer

backend/storage/src/index.ts

@@ -16,35 +16,34 @@ export default {
 		const path = url.pathname;
 		const method = request.method;
 
-    if (path === '/api/size' && method === 'GET') {
+		if (path === '/api/size' && method === 'GET') {
-      const params = url.searchParams;
+			const params = url.searchParams;
-      const sandboxId = params.get('sandboxId');
+			const sandboxId = params.get('sandboxId');
 
-      if (sandboxId) {
+			if (sandboxId) {
-        const res = await env.R2.list({ prefix: `projects/${sandboxId}` });
+				const res = await env.R2.list({ prefix: `projects/${sandboxId}` });
 
-        // sum up the size of all files
+				// sum up the size of all files
-        let size = 0;
+				let size = 0;
-        for (const file of res.objects) {
+				for (const file of res.objects) {
-          size += file.size;
+					size += file.size;
-        }
+				}
 
-        return new Response(JSON.stringify({ size }), { status: 200 });
+				return new Response(JSON.stringify({ size }), { status: 200 });
-      } else return invalidRequest;
+			} else return invalidRequest;
-    }
+		} else if (path === '/api') {
-		else if (path === '/api') {
 			if (method === 'GET') {
 				const params = url.searchParams;
 				const sandboxId = params.get('sandboxId');
-        const folderId = params.get('folderId');
+				const folderId = params.get('folderId');
 				const fileId = params.get('fileId');
 
 				if (sandboxId) {
 					const res = await env.R2.list({ prefix: `projects/${sandboxId}` });
 					return new Response(JSON.stringify(res), { status: 200 });
-        } else if (folderId) {
+				} else if (folderId) {
-          const res = await env.R2.list({ prefix: folderId });
+					const res = await env.R2.list({ prefix: folderId });
-          return new Response(JSON.stringify(res), { status: 200 });
+					return new Response(JSON.stringify(res), { status: 200 });
 				} else if (fileId) {
 					const obj = await env.R2.get(fileId);
 					if (obj === null) {

frontend/components/editor/editor.tsx

@@ -104,16 +104,7 @@ export default function CodeEditor({
   const generateRef = useRef<HTMLDivElement>(null);
   const generateWidgetRef = useRef<HTMLDivElement>(null);
   const previewPanelRef = useRef<ImperativePanelHandle>(null);
-
+  const editorPanelRef = useRef<ImperativePanelHandle>(null);
-  // Resize observer tracks editor width for generate widget
-  const resizeObserver = new ResizeObserver((entries) => {
-    for (const entry of entries) {
-      const { width } = entry.contentRect;
-      setGenerate((prev) => {
-        return { ...prev, width };
-      });
-    }
-  });
 
   // Pre-mount editor keybindings
   const handleEditorWillMount: BeforeMount = (monaco) => {
@@ -230,8 +221,17 @@ export default function CodeEditor({
         },
       };
 
+      // window width - sidebar width, times the percentage of the editor panel
+      const width = editorPanelRef.current
+        ? (editorPanelRef.current.getSize() / 100) * (window.innerWidth - 224)
+        : 400; //fallback
+
       setGenerate((prev) => {
-        return { ...prev, widget: contentWidget };
+        return {
+          ...prev,
+          widget: contentWidget,
+          width,
+        };
       });
       editorRef?.addContentWidget(contentWidget);
 
@@ -348,17 +348,12 @@ export default function CodeEditor({
     };
   }, [editorRef, room, activeFileContent]);
 
-  // Connection/disconnection effect + resizeobserver
+  // Connection/disconnection effect
   useEffect(() => {
     socket.connect();
 
-    if (editorContainerRef.current) {
-      resizeObserver.observe(editorContainerRef.current);
-    }
-
     return () => {
       socket.disconnect();
-      resizeObserver.disconnect();
     };
   }, []);
 
@@ -637,6 +632,7 @@ export default function CodeEditor({
           maxSize={80}
           minSize={30}
           defaultSize={60}
+          ref={editorPanelRef}
         >
           <div className="h-10 w-full flex gap-2 overflow-auto tab-scroll">
             {/* File tabs */}